cesium控制及效果(七)：绘制反选遮罩层

1、实现思路

首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来。

2、代码实现

import * as Cesium from "cesium";
//绘制边界
const drawBoundary = (data) => {
    removeBoundary();
    // 中国边界
    let extent = { xmin: 73.0, xmax: 136.0, ymin: 3.0, ymax: 59.0 };
    let geojson = {
        type: 'Feature',
        geometry: {
            type: "MultiPolygon",
            coordinates: [[
                [[extent.xmin,extent.ymin],[extent.xmax,extent.ymin],[extent.xmax,extent.ymax],[extent.xmin,extent.ymax],[extent.xmin,extent.ymin]],
                data.geometry.coordinates[0]
            ]]
        }
    }
    let geoPromise = Cesium.GeoJsonDataSource.load(geojson, {
        stroke: Cesium.Color.fromCssColorString('#39E09B').withAlpha(0.8),
        fill: Cesium.Color.fromCssColorString("rgb(2,26,79)").withAlpha(0.7),
        strokeWidth: 10,
        clampToGround: true
    })
    geoPromise.then((dataSource) => {
        //添加geojson
        viewer.dataSources.add(dataSource);
        //给geojson命名
        dataSource.name = "geojsonBoundary";
        //视角跳转至geojson
        // viewer.flyTo(dataSource.entities.values)
    })
}
//清除绘制
const removeBoundary = () => {
   viewer.dataSources.remove(viewer.dataSources.getByName("geojsonBoundary")[0]);
}
/获取geojson数据
const loadBoundary = () => {
    axios.get("/public/geojson/hefei.json").then(res => {
        let geojson = res.data;
        drawBoundary(geojson);
    })
}

3、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star