78 lines
1.9 KiB
HTML
78 lines
1.9 KiB
HTML
|
<!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>
|