From b1e9c826c1ba48c3dc263039699636ed2ba3be4e Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 27 十一月 2023 11:16:06 +0800
Subject: [PATCH] 版本更新，图层管理添加矢量数据下载，视角高度增加放大限制
---
src/assets/js/Map/server.js | 425 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 333 insertions(+), 92 deletions(-)
diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js
index c1064af..e239098 100644
--- a/src/assets/js/Map/server.js
+++ b/src/assets/js/Map/server.js
@@ -1,47 +1,80 @@
import { getToken } from "@/utils/auth";
//閰嶇疆鏂囦欢鍦板潃
-import config from "./config";
-
+// import config from "../../../../public/config/config";
+import store from "@/store";
+import { nextTick } from "vue";
const server = {
layerList: [],
+ graticules: null,
+ alpha: null,//閫忔槑搴�
+ geoLayer: [],
+ geoUrl: null,
+ wmsLayerId: null,
addTreeData(treeNode) {
- if (!treeNode.checked) {
- this.delLayer(treeNode.id);
- return;
- }
+ // if (!treeNode.checked) {
+ // this.delLayer(treeNode.id);
+ // return;
+ // }
+
+ this.alpha = this.getResLayersAlpha(treeNode);
//鍒ゆ柇鏄惁涓轰唬鐞�
if (treeNode.proxy) {
- this.addProxyAddress(treeNode);//鏈変唬鐞�
+ this.addProxyAddress(treeNode); //鏈変唬鐞�
} else {
- this.addUrlAddress(treeNode);//鏃犱唬鐞�
+ this.addUrlAddress(treeNode); //鏃犱唬鐞�
+ }
+
+ if (this.graticules) {
+ window.Viewer.imageryLayers.raiseToTop(this.graticules.imageryLayer);
+ }
+ },
+ showlonlatLine() {
+ if (!this.graticules) {
+ SmartEarth.Cesium.Ellipsoid.WGS84 = new SmartEarth.Cesium.Ellipsoid(
+ 1737400.0,
+ 1737400.0,
+ 1737400.0
+ );
+
+ this.graticules = new SmartEarth.Cesium.Graticules(
+ earthCtrl.Viewer,
+ SmartEarth.Cesium.Color.PALEGREEN
+ );
+ // graticules.makeCoordAxiss();
+ var that = this;
+ earthCtrl.Viewer.scene.preUpdate.addEventListener(function () {
+ that.graticules.update();
+ });
+ } else {
+ this.graticules.enabled = !this.graticules.enabled;
}
},
//浠ｇ悊鍦板潃
addProxyAddress(res) {
//鍒ゆ柇鏁版嵁绫诲瀷
switch (res.data) {
- case 1://鏁板瓧姝ｅ皠褰卞儚鍥�
+ case 1: //鏁板瓧姝ｅ皠褰卞儚鍥�
this.setDataType(res);
break;
- case 2://鍦烘櫙鍦板舰鏁版嵁
+ case 2: //鍦烘櫙鍦板舰鏁版嵁
this.setTerrainData(res);
break;
- case 3://鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛�
+ case 3: //鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛�
this.setDataType(res);
break;
- case 4://鍗曟尝娈垫爡鏍兼暟鎹�
+ case 4: //鍗曟尝娈垫爡鏍兼暟鎹�
this.setDataType(res);
break;
- case 5://澶氬厜璋辨爡鏍兼暟鎹�
+ case 5: //澶氬厜璋辨爡鏍兼暟鎹�
this.setDataType(res);
break;
- case 6://楂樺厜璋辨爡鏍兼暟鎹�
+ case 6: //楂樺厜璋辨爡鏍兼暟鎹�
this.setDataType(res);
break;
- case 7://鐭㈤噺鍥惧眰
+ case 7: //鐭㈤噺鍥惧眰
this.setVectorData(res);
break;
- case 8://涓夌淮妯″瀷
+ case 8: //涓夌淮妯″瀷
this.setModelData(res);
break;
}
@@ -49,132 +82,123 @@
//鏅�氬湴鍧�
addUrlAddress(res) {
switch (res.category) {
- case 0://鍏朵粬
-
+ case 0: //鍏朵粬
break;
- case 1://GisServer
+ case 1: //GisServer
this.addProxyAddress(res);
break;
- case 2://GeoServer
+ case 2: //GeoServer
this.addGeoServerAddress(res);
break;
- case 3://鏁扮畝
+ case 3: //鏁扮畝
this.addProxyAddress(res);
break;
}
-
},
//Geoserver鏈嶅姟
addGeoServerAddress(res) {
//鍒ゆ柇鏁版嵁绫诲瀷
switch (res.data) {
- case 1://鏁板瓧姝ｅ皠褰卞儚鍥�
+ case 1: //鏁板瓧姝ｅ皠褰卞儚鍥�
this.setGeoDataType(res);
break;
- case 2://鍦烘櫙鍦板舰鏁版嵁
+ case 2: //鍦烘櫙鍦板舰鏁版嵁
this.setTerrainData(res);
break;
- case 3://鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛�
+ case 3: //鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛�
this.setGeoDataType(res);
break;
- case 4://鍗曟尝娈垫爡鏍兼暟鎹�
+ case 4: //鍗曟尝娈垫爡鏍兼暟鎹�
this.setGeoDataType(res);
break;
- case 5://澶氬厜璋辨爡鏍兼暟鎹�
+ case 5: //澶氬厜璋辨爡鏍兼暟鎹�
this.setGeoDataType(res);
break;
- case 6://楂樺厜璋辨爡鏍兼暟鎹�
+ case 6: //楂樺厜璋辨爡鏍兼暟鎹�
this.setGeoDataType(res);
break;
- case 7://鐭㈤噺鍥惧眰
+ case 7: //鐭㈤噺鍥惧眰
this.setGeoVectorData(res);
break;
- case 8://涓夌淮妯″瀷
+ case 8: //涓夌淮妯″瀷
this.setModelData(res);
break;
}
},
- setGeoDataType() {
+ setGeoDataType(res) {
switch (res.type) {
- case 0://URL
+ case 0: //URL
break;
- case 1://TMS
+ case 1: //TMS
this.setAddTmsLayer(res);
break;
- case 2://WMTS
+ case 2: //WMTS
this.setAddWmtsLayer(res);
break;
- case 3://WMS
+ case 3: //WMS
this.setAddGeoWmsLayer(res);
break;
}
},
setGeoVectorData(res) {
switch (res.type) {
- case 0://URL
+ case 0: //URL
break;
- case 3://WMS
+ case 3: //WMS
this.setAddGeoWmsLayer(res);
break;
- case 4://WFS
-
+ case 4: //WFS
break;
}
},
-
-
-
-
-
setDataType(res) {
switch (res.type) {
- case 0://URL
+ case 0: //URL
break;
- case 1://TMS
+ case 1: //TMS
this.setAddTmsLayer(res);
break;
- case 2://WMTS
+ case 2: //WMTS
this.setAddWmtsLayer(res);
break;
- case 3://WMS
- this.setAddWmsLayer(res);
+ case 3: //WMS
+ // this.setAddWmsLayer(res);
+ this.setAddGeoWmsLayer(res)
break;
}
},
setTerrainData(res) {
switch (res.type) {
- case 0://URL
- this.setAddTearrinLayer(res)
+ case 0: //URL
+ this.setAddTearrinLayer(res);
break;
- case 1://TMS
+ case 1: //TMS
this.setAddTearrinLayer(res);
break;
}
},
setVectorData(res) {
switch (res.type) {
- case 0://URL
-
+ case 0: //URL
break;
- case 3://WMS
- this.setAddWmsLayer(res);
+ case 3: //WMS
+ // this.setAddWmsLayer(res);
+ this.setAddGeoWmsLayer(res)
break;
- case 4://WFS
-
+ case 4: //WFS
break;
}
},
setModelData(res) {
switch (res.type) {
- case 0://Tileset
+ case 0: //Tileset
this.setAddModelLayer(res);
break;
- case 3://WMS
+ case 3: //WMS
this.setAddModelLayer(res);
break;
- case 5://WFS
-
+ case 5: //WFS
break;
}
},
@@ -182,20 +206,20 @@
getLayrUrl(res) {
var url;
if (res.proxy) {
- const token = getToken()
- url = config.proxy + res.proxy.replaceAll("{token}", token)
+ const token = getToken();
+ url = config.proxy + res.proxy.replaceAll("{token}", token);
} else {
url = res.url;
}
- return url
+ return url;
},
//鍔犺浇TMS鏈嶅姟
setAddTmsLayer(res) {
- var url = this.getLayrUrl(res)
+ var url = this.getLayrUrl(res);
let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
"tms鏈嶅姟",
{
- url: Cesium.buildModuleUrl(url + "/{z}/{x}/{y}.png"),
+ url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),
},
"0",
undefined,
@@ -206,11 +230,13 @@
},
//鍔犺浇WMTS鏈嶅姟
setAddWmtsLayer(res) {
- var url = this.getLayrUrl(res)
- var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
+ this.delLayer(res.id);
+ var url = this.getLayrUrl(res);
+ let urlTemplateImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
sourceType: "wmts",
url: url,
layer: "",
+ id: res.id,
format: "image/png",
tileMatrixSetID: "GoogleCRS84Quad01",
tileMatrixLabels: [
@@ -238,40 +264,84 @@
tilingScheme: new Cesium.GeographicTilingScheme({
ellipsoid: Cesium.Ellipsoid.MOON,
}),
- });
+ })
+ var imageLayer = window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
+ imageLayer.id = res.id
+
+ imageLayer.alpha = this.alpha;
+ // urlTemplateImageryProvider.id = res.id
this.layerList.push({
id: res.id,
- layerData: urlTemplateImageryProvider._primitive,
+ layerData: imageLayer,
type: "wmts",
+ alpha: imageLayer,
});
+ },
+ //鑾峰彇鍥惧眰涔嬪墠鐨勯�忔槑搴�
+ getResLayersAlpha(result) {
+ var std = this.layerList.filter(res => {
+ if (res.id == result.id) {
+ return res;
+ }
+ });
+
+ if (std.length <= 0) {
+ return 1;
+ } else {
+ var id = std[0].id;
+ var val = null;
+ var layers = window.Viewer.imageryLayers._layers;
+ for (var i in layers) {
+ if (layers[i].id == id) {
+ val = id;
+ return layers[i].alpha;
+ }
+ }
+ if (!null) {
+ return 1
+ }
+ }
},
//鍔犺浇鍦板舰鏈嶅姟
setAddTearrinLayer(res) {
this.setChangeTearrinLayer();
- var url = this.getLayrUrl(res)
+ var url = this.getLayrUrl(res);
window.terrainLayer = new Cesium.CesiumTerrainProvider({
- url: url
+ url: url,
+ tilingScheme: new Cesium.GeographicTilingScheme({
+ ellipsoid: Cesium.Ellipsoid.MOON,
+ }),
});
- Viewer.terrainProvider = window.terrainLayer
- this.layerList.push({ id: res.id, type: "dem", });
+ Viewer.terrainProvider = window.terrainLayer;
+ Viewer.scene.globe.terrainExaggeration = 1.0000001;
+ this.layerList.push({ id: res.id, type: "dem" });
},
//鍔犺浇WMS鏈嶅姟
setAddWmsLayer(res) {
- var url = this.getLayrUrl(res)
- var img_layer = sgworld.Creator.createImageryProvider('giserver', "wms", {
- url: url,
- layers: '',
- parameters: {
- format: "image/png",
- transparent: true,
- }
- }, "0", undefined, true, "");
+
+ var url = this.getLayrUrl(res);
+
+ var img_layer = sgworld.Creator.createImageryProvider(
+ "giserver",
+ "wms",
+ {
+ url: url,
+ layers: "",
+ parameters: {
+ format: "image/png",
+ transparent: true,
+ },
+ },
+ "0",
+ undefined,
+ true,
+ ""
+ );
this.layerList.push({
id: res.id,
layerData: img_layer,
type: "wmts",
});
-
},
//鍔犺浇妯″瀷鏈嶅姟
setAddModelLayer(res) {
@@ -298,11 +368,11 @@
dynamicScreenSpaceErrorFactor: 2, // 鍔ㄦ�佸睆骞曠┖闂磋宸殑绯绘暟
dynamicScreenSpaceError: true, // 鍑忓皯绂荤浉鏈鸿緝杩滅殑灞忓箷绌洪棿閿欒锛歠alse锛屽叏灞忓姞杞藉畬涔嬪悗鎵嶆竻鏅板寲鎴垮眿
})
-
);
tileset.readyPromise.then((tileset) => {
tileset.id = res.id;
});
+ this.layerList.push({ id: res.id, layerData: tileset, type: "tileset" });
},
//鍦板舰绉婚櫎浜嬩欢
setChangeTearrinLayer() {
@@ -315,16 +385,19 @@
this.layerList.splice(i, 1);
break;
}
- })
+ });
},
//娓呴櫎鍥惧眰
delLayer(code) {
+
this.layerList.forEach((e, i) => {
if (e.id === code) {
switch (e.type) {
case "wmts":
- debugger
+ window.Viewer.imageryLayers.remove(e.layerData);
+ break;
+ case "wms":
window.Viewer.imageryLayers.remove(e.layerData);
break;
case "tms":
@@ -335,19 +408,67 @@
{}
);
break;
- case "":
+ case "tileset":
+ window.Viewer.scene.primitives.remove(e.layerData);
break;
}
this.layerList.splice(i, 1);
}
});
},
+
+ delLayerAll() {
+ this.layerList.forEach((e, i) => {
+ this.setRemoveLayer(e);
+ this.layerList.splice(i, 1);
+ });
+ },
+ setRemoveLayer(e) {
+ switch (e.type) {
+ case "wmts":
+ window.Viewer.imageryLayers.remove(e.layerData);
+ break;
+ case "tms":
+ window.Viewer.imageryLayers.remove(e.layerData);
+ break;
+ case "dem":
+ window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
+ {}
+ );
+ break;
+ case "tileset":
+ window.Viewer.scene.primitives.remove(e.layerData);
+ break;
+
+ }
+ },
//鍔犺浇GeoServer-WMS鏈嶅姟
- setAddGeoWmsLayer(res) {
- var url = this.getLayrUrl(res);
+ setAddGeoWmsLayer(res, alpha) {
+ //
+ var url = res.url;
+ var that = this;
+ this.delLayer(res.id)
+ var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat(
+ "html",
+ null,
+ function (html) {
+ that.getFeatureInfo(html);
+ }
+ );
+ if (url.indexOf('{token}') > -1) {
+ const token = getToken();
+ url = config.proxy + url.replaceAll("{token}", token);
+ } else {
+ url = url;
+ }
+
let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
url: url,
layers: res.tab,
+ id: res.id,
+ getFeatureInfoParameters: { info_format: "text/html", srs: "EPSG:104903" },
+ enablePickFeatures: true,
+ getFeatureInfoFormats: [getFeatureInfoFormat],
parameters: {
transparent: true,
format: "image/png",
@@ -357,9 +478,129 @@
tileWidth: 512,
tileHeight: 512,
});
- layer.name = `Wms_Layer${res.id}`;
+
let img_layer = window.Viewer.imageryLayers.addImageryProvider(layer);
+ img_layer.name = `Wms_Layer${res.id}`;
+ img_layer.id = res.id
+ img_layer.alpha = alpha ? alpha : 1;
this.layerList.push({ id: res.id, layerData: img_layer, type: "wmts" });
},
+ addGeoServerMmsLayers(layer, url) {
+ this.geoLayer = layer;
+ this.geoUrl = url;
+ var that = this;
+ var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat(
+ "html",
+ null,
+ function (html) {
+ that.getFeatureInfo(html);
+ }
+ );
+ if (url.indexOf('{token}') > -1) {
+ const token = getToken();
+ url = config.proxy + url.replaceAll("{token}", token);
+ } else {
+ url = url;
+ }
+
+ if (!this.wmsLayerId) {
+ this.wmsLayerId = new Date();
+ }
+ let wmslayer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
+ url: url,
+ id: this.wmsLayerId,
+ layers: layer.toString(),
+ getFeatureInfoParameters: { info_format: "text/html", srs: "EPSG:104903" },
+ enablePickFeatures: true,
+ getFeatureInfoFormats: [getFeatureInfoFormat],
+ parameters: {
+ transparent: true,
+ format: "image/png",
+ srs: "EPSG:104903",
+ styles: "",
+ },
+ tileWidth: 512,
+ tileHeight: 512,
+ });
+
+ let img_layer = window.Viewer.imageryLayers.addImageryProvider(wmslayer);
+ img_layer.id = this.wmsLayerId;
+ this.layerList.push({ id: this.wmsLayerId, layerData: img_layer, type: "wmts" });
+ },
+ getGeoLayerChangeAlpha(res) {
+ var std = [];
+ for (var i in this.geoLayer) {
+ if (this.geoLayer[i] != res.tab) {
+ std.push(this.geoLayer[i])
+ }
+ }
+ this.geoLayer = [];
+ this.geoLayer = std;
+ var imageLayers = window.Viewer.imageryLayers._layers;
+ for (var i in imageLayers) {
+ if (imageLayers[i].id == this.wmsLayerId) {
+
+ window.Viewer.imageryLayers.remove(imageLayers[i])
+ }
+ }
+ for (var i in this.layerList) {
+ if (this.layerList[i].id == this.wmsLayerId) {
+ this.layerList.splice(i, 1)
+ }
+ }
+ if (this.geoLayer.length > 0) {
+ this.addGeoServerMmsLayers(this.geoLayer, this.geoUrl)
+ }
+ this.setAddGeoWmsLayer(res);
+ for (var i in this.layerList) {
+ if (this.layerList[i].id == res.id) {
+ return {
+ id: i,
+ layer: this.layerList[i]
+ };
+ break;
+ }
+ }
+ },
+ getFeatureInfo(html) {
+ var start =
+ html.indexOf('<caption class="featureInfo">') +
+ '<caption class="featureInfo">'.length;
+ var end = html.indexOf("</caption>");
+ var tab = html.substr(start, end - start);
+ var std = html
+ .substr(
+ html.indexOf("<th>"),
+ html.lastIndexOf("</th>") - html.indexOf("<th>") + 5
+ )
+ .replaceAll(" ", "")
+ .replaceAll("\n", "")
+ .split("</th>");
+ var gindex = null;
+ for (var i = 0; i < std.length; i++) {
+ if (std[i].indexOf("gid") > -1) {
+ gindex = i;
+ break;
+ }
+ }
+
+ if (!gindex) return;
+ var str = html
+ .substr(
+ html.indexOf("<td>"),
+ html.lastIndexOf("</td>") - html.indexOf("<td>") + 5
+ )
+ .replaceAll(" ", "")
+ .replaceAll("\n", "")
+ .split("</td>");
+ var gid = parseInt(str[gindex].replaceAll("<td>", ""));
+ if (gid && tab) {
+ store.state.details = {
+ gid: gid,
+ tab: tab,
+ showDetails: true,
+ };
+ }
+ },
};
export default server;
--
Gitblit v1.9.3