javascript 前端 开发语言 mars3d绘制区域范围（面+边框）

1、图例（绿色面区域+白色边框）

 2、代码

1）、绘制区域ts文件

import { mapLayerCollection } from '@/hooks/cesium-map-init'

/**

* 安全防護目標

* @param map

*/

export const addSafetyProtection = async (map) => {

const coverDatas = await mapLayerCollection.value.safety_protection.formatter()

if (coverDatas) {

const graphicLayer = new mars3d.layer.GeoJsonLayer({

name: mapLayerCollection.value.safety_protection.label,

data: coverDatas,

symbol: {

styleField: 'levels',

styleFieldOptions: {

'1': { color: '#0ec758' },

'2': { color: '#0ec758' },

'3': { color: '#0ec758' },

},

styleOptions: {

clampToGround: true,

classificationType: Cesium.ClassificationType.BOTH,

distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),

outline: true,

outlineColor: Cesium.Color.WHITE,

outlineWidth: 0.9,

opacity: 0.6,

},

merge: true,

},

})

mapLayerCollection.value.safety_protection.initLayer(map, graphicLayer)

}

}

解释：

1、new mars3d.layer.GeoJsonLayer

     生成矢量图层

2、styleField

      "levels" 是在json文件中区分不同级别景区的标志，值为1、2、3等

3、styleFieldOptions

      根据styleField获取到的值进行区分，划分不同颜色的区域

4、styleOptions

clampToGround：布尔值，表示是否将对象固定在地表上。如果设置为true，对象将贴合到地表上，不会浮在地表之上。classificationType：枚举值，定义对象的分类类型。                                                  可选值有NONE、TERRAIN、CESIUM_3D_TILE和BOTH。                                                   1）、NONE表示对象不进行分类，                                                                             2）、TERRAIN表示对象只在地形表面上显示，                                                         3）、CESIUM_3D_TILE表示对象只在3D瓦片上显示，                                                 4）、BOTH表示对象同时在地形和3D瓦片上显示。distanceDisplayCondition：定义对象的可见距离条件。它接受一个 Cesium.DistanceDisplayCondition 对象，其中包含两个距离参数，表示对象的最小和最大可见距离。对象只有在距离相机在这个范围内时才可见。outline：布尔值，表示是否给对象添加轮廓线。outlineColor：定义对象轮廓线的颜色。可以使用 Cesium.Color 对象来指定颜色。outlineWidth：定义对象轮廓线的宽度。opacity：定义对象的不透明度，取值范围为0到1，其中0表示完全透明，1表示完全不透明。merge 是一个额外的属性，它用于指示是否将当前样式选项与现有的样式进行合并。如果设置为true，当前样式将与现有的样式合并，否则会覆盖现有的样式。

2）、矢量图层加载

export const mapLayerCollection = ref({

safety_protection: {

label: '防护目标',

code: '23',

// url: import.meta.env.VITE_BASE_URL + 'static/data/' + window.globalConfig.tag + '/safety-protection.json',

initLayer: function (map, graphicLayer = {}) {

map.addLayer(graphicLayer)

this.init = true

// return graphicLayer

},

formatter: getSafety,

show: true,

edit: false,

init: false,

}

})

// 注意：formatter: getSafety这个是封装出去的

const getSafety = async () => {

const url = import.meta.env.VITE_BASE_URL + 'static/data/' + window.globalConfig.tag + '/safety-protection.json'

const [err, data] = await to(getUrl(url))

if (err) return []

return data

}

// 解释：

1、url是在地图上绘制区域生成的json文件

1)、import.meta.env.VITE_BASE_URL 【是好多个景区使用这个项目，所以地址前面是动态生成的】

2)、'static/data/' 【文件实在vue3项目下的】public/static/data/中的

3)、景区的名称也是动态生成的

4)、'/safety-protection.json'这个就是生成的JSON文件

2、const [err, data] = await to(getUrl(url)) 调取后台接口获取数据

3）、在map.vue引用addSafetyProtection ()方法即可

推荐链接

 您阅读本篇文章共花了：