mars3d自定义右键菜单栏

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三维可视化平台 | 火星科技

你可能感兴趣的:(Mars3d,3d,前端)