1、初始化地图
map.setBasemapsOptions([
{
name: 'ArcGIS影像',
icon: 'img/basemaps/esriWorldImagery.png',
type: 'arcgis',
layer: 'img_d', // 使用layer时会自动用内部固定url "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
enablePickFeatures: false,
show: true,
},
{
name: '谷歌影像',
icon: 'img/basemaps/esriWorldImagery.png',
type: 'group',
layers: [
{ name: '底图', type: 'google', layer: 'img_d', chinaCRS: mars3d.ChinaCRS.WGS84 },
{ name: '注记', type: 'google', layer: 'img_z', chinaCRS: mars3d.ChinaCRS.WGS84 },
],
},
])
map.setSceneOptions({
center: window.globalConfig.center,
showMoon: false,
showSun: false,
} as any)
// map.setOptions({
// terrain: {
// type: 'arcgis',
// url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
// show: true,
// },
// })
map.scene.postProcessStages.fxaa.enabled = true
// 关闭实时渲染
map.viewer.requestRenderMode = true
// 开启深度检测
map.scene.globe.depthTestAgainstTerrain = true
2、自定义右键菜单栏
const graphicLayer = new mars3d.layer.GraphicLayer({
name: 'edit',
})
map.addLayer(graphicLayer)
const arr = []
map.getDefaultContextMenu().map((i) => {
if (['查看此处坐标', '图上量算', '图上标记'].includes(i.text)) {
arr.push(i)
}
if (['查看当前视角'].includes(i.text) && import.meta.env.VITE_BASE_ENV === 'development') {
arr.push(i)
}
})
arr.push({
text: '仅在模型上拾取',
show: function () {
return !map.onlyPickModelPosition
},
callback: () => {
map.onlyPickModelPosition = true
},
})
arr.push({
text: '添加电子围栏',
icon: mars3d.Icon.DrawPolygon,
callback: (e) => {
graphicLayer.startDraw({
type: 'polygon',
style: {
color: '#29cf34',
opacity: 0.5,
outline: true,
outlineWidth: 2.0,
clampToGround: true,
},
success: function (graphic) {
dataStatus.setDialog({
status: true,
type: dialogTypeEnum.painting_brush,
condition: {
type: JSON.stringify(graphic.coordinates),
},
})
},
})
},
})
arr.push({
text: '在任意位置拾取',
show: function () {
return map.onlyPickModelPosition
},
callback: () => {
map.onlyPickModelPosition = false
},
})
map.bindContextMenu(arr)
map.changeMouseModel(true)
参考官网:mars3d右键菜单官方示例:功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技