热力图分析

该框架支持热力图分析
代码实例

vue
<script setup lang="ts" name="热力图分析">
import { showCode, closeCode } from '@/utils/store'
import { onMounted, onBeforeUnmount } from 'vue'
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})

function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg

  // 默认全球地形
  const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain

  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
  initView()
}
function initView() {
  const status = {
    position: {
      x: -2506632.391948149,
      y: 4872596.18677419,
      z: 3392043.8421496893,
    },
    hpr: {
      heading: 6.232076699249577,
      pitch: -1.570678830521794,
      roll: 0,
    },
  }
  map.Navigation.flyToPos(status, 1)
  console.log(map)
  map.Terrain.depthTest = false
}
// 模拟数据
const test = () => {
  let list: any[] = []
  for (let i = 0; i < 1000; i++) {
    const lng = 117.28 + Math.random() * 0.1 * (Math.random() > 0.5 ? 1 : -1)
    const lat = 31.923 + Math.random() * 0.1 * (Math.random() > 0.5 ? 1 : -1)
    const value = 300 * Math.random()
    list.push({ lnglat: [lng, lat], value })
  }
  return list
}

const datas = test()
let heatmapObj: any
let timer: any

/**
 * 绘制热力图
 * @param type 2-二维热力图，3-三维热力图
 */
const heatmap = (type: Number) => {
  timer && clearInterval(timer)
  timer = undefined
  if (heatmapObj) {
    heatmapObj.type = type
  } else {
    heatmapObj = new map.SpecialAnalysis.HeatMap(map.viewer)
    heatmapObj.initMap(datas, type, { radius: 5, primitiveType: 'LINES' })
    map.Navigation.flyToItem(heatmapObj)
  }
  if (type === 2) {
    timer = setInterval(() => {
      update()
    }, 3000)
  }
}

// 动态更新热力图数据
const update = () => {
  for (let index = 0; index < datas.length; index++) {
    datas[index].value = 300 * Math.random()
  }
  heatmapObj.datas = datas
}

// 注销对象
const destroy = () => {
  heatmapObj && heatmapObj.destroy()
  heatmapObj = undefined
}

const show = () => {
  const code = ``
  showCode(code)
}
onBeforeUnmount(() => {
  closeCode()
  map && map._viewer.destroy()
})
</script>
运行效果 更多示例
热力图分析 ​

代码实例 ​

热力图分析

代码实例
