From ecf3ad202a851caa39660ddfaa16e1bf16565b2e Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期一, 30 十月 2023 13:51:38 +0800 Subject: [PATCH] 图层管理修改 --- src/assets/js/Map/server.js | 683 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 556 insertions(+), 127 deletions(-) diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js index d792466..93827dd 100644 --- a/src/assets/js/Map/server.js +++ b/src/assets/js/Map/server.js @@ -1,135 +1,223 @@ import { getToken } from "@/utils/auth"; +//閰嶇疆鏂囦欢鍦板潃 +// import config from "../../../../public/config/config"; +import store from "@/store"; +import { nextTick } from "vue"; const server = { - addTreeData(treeNode, checked) { - console.log(treeNode, checked); - let _data = earthCtrl.ProjectTree.getObject(treeNode.id); - let pID = 0; - console.log(_data); - if (_data) { - earthCtrl.ProjectTree.setVisibility(treeNode.id, treeNode.checked); - return; - } else { - // _data = _getTreeData(treeNode.id); - // if (_data) { - // _data.item && - // _data.item.setVisibility && - // _data.item.setVisibility(treeNode.checked); - // _data.item && - // _data.item.setVisible && - // _data.item.setVisible(treeNode.checked); - // _data.item && - // _data.item.show !== undefined && - // (_data.item.show = treeNode.checked); - // if (_data.datatype === "particle") { - // _data.item.forEach((item) => { - // item.show = treeNode.checked; - // }); - // } - // return; - // } - } - // comment on table lf.sys_res is '璧勬簮琛�'; - // comment on column lf.sys_res.id is '涓婚敭ID'; - // comment on column lf.sys_res.pid is '鐖禝D锛�0-鏍硅妭鐐�'; - // comment on column lf.sys_res.cn_name is '涓枃鍚嶇О'; - // comment on column lf.sys_res.en_name is '鑻辨枃鍚嶇О'; - // comment on column lf.sys_res.type is '绫诲瀷锛�1-鍥惧眰缁�,2-鏅�氬浘灞�,3-浠g悊鍥惧眰'; - // comment on column lf.sys_res.status is '鐘舵�侊細-1-搴熷純锛�0-鍋滅敤锛�1-鍚敤'; - // comment on column lf.sys_res.category is '绫诲瀷锛�0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset'; - // comment on column lf.sys_res.firm is '鍘傚晢锛�0-鍏朵粬锛�1-GisServer锛�2-GeoServer锛�3-鏁扮畝'; - // comment on column lf.sys_res.url is '鏈嶅姟鍦板潃'; - // comment on column lf.sys_res.test is '娴嬭瘯鍦板潃'; - // comment on column lf.sys_res.proxy is '浠g悊鍦板潃'; - // comment on column lf.sys_res.descr is '鎻忚堪'; - // comment on column lf.sys_res.depid is '鍗曚綅缂栫爜'; - // comment on column lf.sys_res.dirid is '椤圭洰缂栫爜'; - // comment on column lf.sys_res.img is '缂╃暐鍥�'; - // comment on column lf.sys_res.level is '灞傜骇锛�0-鏍硅妭鐐�'; - // comment on column lf.sys_res.sort is '鎺掑簭'; - // comment on column lf.sys_res.create_user is '鍒涘缓浜篒D'; - // comment on column lf.sys_res.create_time is '鍒涘缓鏃堕棿'; - // comment on column lf.sys_res.update_user is '鏇存柊浜篒D'; - // comment on column lf.sys_res.update_time is '鏇存柊鏃堕棿'; - // comment on column lf.sys_res.bak is '澶囨敞'; - // 浠g悊锛�/proxy/{token}/4 - // 鍦板潃锛歨ttp://192.168.20.83:8088/MoonServer + proxy.replace("{token}", token) - // order_num -> sort - // serve_type -> category + layerList: [], + graticules: null, + alpha: null,//閫忔槑搴� + geoLayer: [], + geoUrl: null, + wmsLayerId: null, + addTreeData(treeNode) { + // if (!treeNode.checked) { +// debugger + // this.delLayer(treeNode.id); + // return; + // } - switch (treeNode.type) { - case 1: - treeNode.useUrl = treeNode.url; - break; - case 2: - treeNode.useUrl = treeNode.url; - break; - case 3: - var token = getToken(); - treeNode.useUrl = BASE_URL + treeNode.proxy.replace("{token}", token); - break; - } - if (treeNode.firm == 2) { - this.addGeoServer(treeNode); + this.alpha = this.getResLayersAlpha(treeNode); + //鍒ゆ柇鏄惁涓轰唬鐞� + if (treeNode.proxy) { + this.addProxyAddress(treeNode); //鏈変唬鐞� } else { - this.addGisServer(treeNode); + this.addUrlAddress(treeNode); //鏃犱唬鐞� } - }, - addGisServer(treeNode) { - console.log(treeNode); - // 0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset'; - switch (treeNode.category) { - case 1: - this.AddTmsLayer(treeNode.useUrl); - break; - case 2: - this.AddWmtesLayer(treeNode.useUrl); - break; - case 3: - break; - case 4: - break; - } - }, - addGeoServer(treeNode) { - // 0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset'; - switch (treeNode.category) { - case 1: - break; - case 2: - this.AddGeoWmsLayer(treeNode.useUrl); - break; - case 3: - break; - case 4: - break; - } - }, - //娣诲姞geoserver鏈嶅姟wms鏈嶅姟 - AddGeoWmsLayer(url) { - window.layerWMS = new SmartEarth.Cesium.WebMapServiceImageryProvider({ - // url: "http://192.168.22.198:8090/geoserver/moon/wms", - url: url, - layers: "moon:lunar_place_nane", - parameters: { - transparent: true, - format: "image/png", - srs: "EPSG:4490", - styles: "", - }, - tileWidth: 512, - tileHeight: 512, - }); - layerWMS.name = "Wms_Layer"; - Viewer[s].imageryLayers.addImageryProvider(window.layerWMS); + if (this.graticules) { + window.Viewer.imageryLayers.raiseToTop(this.graticules.imageryLayer); + } }, - //娣诲姞GisServer鏈嶅姟TMS鍒囩墖鏈嶅姟 - AddTmsLayer(url) { - // var urlTemplateImageryProvider = new SmartEarth.Cesium.UrlTemplateImageryProvider({ - // url: url + "/{z}/{x}/{y}.png" - // }); - // Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider); - earthCtrl.Creator.createUrlTemplateImageryProvider( + 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; + } + }, + //浠g悊鍦板潃 + addProxyAddress(res) { + //鍒ゆ柇鏁版嵁绫诲瀷 + switch (res.data) { + case 1: //鏁板瓧姝e皠褰卞儚鍥� + this.setDataType(res); + break; + case 2: //鍦烘櫙鍦板舰鏁版嵁 + this.setTerrainData(res); + break; + case 3: //鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛� + this.setDataType(res); + break; + case 4: //鍗曟尝娈垫爡鏍兼暟鎹� + this.setDataType(res); + break; + case 5: //澶氬厜璋辨爡鏍兼暟鎹� + this.setDataType(res); + break; + case 6: //楂樺厜璋辨爡鏍兼暟鎹� + this.setDataType(res); + break; + case 7: //鐭㈤噺鍥惧眰 + this.setVectorData(res); + break; + case 8: //涓夌淮妯″瀷 + this.setModelData(res); + break; + } + }, + //鏅�氬湴鍧� + addUrlAddress(res) { + switch (res.category) { + case 0: //鍏朵粬 + break; + case 1: //GisServer + this.addProxyAddress(res); + break; + case 2: //GeoServer + this.addGeoServerAddress(res); + break; + case 3: //鏁扮畝 + this.addProxyAddress(res); + break; + } + }, + //Geoserver鏈嶅姟 + addGeoServerAddress(res) { + //鍒ゆ柇鏁版嵁绫诲瀷 + switch (res.data) { + case 1: //鏁板瓧姝e皠褰卞儚鍥� + this.setGeoDataType(res); + break; + case 2: //鍦烘櫙鍦板舰鏁版嵁 + this.setTerrainData(res); + break; + case 3: //鏁板瓧楂樼▼妯″瀷锛堟檿娓插浘锛� + this.setGeoDataType(res); + break; + case 4: //鍗曟尝娈垫爡鏍兼暟鎹� + this.setGeoDataType(res); + break; + case 5: //澶氬厜璋辨爡鏍兼暟鎹� + this.setGeoDataType(res); + break; + case 6: //楂樺厜璋辨爡鏍兼暟鎹� + this.setGeoDataType(res); + break; + case 7: //鐭㈤噺鍥惧眰 + this.setGeoVectorData(res); + break; + case 8: //涓夌淮妯″瀷 + this.setModelData(res); + break; + } + }, + setGeoDataType(res) { + switch (res.type) { + case 0: //URL + break; + case 1: //TMS + this.setAddTmsLayer(res); + break; + case 2: //WMTS + this.setAddWmtsLayer(res); + break; + case 3: //WMS + this.setAddGeoWmsLayer(res); + break; + } + }, + setGeoVectorData(res) { + switch (res.type) { + case 0: //URL + break; + case 3: //WMS + this.setAddGeoWmsLayer(res); + break; + case 4: //WFS + break; + } + }, + setDataType(res) { + switch (res.type) { + case 0: //URL + break; + case 1: //TMS + this.setAddTmsLayer(res); + break; + case 2: //WMTS + this.setAddWmtsLayer(res); + break; + case 3: //WMS + // this.setAddWmsLayer(res); + this.setAddGeoWmsLayer(res) + break; + } + }, + + setTerrainData(res) { + switch (res.type) { + case 0: //URL + this.setAddTearrinLayer(res); + break; + case 1: //TMS + this.setAddTearrinLayer(res); + break; + } + }, + setVectorData(res) { + switch (res.type) { + case 0: //URL + break; + case 3: //WMS + // this.setAddWmsLayer(res); + this.setAddGeoWmsLayer(res) + break; + case 4: //WFS + break; + } + }, + setModelData(res) { + switch (res.type) { + case 0: //Tileset + this.setAddModelLayer(res); + break; + case 3: //WMS + this.setAddModelLayer(res); + break; + case 5: //WFS + break; + } + }, + //鑾峰彇鏈嶅姟鍦板潃 + getLayrUrl(res) { + var url; + if (res.proxy) { + const token = getToken(); + url = config.proxy + res.proxy.replaceAll("{token}", token); + } else { + url = res.url; + } + return url; + }, + //鍔犺浇TMS鏈嶅姟 + setAddTmsLayer(res) { + var url = this.getLayrUrl(res); + let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider( "tms鏈嶅姟", { url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"), @@ -139,12 +227,17 @@ true, "" ); + this.layerList.push({ id: res.id, layerData: img_layer, type: "tms" }); }, - AddWmtesLayer(url) { - var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({ + //鍔犺浇WMTS鏈嶅姟 + setAddWmtsLayer(res) { + 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: [ @@ -172,7 +265,343 @@ 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: 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); + window.terrainLayer = new Cesium.CesiumTerrainProvider({ + url: url, + tilingScheme: new Cesium.GeographicTilingScheme({ + ellipsoid: Cesium.Ellipsoid.MOON, + }), + }); + 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, + "" + ); + this.layerList.push({ + id: res.id, + layerData: img_layer, + type: "wmts", + }); + }, + //鍔犺浇妯″瀷鏈嶅姟 + setAddModelLayer(res) { + var url = this.getLayrUrl(res); + let tileset = Viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + name: res.cnName, + url: url, + skipLevelOfDetail: true, // 鍦ㄩ亶鍘嗘椂鍊欒烦杩囪鎯咃細false + baseScreenSpaceError: 1024, + maximumScreenSpaceError: 64, // 鏈�澶у睆骞曠┖闂撮敊璇細16锛屾暟鍊煎姞澶ц兘璁╂渶缁堟垚鍍忓彉妯$硦 + skipScreenSpaceErrorFactor: 16, + skipLevels: 1, + immediatelyLoadDesiredLevelOfDetail: false, + loadSiblings: true, // 鑷姩浠庝腑蹇冨紑濮嬭秴娓呭寲妯″瀷锛歠alse + cullWithChildrenBounds: true, // 浣跨敤瀛愰」杈圭晫浣撶Н鐨勫苟闆嗘潵鍓旈櫎鍥惧潡锛歵rue + cullRequestsWhileMoving: true, + cullRequestsWhileMovingMultiplier: 10, // 鍊艰秺灏忚兘澶熸洿蹇殑鍓旈櫎锛�60 + preloadWhenHidden: true, + preferLeaves: true, // 棰勮瀛愯妭鐐癸細false + maximumMemoryUsage: 768, // 鍐呭瓨鍒嗛厤鍙樺皬鏈夊埄浜庡唴瀛樺洖鏀讹紝鎻愬崌鎬ц兘浣撻獙 + progressiveResolutionHeightFraction: 0.5, // 鏁板�煎亸浜�0鑳藉璁╁垵濮嬪姞杞藉彉寰楁ā绯� + dynamicScreenSpaceErrorDensity: 0.5, // 鏁板�煎姞澶э紝鑳借鍛ㄨ竟鍔犺浇鍙樺揩 + dynamicScreenSpaceErrorFactor: 2, // 鍔ㄦ�佸睆骞曠┖闂磋宸殑绯绘暟 + dynamicScreenSpaceError: true, // 鍑忓皯绂荤浉鏈鸿緝杩滅殑灞忓箷绌洪棿閿欒锛歠alse锛屽叏灞忓姞杞藉畬涔嬪悗鎵嶆竻鏅板寲鎴垮眿 + }) + ); + tileset.readyPromise.then((tileset) => { + tileset.id = res.id; + }); + this.layerList.push({ id: res.id, layerData: tileset, type: "tileset" }); + }, + //鍦板舰绉婚櫎浜嬩欢 + setChangeTearrinLayer() { + this.layerList.forEach((e, i) => { + switch (e.type) { + case "dem": + window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider( + {} + ); + this.layerList.splice(i, 1); + break; + } + }); + }, + + //娓呴櫎鍥惧眰 + delLayer(code) { + + this.layerList.forEach((e, i) => { + if (e.id === code) { + switch (e.type) { + case "wmts": + window.Viewer.imageryLayers.remove(e.layerData); + break; + case "wms": + 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; + } + 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, 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" }, + 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(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" }, + 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