初始化地图

package-lock.json

@@ -17,6 +17,7 @@
         "dayjs": "^1.10.6",
         "docx": "^6.0.3",
         "echarts": "^5.1.2",
+        "esri-loader": "^3.2.0",
         "file-saver": "^2.0.5",
         "md5": "^2.3.0",
         "normalize.css": "^8.0.1",
@@ -3013,6 +3014,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/esri-loader": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/esri-loader/-/esri-loader-3.2.0.tgz",
+      "integrity": "sha512-9UANUR5603YvKkjOxo+LLGtmiZBXvdJOb7MEGpKAmgsKEStleQW28xqyQolvQVXGgPJu2XLMzrPf6Xu8n1QOAQ=="
+    },
     "node_modules/estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
@@ -9075,6 +9081,11 @@
         }
       }
     },
+    "esri-loader": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/esri-loader/-/esri-loader-3.2.0.tgz",
+      "integrity": "sha512-9UANUR5603YvKkjOxo+LLGtmiZBXvdJOb7MEGpKAmgsKEStleQW28xqyQolvQVXGgPJu2XLMzrPf6Xu8n1QOAQ=="
+    },
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "dayjs": "^1.10.6",
     "docx": "^6.0.3",
     "echarts": "^5.1.2",
+    "esri-loader": "^3.2.0",
     "file-saver": "^2.0.5",
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",

src/App.vue

@@ -126,7 +126,7 @@ const themeOverrides: GlobalThemeOverrides = {
   src url(./assets/font/PingFangMedium.ttf)
 
 html, body
-  background #000
+  background gray
   font-family PingFang, DIN, Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
@@ -143,7 +143,6 @@ html, body
   height 100%
   overflow hidden
   font-size .1rem
-  background url('/src/assets/images/background.jpg') center/cover no-repeat
   color #000
 
 /* 设置滚动条的样式 */

src/ajax/api.ts

@@ -13,10 +13,9 @@ const getCookie = (name: string): string | null => {
 switch (process.env.NODE_ENV) {
   case 'production':
     BASE_URL = 'https://survey.maicedata.com/api/data/'
-    // TOKEN = LZString.decompressFromEncodedURIComponent(
-    //   getCookie('__DM_TOKEN__') || localStorage.get('dm_token_'),
-    // )
-    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
+    TOKEN = LZString.decompressFromEncodedURIComponent(
+      getCookie('__DM_TOKEN__') || localStorage.get('dm_token_'),
+    )
     break
   default:
     BASE_URL = '/api'

src/hooks/useAliOss.ts

@@ -2,11 +2,9 @@ import OSS from 'ali-oss'
 import { useFetchAuth } from '@/hooks/useFetch'
 import md5 from 'md5'
 import { api } from '@/ajax'
-import store from '@/store'
-
-const { auth } = store.state
 
 export default async function useAliOss(file: any) {
+  const auth = (await useFetchAuth())?.token
   console.log('auth', auth)
   const client = new OSS({
     region: auth.region,
@@ -24,7 +22,7 @@ export default async function useAliOss(file: any) {
       console.log('e', e)
       const buffer = new OSS.Buffer(e.target && e.target.result)
       console.log('buffer', buffer)
-      const key = `${api.BASE_URL}/huamu_${md5(buffer)}_${filename}`
+      const key = `collector/${api.ACTIVITY}/huamu_${md5(buffer)}_${filename}`
       console.log('key', key)
       const res = await client.put(key, buffer)
       console.log('res', res)

src/hooks/useInitMap.ts

+import { onBeforeUnmount, onMounted } from 'vue'
+import * as esriloader from 'esri-loader'
+import useJsApi from '@/hooks/useJsApi'
+import senceViewPopup from '@/util/senceViewPopup'
+
+export default async function useInitMap(el: HTMLElement, camera: any) {
+  console.log('use---', el, camera)
+  const 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',
+  }
+  let map: any = null
+  let sceneView: any = null
+  let graphiclayer: any = null
+
+  esriloader.loadScript({ url: config.jsApiUrl })
+
+  esriloader.loadCss(config.cssUrl) //添加样式
+
+  const [
+    esriConfig,
+    Map,
+    Basemap,
+    SceneView,
+    MapView,
+    SpatialReference,
+    IdentityManager,
+    Camera,
+    LayerList,
+    Expand,
+    Fullscreen,
+    Legend,
+    GroupLayer,
+    TileLayer,
+    SceneLayer,
+    FeatureLayer,
+    GraphicsLayer,
+    DirectLineMeasurement3D,
+    AreaMeasurement3D,
+    Graphic,
+    watchUtils,
+    urlUtils,
+  ] = await useJsApi([
+    'esri/config',
+    'esri/Map',
+    'esri/Basemap',
+    'esri/views/SceneView',
+    'esri/views/MapView',
+    'esri/geometry/SpatialReference',
+    'esri/identity/IdentityManager',
+    'esri/Camera',
+    'esri/widgets/LayerList',
+    'esri/widgets/Expand',
+    'esri/widgets/Fullscreen',
+    'esri/widgets/Legend',
+    'esri/layers/GroupLayer',
+    'esri/layers/TileLayer',
+    'esri/layers/SceneLayer',
+    'esri/layers/FeatureLayer',
+    'esri/layers/GraphicsLayer',
+    'esri/widgets/DirectLineMeasurement3D',
+    'esri/widgets/AreaMeasurement3D',
+    'esri/Graphic',
+    'esri/core/watchUtils',
+    'esri/core/urlUtils',
+  ])
+
+  console.log('~~~', esriConfig)
+
+  esriConfig.request.useIdentity = false
+
+  esriConfig.request.interceptors.push({
+    urls: 'https://changsanjiao.shsmi.com/',
+
+    /*
+     * 在请求发出去之前，把请求中的机器名改成ip
+     * */
+    before: function (params: any) {
+      const newUrl = params.url.replace(
+        'http://changsanjiao.shsmi.com',
+        'http://10.108.3.48',
+      )
+      params.url = newUrl
+    },
+  })
+
+  map = new Map({
+    ground: {
+      // surfaceColor: "#021425",
+    },
+  })
+
+  sceneView = new SceneView({
+    container: el,
+    viewingMode: 'local',
+    map,
+    camera: camera,
+    popup: {
+      defaultPopupTemplateEnabled: true,
+    },
+  })
+  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 baseLayer = new TileLayer(
+    'http://10.108.3.48/changsanjiao/rest/services/Hosted/Base_Map/MapServer',
+    {
+      id: 'zhengwuBasemap',
+      visible: true,
+      opacity: 1,
+      title: '政务底图',
+    },
+  )
+
+  const sjgyLayer = new TileLayer(
+    'http://10.108.3.48/changsanjiao/rest/services/sjgy_3857/MapServer',
+    {
+      id: 'sjgy',
+      visible: true,
+      opacity: 1,
+      title: '世纪公园',
+    },
+  )
+
+  const baseMapGroupLayer = new GroupLayer({
+    title: '基础底图',
+    visible: true,
+    visibilityMode: 'independent',
+    layers: [baseLayer, sjgyLayer],
+    // layers: [baseLayer],
+    opacity: 1,
+  })
+  map.layers.add(baseMapGroupLayer)
+
+  const sceneLayer0 = new SceneLayer({
+    url: 'http://10.108.3.48/changsanjiao/rest/services/Hosted/HM_BUILDING0826/SceneServer',
+    visible: true,
+    title: '精模',
+    id: 'jingmo',
+    outFields: ['*'],
+    elevationInfo: {
+      mode: 'absolute-height',
+      offset: 3,
+    },
+  })
+  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:
+        }
+      }
+    })
+  })
+  window.map = map
+
+  onBeforeUnmount(() => {
+    map = null
+    window.map = null
+    sceneView = null
+    window.sceneView = null
+    graphiclayer = null
+    window.graphiclayer = null
+    window.sceneLayer0 = null
+    window.modelHighlight = null
+  })
+
+  return [map, sceneView, graphiclayer]
+}
+
+function togglePopupTemplate(trueOrFalse: boolean) {
+  if (trueOrFalse === true) {
+    window.sceneView.popup.autoOpenEnabled = true
+  } else {
+    window.sceneView.popup.autoOpenEnabled = false
+  }
+}
+// 设置 弹窗内容
+async function setPopupContent(Parameters: any) {
+  window.sceneView.popup.open({
+    actions: [],
+    location: Parameters.dockpoint,
+    title: Parameters.title,
+    collapseEnabled: false,
+    dockEnabled: false,
+    content: senceViewPopup.createCustompopup(Parameters.content),
+  })
+}

src/hooks/useJsApi.ts

+import * as esriloader from 'esri-loader'
+
+export default function useJsApi(modules: string[]) {
+  const opt: esriloader.ILoadScriptOptions & { dojoConfig?: unknown } = {}
+
+  window.dojoConfig && (opt.dojoConfig = window.dojoConfig)
+
+  window.apiRoot && (opt.url = window.apiRoot)
+
+  !esriloader.utils.Promise && (esriloader.utils.Promise = window.Promise)
+
+  return esriloader.loadModules(modules, opt)
+}

src/shims-vue.d.ts

@@ -19,3 +19,14 @@ declare module '*.svg'
 declare const LZString: {
   decompressFromEncodedURIComponent: any
 }
+
+
+declare interface Window {
+  _global_datamap_emit: any
+  dojoConfig: any
+  apiRoot: any
+  map: any
+  sceneView: any
+  sceneLayer0: any
+  modelHighlight: any
+}
\ No newline at end of file

src/util/senceViewPopup.ts

+export default {
+  createContentpopup1(fields: any, data: any) {
+    let htmlstring = ''
+    htmlstring += '<table>'
+    for (const key in fields) {
+      htmlstring += '<tr>'
+      htmlstring += '<td class="tdlabel">'
+      htmlstring += '<span>'
+      htmlstring += fields[key]
+      htmlstring += ' :'
+      htmlstring += '</span>'
+      htmlstring += '</td>'
+      htmlstring += '<td class="tdvalue">'
+      htmlstring += '<span>'
+      htmlstring += data[key] != null ? data[key] : ''
+      htmlstring += '</span>'
+      htmlstring += '</td>'
+      htmlstring += '</tr>'
+    }
+    htmlstring += '</table>'
+    return htmlstring
+  },
+
+  createContentpopup(data: any) {
+    let htmlstring = ''
+    htmlstring += '<table>'
+    for (const key in data) {
+      htmlstring += '<tr>'
+      htmlstring += '<td class="tdlabel">'
+      htmlstring += '<span>'
+      htmlstring += key
+      htmlstring += ' :'
+      htmlstring += '</span>'
+      htmlstring += '</td>'
+      htmlstring += '<td class="tdvalue">'
+      htmlstring += '<span>'
+      htmlstring += data[key] != null ? data[key] : ''
+      htmlstring += '</span>'
+      htmlstring += '</td>'
+      htmlstring += '</tr>'
+    }
+    htmlstring += '</table>'
+    return htmlstring
+  },
+
+  createCustompopup(data: any) {
+    if (data.type === 'url') {
+      const iframe = document.createElement('iframe')
+      iframe.classList.add('popupframe')
+      iframe.src = data.url
+      return iframe
+    } else if (data.type === 'html') {
+      const div = document.createElement('div')
+      div.innerHTML = data.html
+      return div
+    }
+  },
+}

src/view/components/activity-list-modal.vue

@@ -202,14 +202,21 @@ const columns = [
     title: '标签类别',
     key: '标签类别',
     render(row: any) {
+      const type = row['标签类别']
+        ? activity?.find((e) => e.name === row['标签类别'])?.type || 'default'
+        : 'default'
       return row['标签类别']
         ? h(
-            () => NTag,
+            NTag,
             {
               size: 'small',
-              type: row['标签类别']
-                ? activity?.find((e) => e.name === row['标签类别'])?.type
-                : 'default',
+              type: type as
+                | 'default'
+                | 'error'
+                | 'primary'
+                | 'info'
+                | 'success'
+                | 'warning',
             },
             { default: () => row['标签类别'] },
           )

src/view/components/map.vue

+<template>
+  <div ref="mapRef" class="map" />
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, nextTick } from 'vue'
+import useInitMap from '@/hooks/useInitMap'
+import useJsApi from '@/hooks/useJsApi'
+
+const mapRef = ref<HTMLElement | undefined>()
+const camera = {
+  heading: 0,
+  tilt: 75,
+  fov: 55,
+  position: [0.065, -0.09, 1800],
+}
+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)
+  }
+})
+
+/** 重置地图 */
+function resetMap() {
+  graphiclayer.removeAll()
+  window.sceneView.popup.close()
+  if (window.modelHighlight) {
+    window.modelHighlight.remove()
+  }
+  window.sceneView.goTo(camera)
+}
+
+/** 切换为白模 */
+function switchBM() {
+  const uniqueValueInfos: any[] = []
+
+  //array1中为楼内1-10人的模型名称
+  array1.forEach((item) => {
+    uniqueValueInfos.push({
+      value: item,
+      symbol: {
+        type: 'mesh-3d',
+        symbolLayers: [
+          {
+            type: 'fill',
+            material: {
+              color: [120, 200, 239, 0.7],
+              colorMixMode: 'replace',
+            },
+            edges: {
+              type: 'solid',
+              color: [0, 0, 0, 0.4],
+              size: 1,
+            },
+          },
+        ],
+      },
+    })
+  })
+
+  //array1中为楼内10人以上的模型名称
+  array2.forEach((item) => {
+    uniqueValueInfos.push({
+      value: item,
+      symbol: {
+        type: 'mesh-3d',
+        symbolLayers: [
+          {
+            type: 'fill',
+            material: {
+              color: [191, 77, 102, 0.7],
+              colorMixMode: 'replace',
+            },
+            edges: {
+              type: 'solid',
+              color: [0, 0, 0, 0.4],
+              size: 1,
+            },
+          },
+        ],
+      },
+    })
+  })
+
+  window.sceneLayer0.renderer = {
+    type: 'unique-value',
+    field: 'NAME',
+    defaultSymbol: {
+      type: 'mesh-3d',
+      symbolLayers: [
+        {
+          type: 'fill',
+          material: {
+            color: [255, 255, 255, 0.7],
+            colorMixMode: 'replace',
+          },
+          edges: {
+            type: 'solid',
+            color: [0, 0, 0, 0.4],
+            size: 1,
+          },
+        },
+      ],
+    },
+    uniqueValueInfos: uniqueValueInfos,
+  }
+}
+
+/** 切换为精模 */
+function switchJM() {
+  window.sceneLayer0.renderer = {
+    type: 'simple',
+    symbol: {
+      type: 'mesh-3d',
+    },
+  }
+}
+
+async function queryBound(layerId: number, name: string) {
+  const [QueryTask, Query, GraphicsLayer] = await useJsApi([
+    'esri/tasks/QueryTask',
+    'esri/tasks/support/Query',
+    'esri/layers/GraphicsLayer',
+  ])
+
+  const jdLayerUrl = `http://10.108.3.48/changsanjiao/rest/services/HM_BOUND_3857/MapServer/${layerId}`
+  const queryTask = new QueryTask({
+    url: jdLayerUrl,
+  })
+  const query = new Query()
+  query.returnGeometry = true
+  query.outFields = ['*']
+  if (layerId === 3) {
+    query.where = '1=1'
+  } else {
+    query.where = `名称='${name}'`
+  }
+
+  queryTask.execute(query).then(function (results: any) {
+    // console.log(results.features);
+    results.features[0].symbol = {
+      type: 'simple-fill',
+      color: [221, 80, 94, 0.2],
+      style: 'solid',
+      outline: {
+        color: '#DD505E',
+        width: 2,
+      },
+    }
+    graphiclayer.removeAll()
+    graphiclayer.add(results.features[0])
+    // const cam = that.sceneView.camera.clone();
+    // cam.tilt =55;
+    // that.sceneView.camera = cam
+    sceneView.goTo(results.features[0])
+  })
+}
+
+function showStreet(name: string = '花木街道') {
+  queryBound(3, name)
+}
+function showArea(name: string) {
+  queryBound(2, name)
+}
+function showCommittee(name: string) {
+  queryBound(1, name)
+}
+function showCommunity(name: string) {
+  queryBound(0, name)
+}
+// function showBuilding(name: string) {
+//   window.sceneView
+//     .whenLayerView(window.sceneLayer0)
+//     .then(function (layerView: any) {
+//       const query = window.sceneLayer0.createQuery()
+//       query.outFields = ['*']
+//       //需要根据buildingName查询objectId
+//       const objectId = 492
+//       query.objectIds = [objectId]
+//       layerView
+//         .queryExtent(query)
+//         .then(function (result: any) {
+//           console.log(result)
+//           window.sceneView.goTo(result.extent.expand(7))
+//           if (window.modelHighlight) {
+//             window.modelHighlight.remove()
+//           }
+
+//           window.modelHighlight = layerView.highlight(objectId)
+//         })
+//         .catch(console.error)
+//     })
+// }
+</script>
+
+<style lang="stylus" scoped>
+.map
+  position fixed
+  top 0
+  left 0
+  width 100vw
+  height 100vh
+</style>

src/view/components/nav-bar.vue

@@ -212,9 +212,8 @@ const handleSelect = (data: any) => {
 
 const toPage = (id?: string) => {
   if (!id) return
-  const parent = window.parent as any
-  parent._global_datamap_emit &&
-    parent._global_datamap_emit.emit('CHANGE_PAGE_BY_ID_EVENT', id)
+  window.parent._global_datamap_emit &&
+    window.parent._global_datamap_emit.emit('CHANGE_PAGE_BY_ID_EVENT', id)
 }
 </script>
 

src/view/components/new-activity-drawer.vue

@@ -159,7 +159,7 @@
                 <n-upload
                   style="width: 100%"
                   accept=".docx,.doc,.xlsx,.xls,.csv,.txt"
-                  :on-before-upload="onChange"
+                  :on-change="onChange"
                 >
                   <n-button> 上传附件 </n-button>
                 </n-upload>

src/view/main.vue

 <template>
+  <Map />
   <NavBar @focus="showTag = false" @blur="showTag = true" />
   <BasicInfo :visible="showTag" />
   <div v-if="showReset" class="reset">
@@ -7,12 +8,13 @@
     </n-icon>
   </div>
   <InforModal class="fix1" />
-  <!-- <ActivityDetail class="fix1" /> -->
   <ListModal class="fix2" pagination />
+  <!-- <ActivityDetail class="fix1" /> -->
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import Map from './components/map.vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
 import InforModal from './components/info-modal.vue'
@@ -23,7 +25,6 @@ import store from '@/store'
 
 const showTag = ref(true)
 const showReset = computed(() => store.state.showBasicInfo)
-store.dispatch('getAuth')
 </script>
 
 <style lang="stylus">