// AQI来源：https://aqicn.org
|
|
import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer // 矢量图层对象
|
|
let imgData = null
|
let lastExtent = null
|
let bWorking = false
|
let currentData
|
|
let startTimestamp, endTimestamp
|
let timeout = 1000
|
let worker
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 25.251743, lng: 107.045599, alt: 553192, heading: 0, pitch: -51 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
imgData = getImageData()
|
|
// 创建Graphic图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 在layer上绑定Popup单击弹窗
|
graphicLayer.bindPopup(function (event, callback) {
|
const item = event.graphic.attr
|
if (!item) {
|
return false
|
}
|
return mars3d.Util.getTemplateHtml({
|
title: "AQI",
|
template: [
|
{ field: "city", name: "城市" },
|
{ field: "utime", name: "时间" },
|
{ field: "aqi", name: "AQI" },
|
{ field: "level", name: "质量" },
|
{ field: "influence", name: "影响" },
|
{ field: "suggestion", name: "建议" }
|
],
|
attr: item
|
})
|
})
|
|
map.on(mars3d.EventType.cameraChanged, onMap_cameraChanged)
|
onMap_cameraChanged()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function onMap_cameraChanged() {
|
endTimestamp = new Date().getTime()
|
if (bWorking === false) {
|
const extent = map.getExtent()
|
const bbox = extent.ymin + "," + extent.xmin + "," + extent.ymax + "," + extent.xmax
|
if (bbox !== lastExtent) {
|
startWorker(bbox)
|
lastExtent = bbox
|
}
|
} else if (endTimestamp - startTimestamp > timeout) {
|
bWorking = false
|
timeout += 1000
|
worker.terminate() // 终止 web worker
|
}
|
}
|
|
function startWorker(strBounds) {
|
startTimestamp = endTimestamp = new Date().getTime()
|
worker = new Worker(window.currentPath + `aqiWorker.js`) // currentPath为当前目录，内置在示例框架中
|
|
// 主线程调用worker.postMessage()方法，向 Worker 发消息。
|
worker.postMessage({
|
bounds: strBounds
|
})
|
bWorking = true
|
|
worker.onmessage = function (event) {
|
// Worker返回的结果。
|
currentData = event.data.entityTable
|
const currTime = event.data.currTime
|
if (currentData.length !== 0 && currTime > startTimestamp) {
|
createGraphics(currentData)
|
}
|
|
bWorking = false
|
worker.terminate() // 终止 web worker
|
}
|
}
|
|
function createGraphics(currentData) {
|
graphicLayer.clear()
|
console.log("加载数据", currentData)
|
|
for (let i = currentData.length - 1; i >= 0; i--) {
|
const item = currentData[i]
|
|
const primitive = new mars3d.graphic.BillboardPrimitive({
|
id: item.x,
|
name: item.city,
|
position: [item.lon, item.lat],
|
style: {
|
image: mars3d.Util.getCircleImage(item.aqi, {
|
color: getColor(item.aqi),
|
radius: 25
|
}),
|
scale: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 900000, 0.3)
|
},
|
attr: item
|
})
|
graphicLayer.addGraphic(primitive)
|
}
|
}
|
|
// 获取色带
|
function getImageData() {
|
const nWidth = 500
|
const canvas = document.createElement("canvas")
|
canvas.width = nWidth
|
canvas.height = nWidth
|
const ctx = canvas.getContext("2d")
|
ctx.beginPath()
|
/* 指定渐变区域 */
|
const grad = ctx.createLinearGradient(0, 0, nWidth, 0)
|
/* 指定几个颜色 */
|
grad.addColorStop(0.05, "rgb(0, 228, 0)") // green
|
grad.addColorStop(0.15, "rgb(256, 256, 0)") // yellow
|
grad.addColorStop(0.25, "rgb(256, 126, 0)") // orange
|
grad.addColorStop(0.35, "rgb(256, 0, 0)") // red
|
grad.addColorStop(0.5, "rgb(153, 0, 76)") // purple
|
grad.addColorStop(0.8, "rgb(126, 0, 35)") // maroon
|
/* 将这个渐变设置为fillStyle */
|
ctx.fillStyle = grad
|
/* 绘制矩形 */
|
ctx.rect(0, 0, nWidth, nWidth)
|
ctx.fill()
|
return ctx.getImageData(0, 0, nWidth, 1).data
|
}
|
|
function getColor(aqi) {
|
if (aqi > 500) {
|
return "rgba(126,0,35,0.8)"
|
} else {
|
return `rgba(${imgData[aqi * 4]},${imgData[aqi * 4 + 1]},${imgData[aqi * 4 + 2]},0.8)`
|
}
|
}
|
