cesium.js 绘制城市边界

最新推荐文章于 2024-05-29 19:36:52 发布

no_houttuynia

最新推荐文章于 2024-05-29 19:36:52 发布

阅读量577

点赞数

分类专栏：工具文章标签： javascript 前端 3d

本文链接：https://blog.csdn.net/qq_43071951/article/details/130361839

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

/**
 * 绘制反选遮罩 —— 添加城市边界
 * '../../../json/addBeijingBoundary.json'
 * 参考：
 * https://blog.csdn.net/weixin_38676065/article/details/123977289
 * https://blog.csdn.net/qq_38370387/article/details/124730066
 *
 * 需要 viewer 挂载到 window 上（或者自行修改代码）
 * Cesium 默认在index.html引入，如果使用的 npm 自行修改代码
 */
import axios from 'axios'

const cityBoundaryJSON = 'http://192.168.0.115:8091';

function addCityBoundary(path) {
    axios.request({
        url: path,
        method: 'get',
        baseURL: cityBoundaryJSON
    }).then(function (response) {
        let feature = response.data;
        let coordinates = feature.geometry.coordinates[0];

        let degreesArrayHeights = [];
        for (let i = 0; i < coordinates.length; i++) {
            const element = coordinates[i];
            degreesArrayHeights.push(element[0]);
            degreesArrayHeights.push(element[1]);
            degreesArrayHeights.push(0);
        }

        let positions = Cesium.Cartesian3.fromDegreesArrayHeights(degreesArrayHeights);
        // 添加遮罩层
        window.viewer.entities.add({
            name: "convertLayer",
            polygon: {
                hierarchy: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        100, 0, 100, 89, 150, 89, 150, 0,
                    ]),
                    holes: [{positions}],
                },
                material: Cesium.Color.fromCssColorString('#061824').withAlpha(0.6)
            },
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 表示相对于地形的位置
        })
        // 添加边线
        window.viewer.entities.add({
            id: 2,
            polyline: {
                positions: positions,
                width: 2,
                material: Cesium.Color.fromCssColorString('#6dcdeb')
            }
        })
    }).catch(function (error) {
        console.log(error);
    });
}

export {addCityBoundary}