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
|
|
// 1.在map上绑定监听事件
|
/* map.on(mars3d.EventType.clickGraphic, function (event) {
|
// clickGraphic
|
console.log("监听map，单击了矢量对象", event)
|
})
|
map.on(mars3d.EventType.mouseMove, function (event) {
|
// mouseMove
|
console.log("监听map，鼠标移动了", event)
|
}) */
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 2.在layer上绑定监听事件
|
bindLayerEvent() // 对图层绑定相关事件
|
bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
|
bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
|
|
// 加一些演示数据
|
addDemoGraphic1(graphicLayer)
|
addDemoGraphic2(graphicLayer)
|
addDemoGraphic3(graphicLayer)
|
addDemoGraphic4(graphicLayer)
|
addDemoGraphic5(graphicLayer)
|
addDemoGraphic6(graphicLayer)
|
addDemoGraphic7(graphicLayer)
|
addDemoGraphic8(graphicLayer)
|
addDemoGraphic9(graphicLayer)
|
addDemoGraphic10(graphicLayer)
|
addDemoGraphic11(graphicLayer)
|
addDemoGraphic12(graphicLayer)
|
addDemoGraphic13(graphicLayer)
|
addDemoGraphic14(graphicLayer)
|
addDemoGraphic15(graphicLayer)
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function addDemoGraphic1(graphicLayer) {
|
const graphic = new mars3d.graphic.LabelEntity({
|
position: new mars3d.LngLatPoint(116.1, 31.0, 1000),
|
style: {
|
text: "火星科技Mars3D平台",
|
font_size: 25,
|
font_family: "楷体",
|
color: "#003da6",
|
outline: true,
|
outlineColor: "#bfbfbf",
|
outlineWidth: 2,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
visibleDepth: false
|
},
|
attr: { remark: "示例1" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic2(graphicLayer) {
|
const graphic = new mars3d.graphic.PointEntity({
|
position: [116.2, 31.0, 1000],
|
style: {
|
color: "#ff0000",
|
pixelSize: 10,
|
outline: true,
|
outlineColor: "#ffffff",
|
outlineWidth: 2
|
},
|
attr: { remark: "示例2" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic3(graphicLayer) {
|
const graphic = new mars3d.graphic.BillboardEntity({
|
name: "贴地图标",
|
position: [116.3, 31.0, 1000],
|
style: {
|
image: "img/marker/mark2.png",
|
scale: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
clampToGround: true
|
},
|
attr: { remark: "示例3" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic4(graphicLayer) {
|
const graphic = new mars3d.graphic.PlaneEntity({
|
position: new mars3d.LngLatPoint(116.4, 31.0, 1000),
|
style: {
|
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
|
dimensions: new Cesium.Cartesian2(4000.0, 4000.0),
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Image, {
|
image: "img/textures/poly-rivers.png",
|
transparent: true
|
})
|
},
|
attr: { remark: "示例4" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic5(graphicLayer) {
|
const graphic = new mars3d.graphic.BoxEntity({
|
position: new mars3d.LngLatPoint(116.5, 31.0, 1000),
|
style: {
|
dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
|
fill: true,
|
color: "#00ffff",
|
opacity: 0.9,
|
heading: 45,
|
roll: 45,
|
pitch: 0
|
},
|
attr: { remark: "示例5" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic6(graphicLayer) {
|
const graphic = new mars3d.graphic.CircleEntity({
|
position: [116.1, 30.9, 1000],
|
style: {
|
radius: 1800.0,
|
color: "#00ff00",
|
opacity: 0.3,
|
outline: true,
|
outlineWidth: 3,
|
outlineColor: "#ffffff",
|
clampToGround: true
|
},
|
popup: "直接传参的popup",
|
attr: { remark: "示例6" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic7(graphicLayer) {
|
const graphic = new mars3d.graphic.CylinderEntity({
|
position: [116.2, 30.9, 1000],
|
style: {
|
length: 3000.0,
|
topRadius: 0.0,
|
bottomRadius: 1300.0,
|
color: "#00FFFF",
|
opacity: 0.7
|
},
|
popup: "直接传参的popup",
|
attr: { remark: "示例7" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
//
|
function addDemoGraphic8(graphicLayer) {
|
const graphic = new mars3d.graphic.EllipsoidEntity({
|
position: new mars3d.LngLatPoint(116.3, 30.9, 1000),
|
style: {
|
radii: new Cesium.Cartesian3(1500.0, 1500.0, 1500.0),
|
material: Cesium.Color.RED.withAlpha(0.5),
|
outline: true,
|
outlineColor: Cesium.Color.WHITE.withAlpha(0.3)
|
},
|
attr: { remark: "示例8" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic9(graphicLayer) {
|
const graphic = new mars3d.graphic.ModelEntity({
|
name: "消防员",
|
position: [116.4, 30.9, 1000],
|
style: {
|
url: "//data.mars3d.cn/gltf/mars/firedrill/xiaofangyuan-run.gltf",
|
scale: 16,
|
minimumPixelSize: 100
|
},
|
attr: { remark: "示例9" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
function addDemoGraphic10(graphicLayer) {
|
const graphic = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[116.5, 30.9, 1000],
|
[116.52, 30.91, 1000],
|
[116.53, 30.89, 1000]
|
],
|
style: {
|
width: 5,
|
color: "#3388ff"
|
},
|
attr: { remark: "示例10" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
function addDemoGraphic11(graphicLayer) {
|
const graphic = new mars3d.graphic.PolylineVolumeEntity({
|
positions: [
|
[116.1, 30.8, 1000],
|
[116.12, 30.81, 1000],
|
[116.13, 30.79, 1000]
|
],
|
style: {
|
shape: "pipeline",
|
radius: 80,
|
color: "#3388ff",
|
opacity: 0.9
|
},
|
attr: { remark: "示例11" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
function addDemoGraphic12(graphicLayer) {
|
const graphic = new mars3d.graphic.CorridorEntity({
|
positions: [
|
[116.2, 30.8, 1000],
|
[116.22, 30.81, 1000],
|
[116.23, 30.79, 1000],
|
[116.247328, 30.806077, 610.41]
|
],
|
style: {
|
width: 500,
|
color: "#3388ff"
|
},
|
attr: { remark: "示例12" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
function addDemoGraphic13(graphicLayer) {
|
const graphic = new mars3d.graphic.WallEntity({
|
positions: [
|
[116.3, 30.8, 1000],
|
[116.31, 30.81, 1000],
|
[116.334639, 30.800735, 721.39],
|
[116.32, 30.79, 1000]
|
],
|
style: {
|
closure: true,
|
diffHeight: 500,
|
// 动画线材质
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/fence.png",
|
color: "#00ff00",
|
speed: 10,
|
axisY: true
|
})
|
},
|
attr: { remark: "示例13" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
function addDemoGraphic14(graphicLayer) {
|
const graphic = new mars3d.graphic.RectangleEntity({
|
positions: [
|
[116.383144, 30.819978, 444.42],
|
|
[116.42216, 30.793431, 1048.07]
|
],
|
style: {
|
color: "#3388ff",
|
opacity: 0.5,
|
outline: true,
|
outlineWidth: 3,
|
outlineColor: "#ffffff"
|
},
|
attr: { remark: "示例14" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
function addDemoGraphic15(graphicLayer) {
|
const graphic = new mars3d.graphic.PolygonEntity({
|
positions: [
|
[116.510278, 30.834372, 567.29],
|
[116.530085, 30.809331, 448.31],
|
[116.507367, 30.788551, 98.21],
|
[116.472468, 30.823091, 677.39]
|
],
|
style: {
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Water, {
|
normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.02, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4" // 从水中混合到非水域时使用的rgba颜色对象。
|
})
|
},
|
attr: { remark: "示例15" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
|
// 在图层级处理一些事物
|
function bindLayerEvent() {
|
// 在layer上绑定监听事件
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("监听layer，单击了矢量对象", event)
|
})
|
/* graphicLayer.on(mars3d.EventType.mouseOver, function (event) {
|
console.log("监听layer，鼠标移入了矢量对象", event)
|
})
|
graphicLayer.on(mars3d.EventType.mouseOut, function (event) {
|
console.log("监听layer，鼠标移出了矢量对象", event)
|
}) */
|
}
|
|
// 绑定右键菜单
|
export function bindLayerContextMenu() {
|
graphicLayer.bindContextMenu([
|
{
|
text: "开始编辑对象",
|
icon: "fa fa-edit",
|
show: function (e) {
|
const graphic = e.graphic
|
if (!graphic || !graphic.startEditing) {
|
return false
|
}
|
return !graphic.isEditing
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
if (graphic) {
|
graphicLayer.startEditing(graphic)
|
}
|
}
|
},
|
{
|
text: "停止编辑对象",
|
icon: "fa fa-edit",
|
show: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
return graphic.isEditing
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
if (graphic) {
|
graphicLayer.stopEditing(graphic)
|
}
|
}
|
},
|
{
|
text: "删除对象",
|
icon: "fa fa-trash-o",
|
show: (event) => {
|
const graphic = event.graphic
|
if (!graphic || graphic.isDestroy) {
|
return false
|
} else {
|
return true
|
}
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return
|
}
|
const parent = graphic._parent // 右击是编辑点时
|
graphicLayer.removeGraphic(graphic)
|
if (parent) {
|
graphicLayer.removeGraphic(parent)
|
}
|
}
|
},
|
{
|
text: "计算长度",
|
icon: "fa fa-medium",
|
show: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
return (
|
graphic.type === "polyline" ||
|
graphic.type === "polylineP" ||
|
graphic.type === "curve" ||
|
graphic.type === "curveP" ||
|
graphic.type === "polylineVolume" ||
|
graphic.type === "polylineVolumeP" ||
|
graphic.type === "corridor" ||
|
graphic.type === "corridorP" ||
|
graphic.type === "wall" ||
|
graphic.type === "wallP"
|
)
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
globalAlert("该对象的长度为:" + strDis)
|
}
|
},
|
{
|
text: "计算周长",
|
icon: "fa fa-medium",
|
show: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
return (
|
graphic.type === "circle" ||
|
graphic.type === "circleP" ||
|
graphic.type === "rectangle" ||
|
graphic.type === "rectangleP" ||
|
graphic.type === "polygon" ||
|
graphic.type === "polygonP"
|
)
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
globalAlert("该对象的周长为:" + strDis)
|
}
|
},
|
{
|
text: "计算面积",
|
icon: "fa fa-reorder",
|
show: function (e) {
|
const graphic = e.graphic
|
if (!graphic) {
|
return false
|
}
|
return (
|
graphic.type === "circle" ||
|
graphic.type === "circleP" ||
|
graphic.type === "rectangle" ||
|
graphic.type === "rectangleP" ||
|
graphic.type === "polygon" ||
|
graphic.type === "polygonP" ||
|
graphic.type === "scrollWall" ||
|
graphic.type === "water"
|
)
|
},
|
callback: function (e) {
|
const graphic = e.graphic
|
const strArea = mars3d.MeasureUtil.formatArea(graphic.area)
|
globalAlert("该对象的面积为:" + strArea)
|
}
|
}
|
])
|
}
|
|
// 在图层绑定Popup弹窗
|
export function bindLayerPopup() {
|
graphicLayer.bindPopup(function (event) {
|
const attr = event.graphic.attr || {}
|
attr["类型"] = event.graphic.type
|
attr["来源"] = "我是layer上绑定的Popup"
|
attr["备注"] = "我支持鼠标交互"
|
|
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
|
})
|
}
|
