zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

地图优化

wulanhaote
hbao 3 years ago
parent
16c2f5515c
commit
860fdb2a5e
2 changed files with 228 additions and 50 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/components/Map/MapGisDrawing.vue
  2. +226
    -48
      src/views/homesteadSurvey/list.vue

+ 2
- 2
src/components/Map/MapGisDrawing.vue View File

@@ -99,7 +99,7 @@ export default {
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067&TIMESTAMP="+ new Date().getTime(),
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
@@ -108,7 +108,7 @@ export default {

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067&TIMESTAMP="+ new Date().getTime(),
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",


+ 226
- 48
src/views/homesteadSurvey/list.vue View File

@@ -1436,6 +1436,8 @@
this.backTheGeom = this.$cookies.get("search").backMapZjdAData.theGeom;
this.mapZjdData = this.$cookies.get("search").backMapZjdAData;
this.mapZjdTeAll.mapZjdAData = this.$cookies.get("search").backMapZjdAData;
this.mapClick = this.mapZjdTeAll.mapZjdAData.zjddm;
this.mapXs =true;
this.zjdHcDy = 1;
this.mapZjdDataTure = 1;
this.mapAddJumpNum =1;
@@ -3006,7 +3008,7 @@
// "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067&TIMESTAMP="+ new Date().getTime(),
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
@@ -3014,7 +3016,7 @@

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067&TIMESTAMP="+ new Date().getTime(),
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk= ",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
@@ -3068,13 +3070,192 @@
resolution: Math.random() * 0.00000001,
}),
});
// //定位查询位置
// let param_dw = {
// srsName: "EPSG:3857",
// service: "WFS",
// version: "1.0.0",
// request: "GetFeature",
// typename: "zjd_dc:t_house_survey_border_village",
// //featureNS: 'nsgk_hc',//命名空间 URI
// cql_filter: cql_filter,
// //featurePrefix: 'nationalwater',//工作区名称
// //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
// outputFormat: "application/json",
// //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
// };
// let url_dw = that.mapGeoServerUrl + "/geoserver/zjd_dc/wfs"; //wfsurl;
// url_dw = url_dw + "?";
// for (let key in param_dw) {
// url_dw = url_dw + key + "=" + param_dw[key] + "&";
// }
// url_dw = url_dw.substr(0, url_dw.length - 1);
// fetch(url_dw, {
// method: "POST", // *GET, POST, PUT, DELETE, etc.
// })
// .then((res) => {
// var geojsonmap = res.json();
// return geojsonmap;
// })
// .then((data) => {
// if (that.backTheGeom != "" && that.backTheGeom != undefined && that.backTheGeom.substring(0, 1) == "{") {
// //自然幢图层查询开始 ------------------start
// var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + that.mapZjdData.zjddm + "'";
// zrzTc = new ol.layer.Image({
// source: new ol.source.ImageWMS({
// url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
// params: {
// LAYERS: 'zjd_dc:t_house_survey_zrz',
// TILED: true,
// cql_filter: cql_filter_map,
// SRID: 3857,
// TIMESTAMP: new Date().getTime(),
// },
// }),
// });
// map.addLayer(zrzTc);
// //自然幢图层查询开始 ------------------start
// //附属设施图层查询开始 ------------------start
// //var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
// fsssTc = new ol.layer.Image({
// source: new ol.source.ImageWMS({
// url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
// params: {
// LAYERS: 'zjd_dc:t_house_survey_fsss',
// TILED: true,
// cql_filter: cql_filter_map,
// SRID: 3857,
// TIMESTAMP: new Date().getTime(),
// },
// }),
// });
// map.addLayer(fsssTc);
// //附属设施图层查询开始 ------------------end
// hc_land_on = new ol.layer.Vector({
// title: "add Layer",
// source: new ol.source.Vector({
// projection: projection,
// features: new ol.format.GeoJSON().readFeatures(that.backTheGeom),
// }),
// style: new ol.style.Style({
// stroke: new ol.style.Stroke({
// //边界样式
// color: "#CCFF66",
// width: 6,
// }),
// }),
// });
// map.addLayer(hc_land_on);
// var maxXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxX;
// var maxYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxY;
// var minXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minX;
// var minYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minY;
// //定位查询位置
// var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
// that.clickBbox = center;
// console.log(that.mapZjdData);
// that.textMjAll = that.mapZjdData.zdmj;
// map.getView().animate({
// // 只设置需要的属性即可
// center: center, // 中心点
// zoom: 17.9, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// resolution: Math.random() * 0.00000001,
// });
// //this.backMap =1;
// } else if (that.backTheGeom != "" && that.backTheGeom != undefined && that.backTheGeom.substring(0, 1) == "[") {
// //that.newHt ="1";
// var zbNew = JSON.stringify({
// "type": "MultiPolygon",
// "coordinates": [that.backTheGeom.replaceAll("\"", "")]
// });
// var leftJoin = zbNew.replace("\"[", "[");
// var rightJoin = leftJoin.replace("\"]", "]");
// hc_land_on = new ol.layer.Vector({
// title: "add Layer",
// source: new ol.source.Vector({
// projection: projection,
// features: new ol.format.GeoJSON().readFeatures("{\n" +
// " \"type\": \"Feature\",\n" +
// " \"geometry\":" + rightJoin + "}"),
// }),
// style: new ol.style.Style({
// fill: new ol.style.Fill({
// //矢量图层填充颜色，以及透明度
// color: "rgba(204, 255, 204,0.3)",
// }),
// stroke: new ol.style.Stroke({
// //边界样式
// color: "#CCFF66",
// width: 3,
// }),
// }),
// });
// map.addLayer(hc_land_on);
// var maxXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxX;
// var maxYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxY;
// var minXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minX;
// var minYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minY;
// //定位查询位置
// var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
// that.clickBbox = center;
// that.textMjAll = that.mapZjdData.zdmj;
// map.getView().animate({
// // 只设置需要的属性即可
// center: center, // 中心点
// zoom: 16.9, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// resolution: Math.random() * 0.00000001,
// });
// //this.backMap =1;
// } else {
// //通过村界大小视图显示
// // let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize());
// // resolution:resolution + Math.random() * 0.00000001,
// // map.getView().fit(data.bbox);
// // map.getView().setResolution(resolution);
// // //初始视图大小控制
// // map.getView().setZoom(16.0);
// console.log(data);
// console.log(data.features[0].geometry.coordinates[0][0][0]);
// map.getView().animate({
// // 只设置需要的属性即可
// center: data.features[0].geometry.coordinates[0][0][0], // 中心点
// zoom: 16.9, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// resolution: Math.random() * 0.00000001,
// });
// }
// })
// .catch((error) => {
// console.log("【异常】", error);
// });
map.addLayer(cunTc);
//村边界查询开始 ------------------------------end
//宅基地图层查询开始 ------------------start
//var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'";
var zjdTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
LAYERS: 'zjd_dc:t_house_survey_zjdzd',
TILED: true,
cql_filter: cql_filter,
SRID: 3857,
TIMESTAMP: new Date().getTime(),
},
}),
});
//定位查询位置
let param_dw = {
let param_zjdzd = {
srsName: "EPSG:3857",
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typename: "zjd_dc:t_house_survey_border_village",
typename: "zjd_dc:t_house_survey_zjdzd",
//featureNS: 'nsgk_hc',//命名空间 URI
cql_filter: cql_filter,
//featurePrefix: 'nationalwater',//工作区名称
@@ -3082,13 +3263,13 @@
outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
};
let url_dw = that.mapGeoServerUrl + "/geoserver/zjd_dc/wfs"; //wfsurl;
url_dw = url_dw + "?";
for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&";
let url_zjdzd = that.mapGeoServerUrl + "/geoserver/zjd_dc/wfs"; //wfsurl;
url_zjdzd = url_zjdzd + "?";
for (let key in param_zjdzd) {
url_zjdzd = url_zjdzd + key + "=" + param_zjdzd[key] + "&";
}
url_dw = url_dw.substr(0, url_dw.length - 1);
fetch(url_dw, {
url_zjdzd = url_zjdzd.substr(0, url_zjdzd.length - 1);
fetch(url_zjdzd, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
@@ -3099,7 +3280,7 @@
if (that.backTheGeom != "" && that.backTheGeom != undefined && that.backTheGeom.substring(0, 1) == "{") {
//自然幢图层查询开始 ------------------start
var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + that.mapZjdData.zjddm + "'";
var zrzTcMapOn = new ol.layer.Image({
zrzTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -3111,11 +3292,11 @@
},
}),
});
map.addLayer(zrzTcMapOn);
map.addLayer(zrzTc);
//自然幢图层查询开始 ------------------start
//附属设施图层查询开始 ------------------start
//var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var fsssTcMapOn = new ol.layer.Image({
fsssTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -3127,7 +3308,7 @@
},
}),
});
map.addLayer(fsssTcMapOn);
map.addLayer(fsssTc);
//附属设施图层查询开始 ------------------end
hc_land_on = new ol.layer.Vector({
title: "add Layer",
@@ -3198,7 +3379,6 @@
//定位查询位置
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
that.clickBbox = center;
console.log(that.mapZjdData);
that.textMjAll = that.mapZjdData.zdmj;
map.getView().animate({
// 只设置需要的属性即可
@@ -3210,34 +3390,31 @@
});
//this.backMap =1;
} else {
let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize());
resolution:resolution + Math.random() * 0.00000001,
map.getView().fit(data.bbox);
map.getView().setResolution(resolution);
//通过村界大小视图显示
// let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize());
// resolution:resolution + Math.random() * 0.00000001,
// map.getView().fit(data.bbox);
// map.getView().setResolution(resolution);
// //初始视图大小控制
// map.getView().setZoom(16.0);
console.log(data);
console.log(data.features[0].geometry.coordinates[0][0][0]);
map.getView().animate({
// 只设置需要的属性即可
center: data.features[0].geometry.coordinates[0][0][0], // 中心点
zoom: 16.9, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
resolution: Math.random() * 0.00000001,
});
}
})
.catch((error) => {
console.log("【异常】", error);
});
map.addLayer(cunTc);
//村边界查询开始 ------------------------------end
//宅基地图层查询开始 ------------------start
//var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'";
var zjdTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
LAYERS: 'zjd_dc:t_house_survey_zjdzd',
TILED: true,
cql_filter: cql_filter,
SRID: 3857,
TIMESTAMP: new Date().getTime(),
},
}),
});
map.addLayer(zjdTc);
//宅基地图层查询开始 ------------------start
var zrzTc;
// //自然幢图层查询开始 ------------------start
// var zrzTc = new ol.layer.Image({
// source: new ol.source.ImageWMS({
@@ -3254,6 +3431,7 @@
// map.addLayer(zrzTc);
// //自然幢图层查询开始 ------------------start
//
var fsssTc;
// //附属设施图层查询开始 ------------------start
// var fsssTc = new ol.layer.Image({
// source: new ol.source.ImageWMS({
@@ -4796,7 +4974,7 @@
//点击查看自然幢
//自然幢图层查询开始 ------------------start
var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var zrzTcMapOn = new ol.layer.Image({
zrzTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -4808,11 +4986,11 @@
},
}),
});
map.addLayer(zrzTcMapOn);
map.addLayer(zrzTc);
//自然幢图层查询开始 ------------------start
//附属设施图层查询开始 ------------------start
//var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var fsssTcMapOn = new ol.layer.Image({
fsssTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -4824,7 +5002,7 @@
},
}),
});
map.addLayer(fsssTcMapOn);
map.addLayer(fsssTc);
//附属设施图层查询开始 ------------------end
that.$cookies.set("search", "")
//that.$cookies.set("map", "")
@@ -4983,7 +5161,7 @@
} else {
//自然幢图层查询开始 ------------------start
var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var zrzTcMapOn = new ol.layer.Image({
zrzTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -4995,11 +5173,11 @@
},
}),
});
map.addLayer(zrzTcMapOn);
map.addLayer(zrzTc);
//自然幢图层查询开始 ------------------start
//附属设施图层查询开始 ------------------start
//var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var fsssTcMapOn = new ol.layer.Image({
fsssTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -5011,7 +5189,7 @@
},
}),
});
map.addLayer(fsssTcMapOn);
map.addLayer(fsssTc);
//附属设施图层查询开始 ------------------end
listZjdzd(params).then((response) => {
if (response.rows[0].zdmj != "") {
@@ -5168,7 +5346,7 @@
} else {
//自然幢图层查询开始 ------------------start
var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var zrzTcMapOn = new ol.layer.Image({
zrzTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -5180,11 +5358,11 @@
},
}),
});
map.addLayer(zrzTcMapOn);
map.addLayer(zrzTc);
//自然幢图层查询开始 ------------------start
//附属设施图层查询开始 ------------------start
//var cql_filter_map = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + obj.zjddm + "'";
var fsssTcMapOn = new ol.layer.Image({
fsssTc = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms",
params: {
@@ -5196,7 +5374,7 @@
},
}),
});
map.addLayer(fsssTcMapOn);
map.addLayer(fsssTc);
//附属设施图层查询开始 ------------------end
listZjdzd(params).then((response) => {
if (response.rows[0].zdmj != "") {


Write Preview
Loading…
Cancel
Save