gis-map-universal 1.0.5 → 1.0.6

package/gismap.umd.js

@@ -264311,8 +264311,8 @@ lightUrl:"https://service.sdmap.gov.cn/tileservice/sdpubmap?",geoJSONUrl:"/china
 //   projection:'EPsG:4326'
 // });
 // this.map.addLayer(wmtslayer);
-let baseRoadlayer=new layer_Tile["default"]({layerName:"baseRoadlayer",source:new source_TileWMS({url:'http://192.168.3.121:8090/iserver/services/map-WorkSpace/wms130',params:{LAYERS:"roadSG",FORMAT:"image/png"}}),zIndex:4,projection:"EPSG:3857"});// this.map.addLayer(baseRoadlayer);
-that.normalizedThemeStyle==="light"?that.tiandituLayerUrl=that.lightUrl:that.tiandituLayerUrl=that.darkUrl;this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:this.tiandituLayerUrl,key:"d02c0b2c57b4ba04f74cbccbb138f130",projection:"EPSG:4326"}),zIndex:1});this.map.addLayer(this.tiandituLayer);// // 测试车道线
+let baseRoadlayer=new layer_Tile["default"]({layerName:"baseRoadlayer",source:new source_TileWMS({url:'http://localhost:8090/iserver/services/map-WorkSpace/wms130',params:{LAYERS:"T84",FORMAT:"image/png"}}),zIndex:4,projection:"EPSG:3857"});// this.map.addLayer(baseRoadlayer);
+that.normalizedThemeStyle==="light"?that.tiandituLayerUrl=that.lightUrl:that.tiandituLayerUrl=that.darkUrl;this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:this.tiandituLayerUrl,key:"aaaea01715112ff36a1d2a25f345ba4f",projection:"EPSG:4326"}),zIndex:1});this.map.addLayer(this.tiandituLayer);// // 测试车道线
 // const token = `?token=d6bWDtdlxIc-VPNRQWQF-VaTDzwYZIOK_tWug3ZNffcW1nMltpiEdtsrNLCkc_XoVWbV1LhkGcUv5kOLpXt7kA..`
 // let chedaoBGLayer = new TileLayer({
 //   layerName: "chedaoBGLayer",
@@ -264621,7 +264621,7 @@ initAreaGDPLayer(){let data=[{city:"济南",latlng:[117.218567,36.63746469],leve
 }else if(value===4){return"#FFD700";// 金色
 }else if(value===5){return"#00FFFF";// 青色
 }else{return"#2E2E2E";// 深灰色，用于默认或其他情况
-}}}}}]};if(this.largeTruckLayer){this.largeTruckLayer.setChartOptions(option);}},removeLargeTruckLayer(){if(this.largeTruckLayer){this.largeTruckLayer.remove();this.largeTruckLayer=null;}}},watch:{themeStyle(val){let _this=this;if(val==="dark"){if(_this.tiandituLayer){_this.map.removeLayer(_this.tiandituLayer);_this.map.removeLayer(_this.china_full_Layer);_this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:_this.darkUrl,key:"d02c0b2c57b4ba04f74cbccbb138f130",projection:"EPSG:4326"}),zIndex:1});_this.map.addLayer(_this.tiandituLayer);fetch(_this.geoJSONUrl).then(response=>response.json()).then(data=>{let geoJSONFormat=new ol_format_GeoJSON["default"]();_this.china_full_Layer=new layer_Vector["default"]({layerName:"xxxx",source:new source_Vector["default"]({format:geoJSONFormat,features:geoJSONFormat.readFeatures(data,{dataProjection:"EPSG:4326",featureProjection:"EPSG:4326"})}),zIndex:3,style:function(feature){return new Style["default"]({fill:new Fill["default"]({color:_this.darkFillColor}),stroke:new Stroke["default"]({color:_this.darkStrokeColor,width:1})});}});_this.map.addLayer(_this.china_full_Layer);});}}else if(val==="light"){_this.map.removeLayer(_this.tiandituLayer);_this.map.removeLayer(_this.china_full_Layer);_this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:_this.lightUrl,key:"d02c0b2c57b4ba04f74cbccbb138f130",projection:"EPSG:4326"}),zIndex:1});_this.map.addLayer(_this.tiandituLayer);fetch(_this.geoJSONUrl).then(response=>response.json()).then(data=>{let geoJSONFormat=new ol_format_GeoJSON["default"]();_this.china_full_Layer=new layer_Vector["default"]({layerName:"xxxx",source:new source_Vector["default"]({format:geoJSONFormat,features:geoJSONFormat.readFeatures(data,{dataProjection:"EPSG:4326",featureProjection:"EPSG:4326"})}),zIndex:3,style:function(feature){return new Style["default"]({fill:new Fill["default"]({color:_this.lightFillColor}),stroke:new Stroke["default"]({color:_this.lightStrokeColor,width:1})});}});_this.map.addLayer(_this.china_full_Layer);});}}}});
+}}}}}]};if(this.largeTruckLayer){this.largeTruckLayer.setChartOptions(option);}},removeLargeTruckLayer(){if(this.largeTruckLayer){this.largeTruckLayer.remove();this.largeTruckLayer=null;}}},watch:{themeStyle(val){let _this=this;if(val==="dark"){if(_this.tiandituLayer){_this.map.removeLayer(_this.tiandituLayer);_this.map.removeLayer(_this.china_full_Layer);_this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:_this.darkUrl,key:"d02c0b2c57b4ba04f74cbccbb138f130",projection:"EPSG:4326"}),zIndex:1});_this.map.addLayer(_this.tiandituLayer);fetch(_this.geoJSONUrl).then(response=>response.json()).then(data=>{let geoJSONFormat=new ol_format_GeoJSON["default"]();_this.china_full_Layer=new layer_Vector["default"]({layerName:"xxxx",source:new source_Vector["default"]({format:geoJSONFormat,features:geoJSONFormat.readFeatures(data,{dataProjection:"EPSG:4326",featureProjection:"EPSG:4326"})}),zIndex:3,style:function(feature){return new Style["default"]({fill:new Fill["default"]({color:_this.darkFillColor}),stroke:new Stroke["default"]({color:_this.darkStrokeColor,width:1})});}});_this.map.addLayer(_this.china_full_Layer);});}}else if(val==="light"){_this.map.removeLayer(_this.tiandituLayer);_this.map.removeLayer(_this.china_full_Layer);_this.tiandituLayer=new layer_Tile["default"]({source:new Tianditu_Tianditu({url:_this.lightUrl,key:"aaaea01715112ff36a1d2a25f345ba4f",projection:"EPSG:4326"}),zIndex:1});_this.map.addLayer(_this.tiandituLayer);fetch(_this.geoJSONUrl).then(response=>response.json()).then(data=>{let geoJSONFormat=new ol_format_GeoJSON["default"]();_this.china_full_Layer=new layer_Vector["default"]({layerName:"xxxx",source:new source_Vector["default"]({format:geoJSONFormat,features:geoJSONFormat.readFeatures(data,{dataProjection:"EPSG:4326",featureProjection:"EPSG:4326"})}),zIndex:3,style:function(feature){return new Style["default"]({fill:new Fill["default"]({color:_this.lightFillColor}),stroke:new Stroke["default"]({color:_this.lightStrokeColor,width:1})});}});_this.map.addLayer(_this.china_full_Layer);});}}}});
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
 var es_array_reduce = __webpack_require__("13d5");
 
@@ -264635,7 +264635,7 @@ var scratch = __webpack_require__("c1ec");
 /* harmony default export */ var layerCheck = ({
   data() {
     return {
-      corridorLayers: ["交通网主骨架", "旅游走廊"],
+      corridorLayers: ["交通网主骨架", "旅游走廊", "都市圈"],
       //, "三维效果演示"
       highwayLayers: ["高速路网", "国道路网", "省道路网", "收费站", "服务区", "高速相机", "国省道相机"],
       trafficEventLayers: ["突发事件", "收费站异常", "服务区异常", "养护施工", "异常天气", "AI告警事件",
@@ -264757,6 +264757,7 @@ var scratch = __webpack_require__("c1ec");
         this.removeLayerByName("travelLayer");
         this.removeLayerByName("BIMand3DLayer");
         this.removeLayerByName("travelPointLayer");
+        this.removeLayerByName("dushiquanLayer");
       } else {
         if (value.includes("交通网主骨架")) {
           if (!this.findLayerByName("roadNetworkLayer")) {
@@ -264780,6 +264781,13 @@ var scratch = __webpack_require__("c1ec");
         } else {
           this.removeLayerByName("BIMand3DLayer");
         }
+        if (value.includes("都市圈")) {
+          if (!this.findLayerByName("dushiquanLayer")) {
+            this.initdushiquanLayer();
+          }
+        } else {
+          this.removeLayerByName("dushiquanLayer");
+        }
       }
     },
     highwayChange(value) {
@@ -266759,13 +266767,17 @@ function getWeatherForecast() {
 
 
 
+
+
+
 /* harmony default export */ var initWeatherForecastLayer = ({
   data() {
     return {
       gaosuRoad: "/roadInfo_GS.json",
       guodaoRoad: "/roadInfo_GD.json",
       shengdaoRoad: "/roadInfo_SD.json",
-      tieluLine: "/tieluLine.json"
+      tieluLine: "/tieluLine.json",
+      dushiquan: "/sdArea.json"
     };
   },
   methods: {
@@ -266775,13 +266787,13 @@ function getWeatherForecast() {
       let weatherForecastList = {
         pointList: []
       };
-      let aa = ['晴', '阴', '多云', '小雨', '中雨'];
+      let aa = ["晴", "阴", "多云", "小雨", "中雨"];
       getWeatherForecast().then(res => {
         if (res && res.data) {
           res.data.forEach(item => {
             if (item) {
-              let aa = ['晴', '阴', '多云', '小雨', '中雨'];
-              let dayweather = aa.includes(item.casts[0].dayweather) ? item.casts[0].dayweather : '多云';
+              let aa = ["晴", "阴", "多云", "小雨", "中雨"];
+              let dayweather = aa.includes(item.casts[0].dayweather) ? item.casts[0].dayweather : "多云";
               let obj = {
                 type: "WeatherForecast",
                 longitude: Number(item.cityLng),
@@ -266793,7 +266805,7 @@ function getWeatherForecast() {
                 GGoffsetX: 0,
                 GGoffsetY: 0,
                 textOffsetY: 65,
-                textFontSize: '12px sans-serif',
+                textFontSize: "12px sans-serif",
                 textBGColor: "rgba(255,255,255,0)",
                 otherInfo: {
                   name: item.city + "--" + item.casts[0].dayweather
@@ -267056,7 +267068,7 @@ function getWeatherForecast() {
       };
       this.addPointByArr(rainfallList, "RainfallLayer", isCluster);
     },
-    initGaosuRoadLayer(cityId = null, lineColor = '#16ce72') {
+    initGaosuRoadLayer(cityId = null, lineColor = "#16ce72") {
       // 如果已有图层，先移除
       if (this.GaosuRoadLayer && this.map) {
         this.map.removeLayer(this.GaosuRoadLayer);
@@ -267095,10 +267107,10 @@ function getWeatherForecast() {
         });
         this.map.addLayer(this.GaosuRoadLayer);
       }).catch(error => {
-        console.error('加载高速道路数据失败:', error);
+        console.error("加载高速道路数据失败:", error);
       });
     },
-    initguodaoRoadLayer(cityId = null) {
+    initguodaoRoadLayer(cityId = null, lineColor = "#16ce72") {
       // 如果已有图层，先移除
       if (this.guodaoRoadLayer && this.map) {
         this.map.removeLayer(this.guodaoRoadLayer);
@@ -267113,7 +267125,7 @@ function getWeatherForecast() {
         };
         if (cityId && data.features) {
           filteredData.features = data.features.filter(feature => {
-            return feature.properties && feature.properties.nodeId === cityId;
+            return feature.properties && feature.properties.nodeId == cityId;
           });
         }
         this.guodaoRoadLayer = new layer_Vector["default"]({
@@ -267127,7 +267139,7 @@ function getWeatherForecast() {
           }),
           style: new Style["default"]({
             stroke: new Stroke["default"]({
-              color: '#0da0f5ff',
+              color: lineColor,
               // 蓝色线条
               width: 2 // 线条宽度
             })
@@ -267136,10 +267148,10 @@ function getWeatherForecast() {
         });
         this.map.addLayer(this.guodaoRoadLayer);
       }).catch(error => {
-        console.error('加载国道数据失败:', error);
+        console.error("加载国道数据失败:", error);
       });
     },
-    initshengdaoRoadLayer(cityId = null) {
+    initshengdaoRoadLayer(cityId = null, lineColor = "#16ce72") {
       // 如果已有图层，先移除
       if (this.shengdaoRoadLayer && this.map) {
         this.map.removeLayer(this.shengdaoRoadLayer);
@@ -267154,7 +267166,7 @@ function getWeatherForecast() {
         };
         if (cityId && data.features) {
           filteredData.features = data.features.filter(feature => {
-            return feature.properties && feature.properties.nodeId === cityId;
+            return feature.properties && feature.properties.nodeId == cityId;
           });
         }
         this.shengdaoRoadLayer = new layer_Vector["default"]({
@@ -267168,7 +267180,7 @@ function getWeatherForecast() {
           }),
           style: new Style["default"]({
             stroke: new Stroke["default"]({
-              color: '#0da0f5ff',
+              color: lineColor,
               // 蓝色线条
               width: 1 // 线条宽度
             })
@@ -267177,7 +267189,7 @@ function getWeatherForecast() {
         });
         this.map.addLayer(this.shengdaoRoadLayer);
       }).catch(error => {
-        console.error('加载省道数据失败:', error);
+        console.error("加载省道数据失败:", error);
       });
     },
     initTieluLineLayer() {
@@ -267208,6 +267220,108 @@ function getWeatherForecast() {
         });
         this.map.addLayer(this.TieluLineLayer);
       });
+    },
+    initdushiquanLayer() {
+      // 如果已有图层，先移除
+      if (this.dushiquanLayer && this.map) {
+        this.map.removeLayer(this.dushiquanLayer);
+        this.dushiquanLayer = null;
+      }
+      fetch(this.dushiquan).then(response => response.json()).then(data => {
+        let geoJSONFormat = new ol_format_GeoJSON["default"]();
+
+        // 创建城市区域图层
+        this.dushiquanLayer = new layer_Vector["default"]({
+          layerName: "dushiquanLayer",
+          source: new source_Vector["default"]({
+            format: geoJSONFormat,
+            features: geoJSONFormat.readFeatures(data, {
+              dataProjection: "EPSG:4326",
+              featureProjection: "EPSG:4326"
+            })
+          }),
+          zIndex: 3,
+          style: feature => {
+            const properties = feature.getProperties();
+            const cityName = properties.name;
+            let fillColor = '#fff648ff'; // 默认颜色
+
+            // 定义不同城市组的颜色
+            const group1 = ['德州市', '滨州市', '东营市', '聊城市', '济南市', '淄博市', '泰安市'];
+            const group2 = ['烟台市', '威海市', '潍坊市', '青岛市', '日照市'];
+            const group3 = ['菏泽市', '济宁市', '枣庄市', '临沂市'];
+
+            // 根据城市名称设置颜色
+            if (group1.includes(cityName)) {
+              fillColor = '#049b39';
+            } else if (group2.includes(cityName)) {
+              fillColor = '#065df8';
+            } else if (group3.includes(cityName)) {
+              fillColor = '#07bbfc';
+            }
+            return new Style["default"]({
+              fill: new Fill["default"]({
+                color: fillColor
+              }),
+              stroke: new Stroke["default"]({
+                color: '#6eedfa',
+                width: 1
+              }),
+              text: new ol_style_Text["default"]({
+                text: cityName,
+                fill: new Fill["default"]({
+                  color: '#ffffff'
+                }),
+                font: '14px sans-serif',
+                textAlign: 'center',
+                textBaseline: 'middle'
+              })
+            });
+          }
+        });
+
+        // 添加城市名称标签图层
+        const textFeatures = [];
+        data.features.forEach(feature => {
+          if (feature.properties && feature.properties.center) {
+            const center = feature.properties.center;
+            const name = feature.properties.name;
+
+            // 创建点要素用于显示文本
+            const textFeature = new ol_Feature["a" /* default */]({
+              geometry: new geom_Point["default"](Object(ol_proj["fromLonLat"])(center)),
+              name: name
+            });
+            textFeatures.push(textFeature);
+          }
+        });
+        this.cityNameLayer = new layer_Vector["default"]({
+          layerName: "cityNameLayer",
+          source: new source_Vector["default"]({
+            features: textFeatures
+          }),
+          zIndex: 4,
+          style: new Style["default"]({
+            text: new ol_style_Text["default"]({
+              text: function (feature) {
+                return feature.get('name');
+              },
+              fill: new Fill["default"]({
+                color: '#333'
+              }),
+              font: '12px sans-serif',
+              textAlign: 'center',
+              textBaseline: 'middle'
+            })
+          })
+        });
+
+        // 添加图层到地图
+        this.map.addLayer(this.dushiquanLayer);
+        this.map.addLayer(this.cityNameLayer);
+      }).catch(error => {
+        console.error("加载城市区域数据失败:", error);
+      });
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gis-map-universal",
-  "version": "1.0.5", 
+  "version": "1.0.6", 
   "description": "GIS通用组件",
   "main": "gismap.umd.js",
   "private": false,