本代码示例展示了如何使用 WebGL 技术在百度地图中创建可视化卡片,展示特定区域的温度分布。该卡片可用于天气预报、环境监测等场景,直观地展示地理空间数据的分布情况。
该代码的主要功能包括:
1. 加载脚本和样式
async mounted() {
await Promise.all([
this.loadScripts([
// ...脚本链接
]),
this.loadStyles([
// ...样式链接
]),
])
}
该部分代码通过异步加载所需脚本和样式,确保所有依赖项在代码运行前加载完成。
2. 绘制图片叠加物
function drawImage(x1, y1, x2, y2, url, opt) {
// ...
}
var overlayImage = drawImage(
// ...
)
map.addOverlay(overlayImage)
这段代码使用 drawImage
函数在地图上绘制了一张图片叠加物,其中 x1
、y1
、x2
、y2
指定了图片的地理范围,url
指定了图片链接。overlayImage
表示绘制后的图片叠加物对象。
3. 添加像素映射事件
addEvent(overlayImage)
function addEvent(overlay) {
overlay.addEventListener('onclick', function (e) {
// ...
})
overlay.addEventListener('onmousemove', function (e) {
// ...
})
}
addEvent
函数为图片叠加物添加了点击和鼠标移动事件。当用户点击或移动鼠标时,会触发事件,获取当前鼠标位置的像素值,并根据像素映射公式计算出相应的温度值,并显示在提示框中。
4. 创建图例
<div class="legend">
<div class="legend-img">
<img src="legend.png" />
</div>
<div class="legend-label">
<div class="legend-value-row" style="top: calc(0% - 8px + 1px)">32度</div>
<div class="legend-value-row" style="top: calc(20% - 8px)">29.4度</div>
<div class="legend-value-row" style="top: calc(40% - 8px)">26.8度</div>
<div class="legend-value-row" style="top: calc(60% - 8px)">24.2度</div>
<div class="legend-value-row" style="top: calc(80% - 8px)">21.6度</div>
<div class="legend-value-row" style="top: calc(100% - 8px - 1px)">19度</div>
</div>
</div>
这段 HTML 代码创建了一个图例,显示了温度值对应的颜色分段。
开发经验与收获:
未来拓展与优化: