Files
sdk4_demo/example/添加热力图.html

78 lines
1.9 KiB
HTML
Raw Normal View History

2025-07-03 15:12:58 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>热力图</title>
<script src="../sdk/YJEarth.min.js"></script>
<script src="vue.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
},
async mounted() {
await YJ.on()
this.createEarth()
},
methods: {
async createEarth() {
this.sdk = await new YJ.YJEarth("app")
window.sdk = this.sdk
let data = []
let len = 1000
while (len--) {
let val = Math.floor(Math.random() * 1000)
let point = {
lng: 100 - Math.random() * 10,
lat: 40 - Math.random() * 10,
value: val
}
data.push(point)
}
let Draw = new YJ.Draw.DrawPolygon(this.sdk)
Draw.start((a, positions) => {
// * @param sdk
// * @description 热力图
// * @param options {object} 属性
// * @param options.id {string} 唯一标识
// * @param options.show=true {boolean} 显示/隐藏
// * @param options.name {string} 名称
// * @param options.gradient {object} 渐变色
// * @param {Array.<object>} options.positions 经纬度和高度的列表,值交替 [{lon,lat,alt},...]
// * @param {Array.<object>} options.data 热力图数据 [{lon,lat,value},...]
let heatmap = new YJ.Obj.Heatmap(this.sdk, { positions: positions, data: data })
// 设置显隐
// heatmap.show = false
// 定位
// heatmap.flyTo()
// 移除
// heatmap.remove()
})
// this.sdk.viewer.scene.splitPosition = 0.5
},
ExportKml() {
YJ.Global.ExportKml([this.PolygonObject])
}
}
})
</script>