import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
let graphicLayer // 矢量图层对象
|
let polygonsLayer
|
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.771917, lng: 117.373238, alt: 34263, heading: 336, pitch: -69 },
|
fxaa: true
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
polygonsLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(polygonsLayer)
|
|
const graphic = new mars3d.graphic.PolygonEntity({
|
positions: [
|
[117.271662, 31.870639, 21.49],
|
[117.290605, 31.871517, 19.47],
|
[117.302056, 31.858145, 16.27],
|
[117.299439, 31.847545, 14.77],
|
[117.267705, 31.8491, 22.11]
|
],
|
style: {
|
color: "#3388ff",
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 2,
|
outlineColor: "#ffffff"
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 绘制面
|
export function drawPolygon() {
|
// 开始绘制
|
graphicLayer.startDraw({
|
type: "polygon",
|
style: {
|
color: getColor(),
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 2,
|
outlineColor: "#ffffff"
|
},
|
success: (graphic) => {
|
graphicLayer.clear()
|
polygonsLayer.clear()
|
graphicLayer.addGraphic(graphic)
|
}
|
})
|
}
|
|
// 旋转面
|
export function spinPolygons(angle) {
|
clearGraphic()
|
|
const graphic = graphicLayer.getGraphics()[0]
|
const poly = graphic.toGeoJSON({ closure: true })
|
|
const centerPoint = mars3d.LngLatPoint.fromCartesian(graphic.center).toArray() // 围绕执行旋转的点
|
|
// truf旋转操作
|
const rotatedPoly = turf.transformRotate(poly, angle, { pivot: centerPoint })
|
|
const spinGraphic = mars3d.Util.geoJsonToGraphics(rotatedPoly, {
|
style: {
|
color: "#ff0000",
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 2,
|
outlineColor: "#ffffff"
|
}
|
})
|
polygonsLayer.addGraphic(spinGraphic)
|
}
|
|
// 平移面
|
export function translationPolygons(offset) {
|
clearGraphic()
|
|
const graphic = graphicLayer.getGraphics()[0]
|
const poly = graphic.toGeoJSON({ closure: true })
|
|
// truf平移操作
|
const rotatedPoly = turf.transformTranslate(poly, offset, 10)
|
|
const spinGraphic = mars3d.Util.geoJsonToGraphics(rotatedPoly, {
|
style: {
|
color: "#ff0000",
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 2,
|
outlineColor: "#ffffff"
|
}
|
})
|
polygonsLayer.addGraphic(spinGraphic)
|
}
|
|
// 缩放面
|
export function zoomPolygons(scale) {
|
clearGraphic()
|
|
if (scale === 0) {
|
return
|
}
|
|
const graphic = graphicLayer.getGraphics()[0]
|
const poly = graphic.toGeoJSON({ closure: true })
|
|
// truf缩放操作
|
const rotatedPoly = turf.transformScale(poly, scale)
|
|
const spinGraphic = mars3d.Util.geoJsonToGraphics(rotatedPoly, {
|
style: {
|
color: "#ff0000",
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 2,
|
outlineColor: "#ffffff"
|
}
|
})
|
polygonsLayer.addGraphic(spinGraphic)
|
}
|
|
function clearGraphic() {
|
polygonsLayer.clear()
|
graphicLayer.endDraw()
|
}
|
|
// 颜色
|
let index = 0
|
const colors = ["#99CCCC", "#66FF66", "#FF6666", "#00CCFF", "#00FF33", "#CC0000", "#CC00CC", "#CCFF00", "#0000FF"]
|
function getColor() {
|
const i = index++ % colors.length
|
return colors[i]
|
}
|
