1.在官网示例中通过 new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果
2.示例地址:
功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技
3.实现效果:
1.航线真实穿过山体或者模型的部分用虚线展示、并且是(真实穿过不是视线挡住那种),遮挡住的用虚线展示,没遮挡部分用实线表示。
2.随着视角变换,被山体遮挡住的部分可以自动变化为虚线。
4.关键代码:
5.全部代码:
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
export let underground
export const eventTarget = new mars3d.BaseClass()
// 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并)
export const mapOptions = {
scene: {
center: { "lat":30.923712, "lng":116.318665, "alt":4038.8, "heading":0.8, "pitch":-30.5}
}
}
/**
* 初始化地图业务,生命周期钩子函数(必须)
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.scene.globe.depthTestAgainstTerrain = true;
// 创建矢量数据图层
graphicLayer = new mars3d.layer.GraphicLayer()
underground = new mars3d.thing.Underground({
alpha: 0.9,
enabled: false
})
map.addThing(underground)
map.addLayer(graphicLayer)
addDemoGraphic1(graphicLayer)
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
map = null
graphicLayer.remove()
graphicLayer = null
}
function addDemoGraphic1(graphicLayer) {
const graphic = new mars3d.graphic.PolylineEntity({
positions: [
[116.297402, 30.975045, 1000],
[116.305843, 30.950567, 776.3],
[116.33202, 30.951973, 728.4],
[116.326067, 30.970536, 1059.1],
[116.31299, 30.959927, 1080.4]
],
style: {
color: Cesium.Color.YELLOW,
// color: '#00ff00',
depthFail: true,
depthFailMaterial: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.PolylineDash, {
color: Cesium.Color.RED,
dashLength: 20
}),
opacity: 1,
label: { text: "遮挡处颜色", pixelOffsetY: -30 },
},
attr: { remark: "示例1" },
flyTo: true
})
graphicLayer.addGraphic(graphic)
}
// 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) {
graphicLayer.clear()
graphicLayer.enabledEvent = false // 关闭事件,大数据addGraphic时影响加载时间
const bbox = [116.984788, 31.625909, 117.484068, 32.021504]
const result = mars3d.PolyUtil.getGridPoints(bbox, count, 30)
console.log("生成的测试网格坐标", result)
for (let j = 0; j < result.points.length; ++j) {
const position = result.points[j]
const index = j + 1
const pt1 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 225, result.radius)
const pt2 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 315, result.radius)
const graphic = new mars3d.graphic.PolylineEntity({
positions: [pt1, position, pt2],
style: {
width: 3.0,
color: Cesium.Color.fromRandom({ alpha: 1.0 })
},
attr: { index }
})
graphicLayer.addGraphic(graphic)
}
graphicLayer.enabledEvent = true // 恢复事件
return result.points.length
}
// 开始绘制
export function startDrawGraphic() {
graphicLayer.startDraw({
type: "polyline",
// maxPointNum: 2, //可以限定最大点数,2个点绘制后自动结束
// hasMidPoint: false,
style: {
color: "#55ff33",
width: 3,
clampToGround: false,
label: {
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0
}
},
success: function (graphic) {
const positions = graphic.positionsShow
map.graphicLayer.clear()
console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
}
})
}
// 开始绘制
export function startDrawGraphic2() {
graphicLayer.startDraw({
type: "polyline",
style: {
color: "#ff0000",
width: 3,
closure: true
}
})
}
// 开始绘制 自由曲线
export function startDrawBrushLine() {
graphicLayer.startDraw({
type: "brushLine",
style: {
color: "#55ff33",
width: 3,
clampToGround: false
}
})
}
// 在图层绑定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 })
})
}
// 绑定右键菜单
export function bindLayerContextMenu() {
graphicLayer.bindContextMenu([
{
text: "开始编辑对象",
icon: "fa fa-edit",
show: function (e) {
const graphic = e.graphic
if (!graphic || !graphic.hasEdit) {
return false
}
return !graphic.isEditing
},
callback: (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 || !graphic.hasEdit) {
return false
}
return graphic.isEditing
},
callback: (e) => {
const graphic = e.graphic
if (!graphic) {
return false
}
if (graphic) {
graphic.stopEditing()
}
}
},
{
text: "删除对象",
icon: "fa fa-trash-o",
show: (event) => {
const graphic = event.graphic
if (!graphic || graphic.isDestroy) {
return false
} else {
return true
}
},
callback: (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",
callback: (e) => {
const graphic = e.graphic
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
globalAlert("该对象的长度为:" + strDis)
}
}
])
}
标签:function,graphic,const,PolylineEntity,export,new,mars3d,graphicLayer
From: https://blog.csdn.net/m0_69803146/article/details/137596719