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 ()方法即可