遮罩层 mask:true ,与symbol: { type: “polylineC“,冲突解决方案

最新推荐文章于 2024-09-25 10:59:43 发布

mianmianwu

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量364

点赞数 9

分类专栏： app Mars3d vue 文章标签： java 前端 vue.js webgl javascript cesium

本文链接：https://blog.csdn.net/m0_69803146/article/details/140516869

版权

Mars3d 同时被 3 个专栏收录

187 篇文章 16 订阅

订阅专栏

vue

183 篇文章 2 订阅

订阅专栏

app

165 篇文章 0 订阅

订阅专栏

问题场景：添加为遮罩层 mask为true 的时候添加 symbol: {
  type: "polylineC",
  styleOptions: {
    width: 50, // 线宽
    materialType: "PolylineGlow",
    materialOptions: {
      color: "#ff8b4d",
      opacity: 0.9,
      glowPower: 0.06 // 发光强度
    }
  }
}

此时，发光强度加上去之后，遮罩不起作用。

问题原因：

目前内置的type：“mask” 对应全球遮罩mars3d.graphic.Mask对象。指定了就不是遮罩对象

解决方案：

实现代码：

import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 30.307787, lng: 117.559842, alt: 312871, heading: 0, pitch: -64 },
    cameraController: {
      zoomFactor: 3.0
      // minimumZoomDistance: 1,
      // maximumZoomDistance: 1000000
    }
  }
}

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录首次创建的map

  addDemoGeoJsonLayer1()
  addDemoGraphic1()
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null
}

function addDemoGeoJsonLayer1() {
  // geojson 合肥边界线
  const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    url: "//data.mars3d.cn/file/geojson/areas/340100.json",
    mask: true, // 标识为遮罩层【重点参数】
    symbol: {
      styleOptions: {
        fill: true,
        color: "rgb(2,26,79)",
        opacity: 0.9,
        outline: true,
        outlineColor: "#39E09B",
        outlineWidth: 8,
        outlineOpacity: 0.8,
        arcType: Cesium.ArcType.GEODESIC,
        // global: false, // 是否全球遮罩，false时为中国区域
        clampToGround: true
      }
    }
    // flyTo: true
  })
  map.addLayer(geoJsonLayer)
}

function addDemoGraphic1() {
  // 创建矢量数据图层
  const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    url: "//data.mars3d.cn/file/geojson/areas/340100.json",
    symbol: {
      type: "polylineC",
      styleOptions: {
        width: 50, // 线宽
        materialType: "PolylineGlow",
        materialOptions: {
          color: "#ff8b4d",
          opacity: 0.9,
          glowPower: 0.06 // 发光强度
        }
      }
    }
    // flyTo: true
  })
  map.addLayer(geoJsonLayer)
}

链接：

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技