fix: 1

package.json

@@ -8,8 +8,9 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "ant-design-vue": "1.7.2",
     "axios": "^0.19.1",
-    "cesium": "^1.60.0",
+    "cesium": "1.64.0",
     "core-js": "^2.6.5",
     "hammerjs": "^2.0.8",
     "react-router": "^5.1.2",

src/App.vue

@@ -73,17 +73,19 @@
                 </div>
             </div>
         </div>
-
+        <HotList v-if="loaded" />
     </div>
 </template>
 <script>
 import axios from 'axios'
 import { start } from "./core/viewer";
 import { getLongLatT as getLongLat } from './core/measure.js'
+import HotList from './components/hot/list.vue'
 
 export default {
     data() {
         return {
+            loaded: false,
             layers: null,
             measure: false,
             getll: false,
@@ -141,6 +143,7 @@ export default {
         this.closeMin = this.closeMax = {}
         start();
         this.$bus.$on('measureComplete', () => this.measure = false)
+        this.loaded = true
     },
     methods: {
         change(item) {
@@ -203,6 +206,9 @@ export default {
                 }])
             })
         }
+    },
+    components: {
+        HotList
     }
 };
 </script>
@@ -232,7 +238,7 @@ img {
 }
 .function span {
     display: inline-block;
-    height: 22px;
+    height: 28px;
     line-height: 22px;
     padding: 3px 10px;
     background: #2c363b;
@@ -257,7 +263,7 @@ img {
     border: solid 1px #b9baba;
     border-radius: 6px;
     width: 200px;
-    height: 22px;
+    height: 28px;
     line-height: 22px;
     font-size: 14px;
     color: #fff;

src/components/hot/data.json

@@ -0,0 +1,43 @@
+[
+  {
+    "href": "https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png",
+    "point": [
+      113.070677,
+      22.5621420
+    ],
+    "link": "https://uat-laser.4dkankan.com/uat/index.html?m=t-CwfhfqJ&key=city#/",
+    "title": "大佛场景"
+  },
+  {
+    "text": "市政府",
+    "point": [
+      113.086677,
+      22.591142,
+      50
+    ]
+  },
+  {
+    "href": "https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png",
+    "point": [
+      113.076779,
+      22.592248,
+      50
+    ],
+    "title": "图片数据",
+    "meta": {
+      "type": "image",
+      "url": "http://192.168.0.21/index.php?m=file&f=read&t=png&fileID=60776"
+    }
+  },
+  {
+    "href": "https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png",
+    "point": [
+      113.076677,
+      22.592142,
+      50
+    ],
+    "link": "https://uat-laser.4dkankan.com/uat/index.html?m=t-CwfhfqJ&key=city#/",
+    "title": "大佛场景",
+    "size": 68
+  }
+]

src/components/hot/hot.vue

@@ -0,0 +1,45 @@
+<template>
+    <a-modal 
+      :width="data.link ? 980 : 720"
+      :title="data.title"
+      :visible="true"
+      @ok="cancel"
+      okText='确定'
+      cancelText='取消'
+      @cancel="cancel">
+      <iframe :src="data.link" :title="data.title" v-if="data.link" class='iframe' />
+      <template v-else>
+        <template v-if="data.meta">
+          <p>多媒体</p>
+          <img :src="data.meta.url" alt="" style="width: 100%">
+        </template>
+        <template v-if="data.content">
+          <p>热点内容</p>
+          <div>{{data.content}}</div>
+        </template>
+      </template>
+      
+    </a-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Object
+  },
+  methods: {
+    cancel() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.iframe {
+  width: 100%;
+  height: 600px;
+  border: none;
+}
+</style>

src/components/hot/list.vue

@@ -0,0 +1,35 @@
+<template>
+  <Hot v-if="showHot" :data="showHot" @close="showHot = null" />
+</template>
+
+<script>
+import staticHots from './data.json'
+import { addMakers, removeMakers } from '../../core/maker'
+import Hot from './hot.vue'
+
+export default {
+  data() {
+    return {
+      showHot: null
+    }
+  },
+  methods: {
+    hotClick(hot) {
+      this.showHot = hot
+    }
+  },
+  async mounted() {
+    this.markers = await addMakers(staticHots.map(item => ({
+      ...item,
+      onClick: () => this.hotClick(item)
+    })))
+  },
+  destroyed() {
+    removeMakers(this.markers)
+  },
+  components: {
+    Hot
+  }
+}
+
+</script>

src/core/listen.js

@@ -7,21 +7,37 @@ import * as load from './load'
 bus.$on('addMaker', async () => {
   let pois = await addMakers([
     {
-      text: '市政府',
-      point: [113.070677, 22.5621420]
+      // text: '市政府',
+      href: 'https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png',
+      point: [113.070677, 22.5621420],
+      onClick() {
+        console.log('???1')
+      }
     },
     {
-      text: '市政府',
-      point: [113.086677, 22.591142, 50]
+      href: 'https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png',
+      // text: '市政府',
+      point: [113.086677, 22.591142, 50],
+      onClick() {
+        console.log('???3')
+      }
     },
     {
-      text: '五邑大学',
-      point: [113.076779, 22.592248, 50]
+      href: 'https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png',
+      // text: '五邑大学',
+      point: [113.076779, 22.592248, 50],
+      onClick() {
+        console.log('???4')
+      }
     },
     {
-      text: '市政府',
+      href: 'https://laser-oss.4dkankan.com/icon/lQLPDhrvVzvNvTswMLAOU-UNqYnnZQG1YPJUwLwA_48_48.png',
+      // text: '市政府',
       point: [113.076677, 22.592142, 50],
-      size: 68
+      size: 68,
+      onClick() {
+        console.log('???5')
+      }
     }
   ])
 })

src/core/maker.js

@@ -6,18 +6,34 @@ import {
   VerticalOrigin,
   when
 } from 'cesium/Cesium'
+import * as Cesium from 'cesium/Cesium'
 
 const pinBuilder = new PinBuilder()
 
-
-export const addMaker = async({ href, color = Color.ROYALBLUE, size = 48, point, icon, text, name }) => {
+let markerId = 0
+export const addMaker = async({ href, color = Color.ROYALBLUE, size = 48, point, icon, text, name, onClick }) => {
   const loadPin = p => new Promise(resolve => when(p, canvas => resolve(canvas)))
+  const id = `pick_id` + markerId++
   let image
-  
+  let billboard
+
   if (href) {
-    image = await loadPin(
-      pinBuilder.fromUrl(buildModuleUrl(href), color, size)
-    )
+    const image = new Image()
+    await new Promise((resolve, reject) => {
+      image.src = href
+      image.onload = resolve
+      image.onerror = reject
+    })
+    billboard =  {
+      width: image.width / 2,
+      height: image.height / 2,
+      pixelOffset: new Cesium.Cartesian2(0, -image.height / 4),   //偏移量
+      image: href,
+    }
+    
+    // image = await loadPin(
+    //   pinBuilder.fromUrl(buildModuleUrl(href), color, size)
+    // )
   } else if (icon) {
     image = await loadPin(
       pinBuilder.fromMakiIconId(icon, color, size)
@@ -28,9 +44,21 @@ export const addMaker = async({ href, color = Color.ROYALBLUE, size = 48, point,
     image = pinBuilder.fromColor(color, size)
   }
 
+  if (onClick) {
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((click) => {
+      const pick = viewer.scene.pick(click.position);
+      //选中某模型   pick选中的对象
+      if (pick && pick.id && pick.id.id === id) {
+        onClick()
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+  
   return viewer.entities.add({
+    id,
     position: Cartesian3.fromDegrees(...point),
-    billboard: {
+    billboard: billboard ? billboard : {
       image: image.toDataURL(),
       verticalOrigin: VerticalOrigin.BOTTOM
     }
@@ -59,6 +87,7 @@ export const addMakers = async (args) => {
     isArray = false
   }
 
+  console.error(args)
   let pins = await Promise.all(
     args.map(arg => addMaker(arg))
   )

src/core/viewer.js

@@ -347,5 +347,5 @@ async function main() {
 
 export function start() {
     main()
-    bus.$emit('addMaker')
+    // bus.$emit('addMaker')
 }

src/main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 import bus from './utils/bus'
+import "ant-design-vue/dist/antd.css";
+import Antd from 'ant-design-vue';
 
 Vue.config.productionTip = false
 Vue.config.errorHandler = function (err, vm, info) {
@@ -8,7 +10,9 @@ Vue.config.errorHandler = function (err, vm, info) {
 }
 
 Vue.prototype.$bus = bus
+Vue.use(Antd);
 
 window.$app = new Vue({
     render: h => h(App)
-}).$mount('#app')
+})
+window.$app.$mount('#app')