撒點

let markerDataSource = null
markerDataSource = new Cesium.CustomDataSource('markerDataSource') 
viewer.dataSources.add(markerDataSource) // 添加數(shù)據(jù)集

markerDataSource.entities.add(
          new Cesium.Entity({
            id: id,
            billboard: ...
            label: labelGraphics,
            position: position
          })
   )  // 添加實體

點擊識取實體

viewer.screenSpaceEventHandler.setInputAction(
      (movement) => {
        const entity = viewer.scene.pick(movement.position)
        if (Cesium.defined(entity)) {
          console.log(entity)
        }
      },
        Cesium.ScreenSpaceEventType.LEFT_CLICK
   )

氣泡框

    /** 添加自定義的html
     * @function addInfoWindow
     */
    addInfoWindow({ position, offset, render, callBack }) {
      if (!offset) offset = { x: 30, y: 30 }
      if (!render) throw new Error('請?zhí)砑覴ender')
      if (!position) throw new Error('請?zhí)砑幼鴺?)
      const div = document.createElement('div')
      const containerEle = document.getElementById(viewer.container.id)
      const wrapperEle = document.createElement('div')
      const vueCom = new Vue({
        data: {},
        methods: {},
        render(h) {
          const destory = () => {
            containerEle.removeChild(wrapperEle)
            this.$destroy()
          }
          return render(h, {
            destory,
            fatherEle: containerEle,
            currentEle: wrapperEle
          })
        }
      }).$mount(div)

      wrapperEle.appendChild(vueCom.$el)
      containerEle.appendChild(wrapperEle)
      viewer.scene.postRender.addEventListener(() => {
        var px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          viewer.scene,
          position
        )
        if (!px) return
        wrapperEle.style.left =
          px.x - offset.x - Math.ceil(wrapperEle.offsetWidth / 2) + 'px'
        wrapperEle.style.top =
          px.y - offset.y - Math.ceil(wrapperEle.offsetHeight) + 'px'
        wrapperEle.style.position = 'absolute'
      })
    }

使用示例

viewer.screenSpaceEventHandler.setInputAction(
      (movement) => {
         const entity = viewer.scene.pick(movement.position)
        if (Cesium.defined(entity)) {
          this.$refs['cesium'].addInfoWindow({
         position,
         offset: { x: 0, y: 36 },
         render(h, { destory, currentEle }) {
           return (
             <div
              style={{
                background: '#fff',
                borderRadius: '4px',
                padding: '4px 8px',
                color: '#333'
              }}>
               {find.name}
            </div>
          )
         }
       })
        }
      },
      Cesium.ScreenSpaceEventType.LEFT_CLICK
   )