区县、街道服务

.env.development

@@ -8,8 +8,7 @@ VITE_APP_ENV = 'development'
 VITE_APP_BASE_API = 'http://10.1.161.156:4000'
 
 #map服务地址
-VITE_MAP_BASE_URL = 'http://10.83.241.184:8080/map_widget/#/mapkjk?theme=dark&view=3D&basemap=dark'
-#VITE_MAP_BASE_URL = 'http://10.83.246.99:8080/map_widget_vue/#/mapyingji?view=3D&theme=dark'
+VITE_MAP_BASE_URL = 'http://10.83.246.99:8080/map_widget_vue/#/mapyingji?view=3D&theme=dark'
 
 #物面板服务IP
 VITE_LOCAL_CONTENT_URL = 'https://firstmap.smi.sh.cegn.cn'

.env.production

@@ -13,8 +13,7 @@ VITE_APP_BASE_API = 'http://58.34.215.18:4000/catalog-api'
 VITE_BUILD_COMPRESS = gzip
 
 #map服务地址
-VITE_MAP_BASE_URL = 'http://10.83.241.184:8080/map_widget/#/mapkjk?theme=dark&view=3D&basemap=dark'
-#VITE_MAP_BASE_URL = 'http://10.83.246.99:8080/map_widget_vue/#/mapyingji?view=3D&theme=dark'
+VITE_MAP_BASE_URL = 'http://10.83.246.99:8080/map_widget_vue/#/mapyingji?view=3D&theme=dark'
 
 #物面板服务IP
 VITE_LOCAL_CONTENT_URL = 'https://firstmap.smi.sh.cegn.cn'

src/utils/map/AddLayer.js

@@ -379,6 +379,14 @@ export function calculation() {
   });
 }
 
+export function layerShade(title, where) {
+  invokeParams('LayerShade', {
+    "title": title,
+    "where": where,
+    "effect": "opacity(0.9) blur(5px)"
+  });
+}
+
 export function drawCircle(point, radius, layerId, returnParams = false) {
   invokeParams('AddGraphic', {
     type: 'circle',

src/utils/map/baseMethod.js

@@ -9,13 +9,14 @@ import {
   removeMapLayers,
   setCamera,
   addMyGraphByData_TJ,
-  addPointMap,
+  addPointMap, layerShade,
 } from '@/utils/map/AddLayer.js';
-import { getGroupLayers, getLayerInfo } from '@/utils/mapService/local-data.js';
+import {districtArr, getGroupLayers, getLayerInfo} from '@/utils/mapService/local-data.js';
 import { useRoute } from 'vue-router';
 
 export function initDistrict() {
   ClearMap();
+  clearBaseLayer();
   setCamera({
     "position": {
       "spatialReference": {
@@ -28,18 +29,26 @@ export function initDistrict() {
     "heading": 0.2688540229922883,
     "tilt": 0.49999999999913347
   });
-  let layerInfo = getLayerInfo('quxian');
+  let layerInfo = getLayerInfo('quxian-feature');
   addMapLayer({
     ...layerInfo,
-    visible: true
+    visible: true,
+    params: {
+      elevationInfo: {
+        // mode: "relative-to-ground"
+        mode: 'absolute-height',
+        offset: 3,
+      },
+    },
   })
+  // layerShade("quxian-feature", "NAME = '浦东新区'")
 }
 
 export function changeStreet(val,isGoto = true, isDraw = true) {
   ClearMap();
-  let layerInfoCx = getLayerInfo('quxian');
+  let layerInfoCx = getLayerInfo('quxian-feature');
   LayerQuery({
-    url: layerInfoCx.url + '/0',
+    url: layerInfoCx.url,
     where: `NAME='${val}'`,
     queryId: 'fanwei',
     layerid: 0,
@@ -47,7 +56,37 @@ export function changeStreet(val,isGoto = true, isDraw = true) {
     is_goto: isGoto,
     is_draw: isDraw,
     is_clear: true,
+    symbol: {
+      type: 'simple-fill',
+      // style: 'circle',
+      color: [255, 0, 0, 0],
+      // size: 10,
+      outline: {
+        color: [0, 255, 255],
+        // color: [1, 255, 1],
+        width: 3,
+      },
+    },
   });
+
+  //定位至某个区后
+  if(isGoto){
+    clearBaseLayer();
+    let pac = districtArr.find((item) => item.name === val)?.pac;
+    let layerInfo = getLayerInfo('street-feature');
+    addMapLayer({
+      ...layerInfo,
+      visible: true,
+      where: "区划代码 like '%" + pac + "%'",
+      params: {
+        elevationInfo: {
+          // mode: "relative-to-ground"
+          mode: 'absolute-height',
+          offset: 3,
+        },
+      },
+    });
+  }
 }
 
 export function handleLayer(item, val) {
@@ -86,6 +125,16 @@ export function handleLayer(item, val) {
   }
 }
 
+export function clearBaseLayer() {
+  let baseLayerArr = [
+    'quxian-feature',
+    'street-feature',
+  ];
+  baseLayerArr.forEach((layer) => {
+    removeMapLayers(layer);
+  });
+}
+
 export const handleCaseLayer = (item, geometry, val) => {
   if (item.group) {
     let groupLayers = getGroupLayers(item.group).filter((el) => el.type == 'feature');
@@ -328,34 +377,6 @@ export function addLanel3D(center, text, height = 150) {
   });
 }
 
-export function clearBaseLayer() {
-  let baseLayerArr = [
-    'jdxz-feature',
-    'zhwg-feature',
-    'centerLabel',
-    'jwh-feature',
-    'xiaoqu_temp',
-    'xiaoqu_temp1',
-    'build-feature',
-    'JAWHITE',
-  ];
-  baseLayerArr.forEach((layer) => {
-    removeMapLayers(layer);
-  });
-
-  // emptyAllLayers([]);
-
-  // const serviceLengendStore = useServiceLengend();
-  // if (serviceLengendStore.JACFIsOpen) {
-  //   let layerInfo = getLayerInfo('JACF');
-  //   addMapLayer({
-  //     ...layerInfo,
-  //     visible: true,
-  //     where: '1=1',
-  //   });
-  // }
-}
-
 export const addNumberMyGraph = (point, count, layerID, visible = false) => {
   addMyGraph({
     is_clear: visible,

src/utils/mapService/local-data.js

@@ -7,10 +7,85 @@ export const serviceArr = [
     name: '区县',
     visible: false,
     opacity: 1,
-    title: 'quxian',
-    id: 'quxian',
-    url: import.meta.env.VITE_LOCAL_CONTENT_URL + '/OneMapServer/rest/services/z02_district_boundary/MapServer',
-    type: 'dynamic',
+    title: 'quxian-feature',
+    id: 'quxian-feature',
+    url: import.meta.env.VITE_LOCAL_CONTENT_URL + '/OneMapServer/rest/services/z02_district_boundary/MapServer/0',
+    type: 'feature',
+    renderer: {
+      type: 'simple',
+      symbol: {
+        type: 'simple-fill',
+        color: [25, 255, 236, 0.1],
+        outline: {
+          color: [255, 191, 0, 0.5],
+          width: 5,
+        },
+      },
+    },
+    labelingInfo: {
+      labelPlacement: 'above-center',
+      labelExpressionInfo: {
+        value: '{NAME}',
+      },
+      symbol: {
+        type: 'label-3d',
+        symbolLayers: [
+          {
+            type: 'text',
+            material: {
+              color: 'white',
+            },
+            size: 32,
+            halo: {
+              color: [0, 0, 0, 0.7],
+              size: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: '街道',
+    visible: false,
+    opacity: 1,
+    title: 'street-feature',
+    id: 'street-feature',
+    url: import.meta.env.VITE_LOCAL_CONTENT_URL + '/OneMapServer/rest/services/z03_town_boundary/MapServer/0',
+    type: 'feature',
+    renderer: {
+      type: 'simple',
+      symbol: {
+        type: 'simple-fill',
+        color: [25, 255, 236, 0.1],
+        outline: {
+          color: [255, 191, 0, 0.5],
+          width: 5,
+        },
+      },
+    },
+    labelingInfo: {
+      labelPlacement: 'above-center',
+      labelExpressionInfo: {
+        value: '{NAME}',
+      },
+      symbol: {
+        type: 'label-3d',
+        symbolLayers: [
+          {
+            type: 'text',
+            material: {
+              color: 'white',
+            },
+            size: 32,
+            halo: {
+              color: [0, 0, 0, 0.7],
+              size: 2,
+            },
+          },
+        ],
+      },
+    },
   }
 ];
 
@@ -23,45 +98,22 @@ export function getGroupLayers(groupId) {
   return serviceArr.filter((item) => item.group === groupId);
 }
 
-export function initMap(bol) {
-  let bm = getLayerInfo('JAWHITE');
-  let cx = getLayerInfo('cx');
+export const districtArr = [
+  { id: 1, name: '浦东新区', pac: 310115 },
+  { id: 2, name: '长宁区', pac: 310105 },
+  { id: 3, name: '静安区', pac: 310106 },
+  { id: 4, name: '普陀区', pac: 310107 },
+  { id: 5, name: '杨浦区', pac: 310110 },
+  { id: 6, name: '虹口区', pac: 310109 },
+  { id: 7, name: '嘉定区', pac: 310114 },
+  { id: 8, name: '青浦区', pac: 310118 },
+  { id: 9, name: '宝山区', pac: 310113 },
+  { id: 10, name: '闵行区', pac: 310112 },
+  { id: 11, name: '徐汇区', pac: 310104 },
+  { id: 12, name: '黄浦区', pac: 310101 },
+  { id: 13, name: '松江区', pac: 310117 },
+  { id: 14, name: '奉献区', pac: 310120 },
+  { id: 15, name: '金山区', pac: 310116 },
+  { id: 16, name: '崇明区', pac: 310151 }
+]
 
-  addMapLayer({
-    ...bm,
-    visible: bol,
-  });
-  addMapLayer({
-    ...cx,
-    url: cx.url + '/3',
-    type: 'feature',
-    visible: bol,
-    renderer: {
-      type: 'simple',
-      symbol: {
-        type: 'simple-fill',
-        color: [25, 255, 236, 0.1],
-        outline: {
-          color: [255, 255, 255, 1],
-          width: 1,
-        },
-      },
-    },
-    // sublayers: [
-    //   {
-    //     id: 3,
-    //     renderer: {
-    //       type: "simple",
-    //       symbol: {
-    //         type: "simple-fill",
-    //         color: [255, 255, 0, 0.1],
-    //         outline: {
-    //           color: [255, 255, 255, 1],
-    //           width: 1,
-    //         },
-    //       }
-    //     }
-    //   }
-    // ]
-  });
-}