cesium实现地图反选遮罩效果

最新推荐文章于 2024-07-16 09:00:00 发布

右弦GISer

最新推荐文章于 2024-07-16 09:00:00 发布

阅读量6.4k

点赞数 8

分类专栏： cesium 文章标签： gis cesium

本文链接：https://blog.csdn.net/weixin_45782925/article/details/124450047

版权

cesium 专栏收录该内容

122 篇文章 827 订阅

订阅专栏

本文介绍如何利用jQuery读取Geojson数据，结合Cesium的PolygonHierarchy类创建一个遮罩多边形，并在地图上显示研究区域的边界线。通过设置一个大的多边形并指定研究区域为洞，实现地图上的遮罩效果，同时用黄色线条展示区域边界。

摘要由CSDN通过智能技术生成

文章目录

Cesium实战系列文章总目录：传送门

1. 实现效果

在这里插入图片描述

2. 实现方法

2.1 实现思路

（1）获取位置坐标数据
使用jQuery读取geojson数据中的研究区域的位置坐标数据，这里使用武汉市面状geojson数据（单个面）。
（2）构造遮罩多边形
使用cesium的PolygonHierarchy类（API：传送门）进行设置。
在这里插入图片描述首先需要设置一个较大的多边形作为遮罩区域，然后将读取的研究区域位置坐标作为holes的参数即可。

2.2 具体代码

核心实现代码如下：

// 使用jQuery加载Geojson数据（只有单个面）
$.get('./data/wh/wh.geojson').then((data) => {
    let features = data.features;
    let positionArray = [];

    // 获取区域的经纬度坐标
    for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) {
        let coor = features[0].geometry.coordinates[0][i];
        positionArray.push(coor[0]);
        positionArray.push(coor[1]);
    }


    // 遮罩
    let polygonEntity = new Cesium.Entity({
        polygon: {
            hierarchy: {
                // 添加外部区域为1/4半圆，设置为180会报错
                positions: Cesium.Cartesian3.fromDegreesArray([0, 0, 0, 90, 179, 90, 179, 0]),
                // 中心挖空的“洞”
                holes: [{
                    positions: Cesium.Cartesian3.fromDegreesArray(positionArray)
                }]
            },
            material: new Cesium.Color(15 / 255.0, 38 / 255.0, 84 / 255.0, 0.7)
        }
    })

    // 边界线
    let lineEntity = new Cesium.Entity({
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
            width: 5,
            material: Cesium.Color.YELLOW,
        }
    })

    viewer.entities.add(polygonEntity);
    viewer.entities.add(lineEntity);
    viewer.flyTo(lineEntity);
});