import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer // 矢量图层对象
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
hasEdit: true,
|
isAutoEditing: true // 绘制完成后是否自动激活编辑
|
})
|
map.addLayer(graphicLayer)
|
|
graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
|
updateBuffer(e.graphic)
|
})
|
|
graphicLayer.on(mars3d.EventType.editMovePoint, function (e) {
|
updateBuffer(e.graphic)
|
})
|
|
graphicLayer.on(mars3d.EventType.editRemovePoint, function (e) {
|
updateBuffer(e.graphic)
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
export function drawPoint() {
|
deleteAll()
|
|
graphicLayer.startDraw({
|
type: "point",
|
style: {
|
pixelSize: 12,
|
color: "#ffff00"
|
}
|
})
|
}
|
|
export function drawPolyline() {
|
deleteAll()
|
|
graphicLayer.startDraw({
|
type: "polyline",
|
style: {
|
color: "#ffff00",
|
width: 3,
|
clampToGround: true
|
}
|
})
|
}
|
|
export function drawPolygon() {
|
deleteAll()
|
|
graphicLayer.startDraw({
|
type: "polygon",
|
style: {
|
color: "#ffff00",
|
outline: true,
|
outlineColor: "#f0ce22",
|
outlineWidth: 4,
|
opacity: 0.5,
|
clampToGround: true
|
}
|
})
|
}
|
|
function deleteAll() {
|
graphicLayer.clear()
|
map.graphicLayer.clear()
|
lastgeojson = null
|
}
|
|
let width
|
export function radiusChange(val) {
|
width = val * 1000 // km
|
if (lastgeojson) {
|
updateBuffer()
|
}
|
}
|
|
let lastgeojson
|
function updateBuffer(graphic) {
|
let buffere
|
try {
|
const geojson = graphic ? graphic.toGeoJSON() : lastgeojson
|
geojson.properties = {}
|
|
buffere = mars3d.PolyUtil.buffer(geojson, width)
|
|
lastgeojson = geojson
|
} catch (e) {
|
console.log("缓冲分析异常", e)
|
}
|
if (!buffere) {
|
return
|
}
|
|
const graphicsOptions = mars3d.Util.geoJsonToGraphics(buffere, {
|
type: "polygon",
|
style: {
|
color: "rgba(255,0,0,0.4)",
|
clampToGround: true
|
}
|
})
|
|
map.graphicLayer.clear()
|
map.graphicLayer.addGraphic(graphicsOptions)
|
}
|
