地图撒点暂存

package.json

@@ -22,6 +22,7 @@
     "docx": "^6.0.3",
     "echarts": "^5.1.2",
     "esri-loader": "^3.2.0",
+    "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
@@ -31,6 +32,7 @@
     "vuex": "^4.0.0"
   },
   "devDependencies": {
+    "@types/exceljs": "^1.3.0",
     "@types/file-saver": "^2.0.3",
     "@types/md5": "^2.3.1",
     "@types/node": "^16.3.2",

src/ajax/api.ts

 let BASE_URL: string = ''
 let TOKEN: string = ''
+let MAP_CONFIG: { jsApiUrl: string; cssUrl: string } = {
+  jsApiUrl: '',
+  cssUrl: '',
+}
 
 const getCookie = (name: string): string | null => {
   const reg: RegExp = new RegExp(`(^| )${name}=([^;]*)(;|$)`)
@@ -11,14 +15,24 @@ const getCookie = (name: string): string | null => {
 switch (process.env.NODE_ENV) {
   case 'production':
     BASE_URL = 'https://www.maicedata.com/collector/data/' // 生产环境
+    // TODO 获取token
     TOKEN = LZString.decompressFromEncodedURIComponent(
       getCookie('__DM_TOKEN__') || window.localStorage.getItem('dm_token_'),
     )
+    // TODO 生产环境地图链接？？
+    MAP_CONFIG = {
+      jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
+      cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
+    }
     break
   default:
     // vite.config 代理 https://survey.maicedata.com/api/data/
     BASE_URL = '/api'
     TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
+    MAP_CONFIG = {
+      jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
+      cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
+    }
 }
 
 export default {
@@ -39,4 +53,5 @@ export default {
   GET_USER_ID: 'https://www.maicedata.com/auth/user/bytoken',
   USER: '3625616b-7f2c-449a-8306-101aac7b8b97',
   ORG: 'b47ddc9a-0aa7-45a8-b1b6-6064f888d537',
+  MENU: 'd64f4037-1a0c-4900-a8a1-80a7115e0995',
 }

src/hooks/useFetch.ts

@@ -134,3 +134,11 @@ export async function useFetchOrgAuth(params: QueryProps) {
   })
   return res && res.data && res.data.result
 }
+
+export async function useFetchMenus(params: QueryProps = {}) {
+  const res = await ajax.get({
+    url: api.MENU,
+    params,
+  })
+  return res && res.data && res.data.result
+}

src/hooks/useInitMap.ts

-import { onBeforeUnmount, onMounted } from 'vue'
+import { onUnmounted } from 'vue'
 import * as esriloader from 'esri-loader'
 import useJsApi from '@/hooks/useJsApi'
-import senceViewPopup from '@/util/senceViewPopup'
+import sceneViewPopup from '@/util/sceneViewPopup'
 
 export default async function useInitMap(el: HTMLElement, camera: any) {
   const config = {
@@ -73,11 +73,10 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
      * 在请求发出去之前，把请求中的机器名改成ip
      * */
     before: function (params: any) {
-      const newUrl = params.url.replace(
+      params.url = params.url.replace(
         'http://changsanjiao.shsmi.com',
         'http://10.108.3.48',
       )
-      params.url = newUrl
     },
   })
 
@@ -99,23 +98,21 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
   sceneView.popup.autoOpenEnabled = false
   window.sceneView = sceneView
 
-  const layerList = new LayerList({
-    view: window.sceneView,
-  })
-
-  const layerListExpand = new Expand({
-    expandTooltip: '图层控制',
-    view: window.sceneView,
-    content: layerList,
-  })
-
-  window.sceneView.ui.add([layerListExpand], 'top-right')
-  window.sceneView.ui.remove([
-    'zoom',
-    'navigation-toggle',
-    'attribution',
-    'compass',
-  ])
+  // const layerList = new LayerList({
+  //   view: window.sceneView,
+  // })
+  // const layerListExpand = new Expand({
+  //   expandTooltip: '图层控制',
+  //   view: window.sceneView,
+  //   content: layerList,
+  // })
+  // window.sceneView.ui.add([layerListExpand], 'top-right')
+  // window.sceneView.ui.remove([
+  //   'zoom',
+  //   'navigation-toggle',
+  //   'attribution',
+  //   'compass',
+  // ])
 
   const baseLayer = new TileLayer(
     'http://10.108.3.48/changsanjiao/rest/services/Hosted/Base_Map/MapServer',
@@ -161,111 +158,23 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
   map.add(sceneLayer0)
   window.sceneLayer0 = sceneLayer0
 
-  const sceneLayer3 = new SceneLayer({
-    url: 'http://10.108.3.48/changsanjiao/rest/services/Hosted/HM_ROAD0730/SceneServer',
-    visible: true,
-    title: '全息道路路面',
-    elevationInfo: {
-      mode: 'absolute-height',
-      offset: 3,
-    },
-  })
-
-  const sceneLayer4 = new SceneLayer({
-    url: 'http://10.108.3.48/changsanjiao/rest/services/Hosted/HM_BUJIAN0730/SceneServer',
-    visible: true,
-    title: '全息道路部件',
-    elevationInfo: {
-      mode: 'absolute-height',
-      offset: 3,
-    },
-    minScale: 2500,
-  })
-
-  const sceneLayer7 = new SceneLayer({
-    url: 'http://10.108.3.48/changsanjiao/rest/services/Hosted/HM_WHITEMODEL_OUTSIDE0320/SceneServer',
-    visible: true,
-    title: '周边白模',
-    popupEnabled: false,
-  })
-
   graphiclayer = new GraphicsLayer()
   map.add(graphiclayer)
 
-  const modelGroupLayer = new GroupLayer({
-    title: '其他模型',
-    visible: true,
-    visibilityMode: 'independent',
-    layers: [sceneLayer3, sceneLayer4, sceneLayer7],
-    opacity: 1,
-  })
-  setInterval(function () {
-    map.layers.add(modelGroupLayer)
-  }, 15000)
-
   watchUtils.whenFalse(sceneView.popup, 'visible', () => {
     if (window.modelHighlight) {
       window.modelHighlight.remove()
     }
-  })
-  window.sceneView.on('click', function (event: any) {
-    window.sceneView.popup.close()
-    sceneView.hitTest(event).then(async function (response: any) {
-      if (response.results.length > 0) {
-        const layername = response.results[0].graphic.layer.id
-        let objectId: any = null
-        objectId = response.results[0].graphic.attributes.OBJECTID
-        console.log(layername)
-        switch (layername) {
-          //可根据图层名称对应不同操作
-          case 'jingmo':
-            window.sceneView
-              .whenLayerView(sceneLayer0)
-              .then(function (layerView: any) {
-                const query = sceneLayer0.createQuery()
-                query.outFields = ['*']
-                query.objectIds = [objectId]
-                layerView
-                  .queryFeatures(query)
-                  .then(function (result: any) {
-                    if (result.features.length > 0) {
-                      const buildingName = result.features[0].attributes.NAME
-                      //根据buildingName查询接口，获取信息
-                      //组装html中的内容
-
-                      const html =
-                        '<div>根据接口获取信息，构造弹出内容' + '</div>'
-                      const title = '获取到的楼名'
-
-                      const contentParam = {
-                        dockpoint: response.ground.mapPoint,
-                        title: title,
-                        content: {
-                          type: 'html',
-                          html: html,
-                        },
-                      }
-
-                      togglePopupTemplate(false)
-                      setPopupContent(contentParam)
-
-                      if (window.modelHighlight) {
-                        window.modelHighlight.remove()
-                      }
-                      window.modelHighlight = layerView.highlight(objectId)
-                    }
-                  })
-                  .catch(console.error)
-              })
-            break
-          default:
-        }
-      }
-    })
+    if (window.poiHighlight) {
+      window.poiHighlight.remove()
+    }
   })
   window.map = map
+  window.graphiclayer = graphiclayer
 
-  onBeforeUnmount(() => {
+  addEventListener()
+
+  onUnmounted(() => {
     map = null
     window.map = null
     sceneView = null
@@ -279,6 +188,78 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
   return [map, sceneView, graphiclayer]
 }
 
+function addEventListener() {
+  window.sceneView.on('click', function (event) {
+    window.sceneView.popup.close()
+    window.sceneView.hitTest(event).then(async function (response) {
+      console.log('~~', response)
+      if (response.results.length > 0) {
+        const { layer } = response.results[0].graphic
+        const layername = response.results[0].graphic.layer.id
+        const objectId = response.results[0].graphic.attributes.OBJECTID
+        console.log(layername)
+
+        window.sceneView.whenLayerView(layer).then(function (layerView) {
+          const query = layer.createQuery()
+          query.outFields = ['*']
+          query.objectIds = [objectId]
+          layerView
+            .queryFeatures(query)
+            .then(function (result) {
+              if (result.features.length > 0) {
+                let html = ''
+                let title = ''
+
+                switch (layername) {
+                  //可根据图层名称对应不同操作,构造对应的信息面板内容
+                  case 'jingmo':
+                    const buildingName = result.features[0].attributes.NAME
+                    //根据buildingName查询接口，获取信息
+                    //组装html中的内容
+
+                    html = '<div>根据接口获取信息，构造弹出内容' + '</div>'
+                    title = '获取到的楼名'
+
+                    break
+                  case '党组织撒点图层':
+                    console.log('click-data: ', result)
+                    const poiName = result.features[0].attributes['党组织名称']
+                    //根据poiName查询接口，获取信息
+                    //组装html中的内容
+
+                    html =
+                      '<div class="pop-container">根据接口获取信息，构造弹出内容' +
+                      '</div>'
+                    title = '获取到的poi名称'
+                    break
+                  default:
+                    break
+                }
+
+                const contentParam = {
+                  dockpoint: response.ground.mapPoint,
+                  title: title,
+                  content: {
+                    type: 'html',
+                    html: html,
+                  },
+                }
+
+                togglePopupTemplate(false)
+                setPopupContent(contentParam)
+
+                if (window.modelHighlight) {
+                  window.modelHighlight.remove()
+                }
+                window.modelHighlight = layerView.highlight(objectId)
+              }
+            })
+            .catch(console.error)
+        })
+      }
+    })
+  })
+}
 function togglePopupTemplate(trueOrFalse: boolean) {
   if (trueOrFalse === true) {
     window.sceneView.popup.autoOpenEnabled = true
@@ -294,6 +275,6 @@ async function setPopupContent(Parameters: any) {
     title: Parameters.title,
     collapseEnabled: false,
     dockEnabled: false,
-    content: senceViewPopup.createCustompopup(Parameters.content),
+    content: sceneViewPopup.createCustompopup(Parameters.content),
   })
 }

src/shims-vue.d.ts

@@ -31,4 +31,5 @@ declare interface Window {
   sceneLayer0: any
   modelHighlight: any
   pointLayers: any
+  poiHighlight: any
 }
\ No newline at end of file

src/store/actions.ts

@@ -5,6 +5,7 @@ import {
   useFetchAuth,
   useFetchUser,
   useFetchOrgAuth,
+  useFetchMenus,
 } from '@/hooks/useFetch'
 import dayjs from '@/util/dayjs'
 import state from './state'
@@ -15,6 +16,7 @@ interface Method {
 }
 
 export default {
+  /** 获取权限编码 */
   async getAuth({ commit }: Method) {
     if (process.env.NODE_ENV !== 'production') {
       // 开发环境
@@ -54,6 +56,8 @@ export default {
 
     commit('SET_AUTH', { userid, orgid, code })
   },
+
+  /** 根据地理标签获取基本情况数据 */
   async getBasicInfo({ commit }: Method, query?: string) {
     commit('SET_BASIC_INFO', {
       sum: await getSum(query),
@@ -63,6 +67,21 @@ export default {
     })
     commit('SET_FILTER_PATH', query)
   },
+
+  async getMenus({ commit }: Method) {
+    const res = (await useFetchMenus())?.map((item: any) => item.extra)
+    const result = res
+      .filter((item: any) => item['父编码'] == '0')
+      .map((item: any) => ({
+        key: item['编码'],
+        name: item['名称'],
+        children: [],
+      }))
+    // TODO 生成菜单
+    // result.forEach((item:any) => {
+    //   const cur = res.find((e:any) => e['父编码'] == item.key && e['顺序'] == '1')
+    // })
+  },
 }
 
 async function getSum(query?: string) {

src/store/mutations.ts

@@ -39,4 +39,13 @@ export default {
   SET_FILTER_PATH(state: GlobalStateProps, val: string) {
     state.filterPath = val
   },
+  SET_MAP_POINTS(
+    state: GlobalStateProps,
+    data: { labelKey?: string; result: any[] },
+  ) {
+    state.mapPoints = {
+      labelKey: data.labelKey || '_labelKey',
+      result: data.result || [],
+    }
+  },
 }

src/store/state.ts

@@ -57,4 +57,8 @@ export default {
     },
   },
   filterPath: '', // 地理筛选路径
+  mapPoints: {
+    labelKey: '党组织名称',
+    result: [{}],
+  },
 }

src/util/clientLayersOperate.ts

 import useJsApi from '@/hooks/useJsApi'
 
 export default {
-  async displayJSONData(layerName: string, Parameters: any) {
+  async displayJSONData(
+    layerName: string,
+    Parameters: { result: any[] },
+    labelKey: string = '_labelKey',
+  ) {
     if (!Parameters.result || Parameters.result.length === 0) return
     const [
       LabelClass,
@@ -77,13 +81,13 @@ export default {
 
     const statesLabelClass = new LabelClass({
       labelExpressionInfo: {
-        expression: '$feature[\'党组织名称\']',
+        expression: `$feature['${labelKey}']`,
       },
       symbol: {
         type: 'text',
         color: '#fff',
         font: {
-          size: 14,
+          size: 12,
           // weight: "bold"
         },
         haloSize: 2,

src/view/components/basic-info.vue

@@ -104,7 +104,7 @@
 
 <script lang="ts" setup>
 import { ChartTypes } from '@/components/MyComponent'
-import { ref, PropType, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { CaretForward } from '@vicons/ionicons5'
 import { useFetchOrg } from '@/hooks/useFetch'
 import store from '@/store'
@@ -186,7 +186,7 @@ const tagList = [
 const clickTag = async (key: string) => {
   if (key === curTagKey.value) {
     curTagKey.value = null
-    // TODO 删除地图撒点
+    store.commit('SET_MAP_POINTS')
     return
   }
   curTagKey.value = key
@@ -194,7 +194,10 @@ const clickTag = async (key: string) => {
     q: `paths @ "类别" && string == "${key}"`,
   })
   console.log(`类别-${key}-撒点：`, res)
-  // TODO 地图撒点
+  store.commit('SET_MAP_POINTS', {
+    labelKey: '党组织名称',
+    result: res.map((item: any) => item.extra),
+  })
 }
 </script>
 

src/view/components/building-drawer.vue

@@ -173,9 +173,9 @@ const setBuilding = (building: any, causedByNext?: boolean) => {
     }
     curBuilding.value = building
   }
+  // TODO 地图切换楼宇画面
   emit('building', curBuilding.value?.OBJECTID || null)
   store.dispatch('getBasicInfo', query)
-  // TODO 地图切换楼宇画面
 }
 const floors = ref<any[]>([])
 

src/view/components/filter-drawer.vue

@@ -195,6 +195,7 @@ const close = () => {
   reset()
   emit('close')
   // TODO 清除撒点
+  store.commit('SET_MAP_POINTS')
 }
 
 const curTab = ref('tag')
@@ -325,36 +326,40 @@ const handleExport = async (type: string, key: string, name: string) => {
 }
 
 watch(
-  () => organization.value,
-  async (data) => {
-    const keys = data.filter((e) => e.checked).map((e) => e.key)
+  [() => organization.value, () => member.value],
+  async ([organization, member]) => {
     const pointData: any[] = []
-    const result = await Promise.all(
-      keys.map((key) => getDetail('organization', key)),
+    const orgKeys = organization.filter((e) => e.checked).map((e) => e.key)
+    const memKeys = member.filter((e) => e.checked).map((e) => e.key)
+    const orgData = await Promise.all(
+      orgKeys.map((key) => getDetail('organization', key)),
     )
-    result.forEach((item: any[]) => {
-      if (!item || item.length === 0) return
-      pointData.push(...item.map((e) => e.extra))
-    })
-    console.log('organization撒点数据：', pointData)
-    // TODO 撒点
-  },
-  { deep: true },
-)
-watch(
-  () => member.value,
-  async (data) => {
-    const keys = data.filter((e) => e.checked).map((e) => e.key)
-    const pointData: any[] = []
-    const result = await Promise.all(
-      keys.map((key) => getDetail('member', key)),
+    const memData = await Promise.all(
+      memKeys.map((key) => getDetail('member', key)),
     )
-    result.forEach((item: any[]) => {
+    const total = [...orgData, ...memData]
+    total.forEach((item: any[]) => {
       if (!item || item.length === 0) return
-      pointData.push(...item.map((e) => e.extra))
+      pointData.push(
+        ...item.map(({ extra }) => ({
+          上海2000纬度:
+            extra['上海2000纬度'] ||
+            extra['居住地上海2000纬度'] ||
+            extra['党组织上海2000纬度'],
+          上海2000经度:
+            extra['上海2000经度'] ||
+            extra['居住地上海2000经度'] ||
+            extra['党组织上海2000经度'],
+          _labelKey: extra['党组织名称'] || extra['姓名'],
+
+          ...extra,
+        })),
+      )
+    })
+    console.log('标签筛选撒点数据：', pointData)
+    store.commit('SET_MAP_POINTS', {
+      result: pointData,
     })
-    console.log('member撒点数据：', pointData)
-    // TODO 撒点
   },
   { deep: true },
 )

src/view/components/map.vue

@@ -7,6 +7,7 @@ import { onMounted, ref, nextTick } from 'vue'
 import useInitMap from '@/hooks/useInitMap'
 import useJsApi from '@/hooks/useJsApi'
 import clientLayersOperate from '@/util/clientLayersOperate'
+import sceneViewPopup from '@/util/sceneViewPopup'
 import axios from 'axios'
 
 const mapRef = ref<HTMLElement | undefined>()
@@ -18,21 +19,18 @@ const camera = {
 }
 const array1 = ['CB6W6201', 'CB6V650D', 'CB6X660C']
 const array2 = ['CB6U640H02', 'CB6U640H01', 'CB6T630C']
-let map: any = null
-let sceneView: any = null
-let graphiclayer: any = null
 
 onMounted(async () => {
   await nextTick()
   if (mapRef.value) {
     // eslint-disable-next-line
-    ;[map, sceneView, graphiclayer] = await useInitMap(mapRef.value, camera)
+    await useInitMap(mapRef.value, camera)
   }
 })
 
 /** 重置地图 */
 function resetMap() {
-  graphiclayer.removeAll()
+  window.graphiclayer.removeAll()
   window.sceneView.popup.close()
   if (window.modelHighlight) {
     window.modelHighlight.remove()
@@ -157,12 +155,12 @@ async function queryBound(layerId: number, name: string) {
         width: 2,
       },
     }
-    graphiclayer.removeAll()
-    graphiclayer.add(results.features[0])
+    window.graphiclayer.removeAll()
+    window.graphiclayer.add(results.features[0])
     // const cam = that.sceneView.camera.clone();
     // cam.tilt =55;
     // that.sceneView.camera = cam
-    sceneView.goTo(results.features[0])
+    window.sceneView.goTo(results.features[0])
   })
 }
 
@@ -208,8 +206,11 @@ function showBuilding(name: string) {
     })
 }
 
-function addPoints(name: string, data: any[]) {
-  clientLayersOperate.displayJSONData(name, data)
+async function addPoints(
+  name: string,
+  data: { labelKey: string; result: any[] },
+) {
+  await clientLayersOperate.displayJSONData(name, data, data.labelKey)
 }
 
 function clearPoints(name?: string) {
@@ -220,6 +221,25 @@ function clearPoints(name?: string) {
   })
 }
 
+function setPopupContent(Parameters) {
+  window.sceneView.popup.open({
+    actions: [],
+    location: Parameters.dockpoint,
+    title: Parameters.title,
+    collapseEnabled: false,
+    dockEnabled: false,
+    content: sceneViewPopup.createCustompopup(Parameters.content),
+  })
+}
+
+function togglePopupTemplate(trueOrFalse) {
+  if (trueOrFalse === true) {
+    window.sceneView.popup.autoOpenEnabled = true
+  } else {
+    window.sceneView.popup.autoOpenEnabled = false
+  }
+}
+
 defineExpose({
   resetMap,
   switchBM,

src/view/components/nav-bar.vue

@@ -211,9 +211,21 @@ watch(
   },
 )
 
-const handleSelect = (data: any) => {
-  // TODO 地图撒点
-  console.log('current search-data: ', data)
+const handleSelect = ({ extra }: any) => {
+  const point = [
+    {
+      上海2000纬度:
+        extra['上海2000纬度'] ||
+        extra['居住地上海2000纬度'] ||
+        extra['党组织上海2000纬度'],
+      上海2000经度:
+        extra['上海2000经度'] ||
+        extra['居住地上海2000经度'] ||
+        extra['党组织上海2000经度'],
+      ...extra,
+    },
+  ]
+  store.commit('SET_MAP_POINTS', { labelKey: '党组织名称', result: point })
   showResult.value = false
 }
 

src/view/main.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import Map from './components/map.vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
@@ -54,6 +54,21 @@ const setBoundary = ({ type, name }: { type: string; name: string }) => {
       break
   }
 }
+watch(
+  () => store.state.mapPoints,
+  (points: any) => {
+    map.value.clearPoints()
+    console.log('开始撒点：')
+    if (!points || points.result?.length === 0) return
+    const data = {
+      labelKey: points.labelKey,
+      result: points.result?.map((point) => JSON.parse(JSON.stringify(point))),
+      // result: points.result?.map((point) => Object.assign({}, point)),
+    }
+    console.log(data)
+    map.value.addPoints('党组织撒点图层', data)
+  },
+)
 </script>
 
 <style lang="stylus">