cesium根据不同层级大小,划分当前网格

该代码段展示了如何在Vue项目中集成Cesium库,创建地图视图,设置初始位置,处理鼠标滚轮事件以改变视角层级,并根据层级变化动态绘制不同精度的网格。此外,还涉及到Turf.js库用于地理计算,以及加载和操作地图上的多边形区域。
<template>
    <div>
        <div class="full-container" :style="viewStyle" id="cesiumContainer" />
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import * as Cesium from "cesium";
import * as turf from "@turf/turf";
var viewer = null
var saveLevel = 1;  //当前视角层数
var dealArr = []    //需要处理的数组
var gridArr = [];   //网格数组
const cesiumGather = reactive({
    cesiumViewer: null, //初始化地图
    //   cesiumPointList: [], //点位集合
    //   cesiumPointAddList: [], //点位集合
    //   pointVisible: false, //控制【添|编标注】弹窗
    //   pointOptions: [

    //   ],
    //   pointForm: {
    //     title: "标注名称",
    //     point: null,
    //     image: siteIcon4,
    //   },
    //   popVisible: false,
    //   pointTitle: "",
    //   drawHandler: null, //事件
});
onMounted(() => {
    const tianDiTuToken = "5571cb32eeb8596f97fa9790172addab";
    Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMTQxMGIzNC04N2M0LTQ0MDUtOTdlYi02ZGE0NTgyZGVjMzAiLCJpZCI6MzA5ODUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTQ2OTQ5NzN9.JbUqIgKO92noy6B8zcYMdq8QygnMKM70RIdJZqAwwdk";
    // 服务负载子域
    const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
    // 创建图层
    viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件,左下角仪表
        timeline: true, //是否显示时间轴
        geocoder: false, //是否显示geocoder小器件,右上角查询按钮
        baseLayerPicker: false, //是否显示图层选择器
        fullscreenButton: false, //是否显示全屏按钮
        homeButton: true, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
        selectionIndicator: false, //是否显示选取指示器组件
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
        shadows: true, //是否显示背影
        /*新增的*/
        shouldAnimate: true, // Enable animations
    });
    //   将图层挂载到window上
    window.cesiumViewer = viewer;
    // viewer.imageryLayers.addImageryProvider(
    //     new Cesium.WebMapTileServiceImageryProvider({
    //         //影像注记
    //         url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`,
    //         subdomains: subdomains,
    //         layer: "tdtCiaLayer",
    //         style: "default",
    //         format: "image/jpeg",
    //         tileMatrixSetID: "GoogleMapsCompatible",
    //         maximumLevel: 18,
    //     })
    // );
    //优化项--关闭相关特效
    viewer.scene.debugShowFramesPerSecond = false; //显示fps
    viewer.scene.moon.show = false; //月亮
    viewer.scene.fog.enabled = false; //雾
    viewer.scene.sun.show = false; //太阳
    viewer.scene.skyBox.show = false; //天空盒
    viewer.resolutionScale = 1.0; //画面细度,默认值为1.0
    //去除版权信息
    viewer._cesiumWidget._creditContainer.style.display = "none";
    //隐藏时间轴
    viewer.timeline.container.style.display = "none";
    // 设置缩放最小比例
    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 122500000;

    // 禁止双击
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    // 将三维球定位到中国
    // viewer.camera.flyTo({
    //     destination: Cesium.Cartesian3.fromDegrees(108.09876, 37.200787, 1400000),
    //     duration: 1,
    // });
    // 将三维球定位到中国
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        orientation: {
            heading: Cesium.Math.toRadians(348.4202942851978),
            pitch: Cesium.Math.toRadians(-89.74026687972041),
            roll: Cesium.Math.toRadians(0),
        },
        complete: function callback() {
            // 定位完成之后的回调函数
        },
    });
    // 
    const entities = viewer.entities;
    var wyoming = viewer.entities.add({
        name: 'Wyoming',
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArra
Cesium中实现北斗网格码相关的技术,主要涉及将北斗网格系统与Cesium的地理空间数据处理能力相结合。北斗网格编码是一种基于地球表面的空间索引方法,它通过递归划分地球表面为多个层级网格来支持高效的数据管理和查询[^1]。以下是一些可能的实现步骤和方法: ### 北斗网格码在Cesium中的应用 #### 1. 创建北斗网格 首先需要创建北斗网格。可以参考GeoScene Pro中的“创建北斗网格”功能,生成指定范围内的多级网格数据[^1]。由于Cesium本身不直接支持北斗网格编码,因此需要手动编写代码来生成所需的网格结构。 ```javascript // 示例:使用GridImageryProvider创建基础网格图层 var gridImagery = new Cesium.GridImageryProvider(); viewer.imageryLayers.addImageryProvider(gridImagery); ``` #### 2. 数据相交处理 为了将二维矢量数据(如行政区划)与北斗网格进行关联,通常需要执行相交操作。这一步骤可以确保每个网格单元包含正确的地理要素信息[^1]。在Cesium中,可以通过几何计算或调用外部服务来进行相交分析。 ```javascript // 假设有一个矢量数据源 var vectorDataSource = viewer.dataSources.add(new Cesium.GeoJsonDataSource()); vectorDataSource.load('path/to/vector-data.geojson'); // 执行相交逻辑(伪代码) function intersectGridsWithFeatures(gridLayer, featureCollection) { // 实现具体的相交算法 } intersectGridsWithFeatures(gridImagery, vectorDataSource.entities); ``` #### 3. 属性赋值与可视化 对于每一个北斗网格单元,如果存在多个地理要素,则可以选择面积最大的要素作为该网格的主要属性值。这种选择可以通过遍历所有相交的要素并比较其面积大小来完成。之后,可以根据这些属性值对网格进行颜色渲染或其他形式的可视化展示。 ```javascript // 根据属性值设置网格样式 gridImagery.customProperties.style = function (imageryProvider, x, y, level, result) { // 获取当前网格对应的最大面积要素属性 var maxAreaFeature = getMaxAreaFeatureForTile(x, y, level); if (maxAreaFeature && maxAreaFeature.properties.color) { return { color: Cesium.Color.fromCssColorString(maxAreaFeature.properties.color) }; } return {}; }; ``` #### 4. 动态加载与性能优化 考虑到不同层级的北斗网格可能会非常庞大,特别是在较高层级时,应考虑动态加载策略以提高性能。例如,仅当用户缩放到特定层级时才加载对应的网格细节[^1]。此外,还可以利用Web Workers或者异步请求来避免阻塞主线程。 ```javascript // 动态控制网格层级显示 viewer.scene.globe.maximumScreenSpaceError = 2; // 控制地形精度 viewer.scene.postRender.addEventListener(function () { var currentZoomLevel = getCurrentZoomLevel(); // 自定义函数获取当前缩放级别 updateVisibleGridLevels(currentZoomLevel); // 更新可见网格层级 }); ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值