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

最新推荐文章于 2024-08-01 17:07:58 发布
最新推荐文章于 2024-08-01 17:07:58 发布
阅读量1.1k 收藏 6
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/irisMoon06/article/details/130499319
版权
该代码段展示了如何在Vue项目中集成Cesium库，创建地图视图，设置初始位置，处理鼠标滚轮事件以改变视角层级，并根据层级变化动态绘制不同精度的网格。此外，还涉及到Turf.js库用于地理计算，以及加载和操作地图上的多边形区域。
摘要由CSDN通过智能技术生成 
<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.fromDegreesArray([
                70, 60,
                80, 60,
                90, 60,
                100, 60,
                110, 60,
                120, 60,
                130, 60,
                140, 60,
                140, 0,
                130, 0,
                120, 0,
                110, 0,
                100, 0,
                90, 0,
                80, 0,
                70, 0,
            ]),
            height: 0,
            material: Cesium.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

    // viewer.zoomTo(wyoming);
    // wyoming.polygon.material = new Cesium.GridMaterialProperty({
    //     color: Cesium.Color.YELLOW,
    //     cellAlpha: 0.2,
    //     lineCount: new Cesium.Cartesian2(8, 8),
    //     lineThickness: new Cesium.Cartesian2(2.0, 2.0)
    // });

    // onPlotLatitudeLongitude(10, 10)
    // 抗锯齿
    if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        viewer.resolutionScale = window.devicePixelRatio;
    }
    //开启抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = true;

    // 获取地图当前层级
    const handle3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    //监听鼠标滚轮事件
    handle3D.setInputAction(() => {
        var level = Math.ceil(viewer.camera.positionCartographic.height);
        let results = getHeightByLevel(level);
        // getViewExtend();
        getCenterPosition()
        let temp = 1;
        console.log(results, '---results');
        if (results < 3) {
            temp = 1
            if (saveLevel != temp) {
                saveLevel = temp;
                // viewer.entities.removeAll()
                // onPlotLatitudeLongitude(10, 10)
            }

        } else if (results >= 4 && results < 7) {
            temp = 2
            if (saveLevel != temp) {
                saveLevel = temp;
                // viewer.entities.removeAll()
                // onPlotLatitudeLongitude(5, 5)
                cuttingLatitudeLongitude()
            }
        } else if (results >= 7 && results < 10) {
            temp = 3
            if (saveLevel != temp) {
                saveLevel = temp;
                // viewer.entities.removeAll()
                // onPlotLatitudeLongitude(1, 1)
            }
        } else if (results >= 10 && results <= 16) {
            temp = 4
            if (saveLevel != temp) {
                saveLevel = temp;
                // viewer.entities.removeAll()
                // onPlotLatitudeLongitude(0.05, 0.05)
            }
        }
    }, Cesium.ScreenSpaceEventType.WHEEL);

    // new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    //     .setInputAction((movement) => {
    //         console.log(movement)
    //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (event) {
        let cartesian = viewer.scene.pickPosition(event.position);
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        let alt = cartographic.height; // 高度
        let coordinate = {
            longitude: Number(lng.toFixed(6)),
            latitude: Number(lat.toFixed(6)),
            altitude: Number(alt.toFixed(2))
        };
        console.log(coordinate);
        // console.log(gridArr, '---gridArr');
        // gridArr.map(v => {
        //     console.log(v,'---v');
        // })

        var pt = turf.point([coordinate.longitude, coordinate.latitude]);
        for (let i = 0; i < dealArr.length; i++) {
            var poly = turf.polygon([dealArr[i]]);
            if (turf.booleanPointInPolygon(pt, poly) == true) {
                const entities = viewer.entities;
                entities.add({
                    name: '',
                    polygon: {
                        hierarchy: Cesium.Cartesian3.fromDegreesArray([
                            dealArr[i][0][0],
                            dealArr[i][0][1],
                            dealArr[i][1][0],
                            dealArr[i][1][1],
                            dealArr[i][2][0],
                            dealArr[i][2][1],
                            dealArr[i][3][0],
                            dealArr[i][3][1],
                        ]),
                        height: 0,
                        material: Cesium.Color.YELLOW.withAlpha(0.5),
                        outline: true,
                        outlineColor: Cesium.Color.BLACK
                    }
                });
            }
        }

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    let largePosition = [{
        label: '左上',
        longitude: 70,
        latitude: 60,
    }, {
        label: '右上',
        longitude: 140,
        latitude: 60,
    }, {
        label: '右下',
        longitude: 140,
        latitude: 0,
    }, {
        label: '左下',
        longitude: 60,
        latitude: 0,
    }];

    for (let n = largePosition[0].latitude; n > largePosition[2].latitude; n = n - 10) {
        let temp = [];
        for (let m = largePosition[0].longitude; m < largePosition[1].longitude; m = m + 10) {
            let cellArr = [];
            cellArr.push({
                longitude: m,
                latitude: n,
            })
            cellArr.push({
                longitude: m + 10,
                latitude: n,
            })
            cellArr.push({
                longitude: m + 10,
                latitude: n - 10,
            })
            cellArr.push({
                longitude: m,
                latitude: n - 10,
            })

            temp.push(cellArr)
        }
        gridArr.push(temp)
    }
    // console.log(gridArr, '---temp');

})

// 获取level层
const getHeightByLevel = (level) => {
    var A = 40487.57;
    var B = 0.00007096758;
    var C = 91610.74;
    var D = -40467.74;
    return Math.round(D + (A - D) / (1 + Math.pow(level / C, B)));
};

// 绘制经纬度
const onPlotLatitudeLongitude = (e1, e2) => {
    const entities = viewer.entities;
    for (let longitude = -180; longitude <= 180; longitude += e1) {
        let text = "";
        if (longitude === 0) {
            text = "0";
        }
        text += longitude === 0 ? "" : "" + longitude + "°";
        if (longitude === -180) {
            text = "";
        }
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(longitude, 0),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    longitude,
                    -90,
                    longitude,
                    0,
                    longitude,
                    90,
                ]),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
    let langS = [];
    for (let longitude = -180; longitude <= 180; longitude += 5) {
        langS.push(longitude);
    }
    let arr = [];
    //每隔10读绘制一条纬度线和纬度标注,自己控制间隔
    for (let lat = -80; lat <= 80; lat += e2) {
        let text = "";
        text += "" + lat + "°";
        if (lat === 0) {
            text = "";
        }
        arr.push(lat)
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(0, lat),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(
                    langS.map((long) => {
                        return [long, lat].join(",");
                    }).join(",").split(",").map((item) => Number(item))
                ),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
    // 二维数组
    let collectionArr = []
    for (let i = 0; i < langS.length; i++) {
        for (let n = 0; n < arr.length; n++) {
            // collectionArr.push([langS[i], arr[n]]);
        }
    }
    // console.log(collectionArr, '---collection');

}

const cuttingLatitudeLongitude = () => {
    const entities = viewer.entities;
    for (let longitude = 140; longitude >= 70; longitude -= 10) {
        let text = "";
        // if (longitude === 0) {
        //     text = "0";
        // }
        // text += longitude === 0 ? "" : "" + longitude + "°";
        // if (longitude === -180) {
        //     text = "";
        // }
        // console.log(longitude,'---longitude');
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(longitude, 0),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    longitude,
                    60,
                    longitude,
                    0,
                ]),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
    let langS = [];
    for (let longitude = 140; longitude >= 70; longitude -= 10) {
        langS.push(longitude);
    }
    // console.log(langS,'---langS');
    let arr = [];
    //每隔10读绘制一条纬度线和纬度标注,自己控制间隔
    for (let lat = 60; lat >= 0; lat = lat -= 10) {
        let text = "1";
        // text += "" + lat + "°";
        // if (lat === 0) {
        //     text = "";
        // }
        arr.push(lat)
        // console.log(arr, '---arr');
        // console.log(text, '---text');

        entities.add({
            position: Cesium.Cartesian3.fromDegrees(0, lat),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(
                    langS.map((long) => {
                        return [long, lat].join(",");
                    }).join(",").split(",").map((item) => Number(item))
                ),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }

    let almost = gridArr.length * gridArr[0].length

    let tempArr = []
    gridArr.forEach(v1 => {
        // console.log(v,'---v');
        v1.forEach(v2 => {
            let t = [];
            t = v2.map(v3 => {
                return [v3.longitude, v3.latitude]
            })
            t.push(t[0])
            // console.log(t, '---t');
            tempArr.push(t)
            // console.log(dealArr, '---dealArr');
        })
    })
    if (tempArr.length == almost) {
        dealArr = tempArr;
    }
}

// 获取当前屏幕的可视区域的经纬度【2D和3D】
// const getViewExtend = () => {
//   let params = {};
// //    viewer = cesiumGather.cesiumViewer;
//   let extend = viewer.camera.computeViewRectangle();
//   if (typeof extend === "undefined") {
//     //2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
//     let canvas = window.cesiumViewer.scene.canvas;
//     let upperLeft = new Cesium.Cartesian2(0, 0); //canvas左上角坐标转2d坐标
//     let lowerRight = new Cesium.Cartesian2(
//       canvas.clientWidth,
//       canvas.clientHeight
//     ); //canvas右下角坐标转2d坐标
//     let ellipsoid = window.cesiumViewer.scene.globe.ellipsoid;
//     let upperLeft3 = window.cesiumViewer.camera.pickEllipsoid(
//       upperLeft,
//       ellipsoid
//     ); //2D转3D世界坐标

//     let lowerRight3 = window.cesiumViewer.camera.pickEllipsoid(
//       lowerRight,
//       ellipsoid
//     ); //2D转3D世界坐标

//     let upperLeftCartographic =
//       window.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
//         upperLeft3
//       ); //3D世界坐标转弧度
//     let lowerRightCartographic =
//       window.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
//         lowerRight3
//       ); //3D世界坐标转弧度

//     let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude); //弧度转经纬度
//     let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude); //弧度转经纬度

//     let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude); //弧度转经纬度
//     let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude); //弧度转经纬度
//     params.minx = minx;
//     params.maxx = maxx;
//     params.miny = miny;
//     params.maxy = maxy;
//   } else {
//     //3D获取方式
//     params.maxx = Cesium.Math.toDegrees(extend.east);
//     params.maxy = Cesium.Math.toDegrees(extend.north);
//     params.minx = Cesium.Math.toDegrees(extend.west);
//     params.miny = Cesium.Math.toDegrees(extend.south);
//   }
//   console.log(params, "---------------ssss-----");
//   return params; //返回屏幕所在经纬度范围
// };

// 获取当前地图中心的经纬度
const getCenterPosition = () => {
    let centerResult = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(
            viewer.canvas.clientWidth / 2,
            viewer.canvas.clientHeight / 2,
        ),
    )
    let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
    let curLongitude = (curPosition.longitude * 180) / Math.PI;
    let curLatitude = (curPosition.latitude * 180) / Math.PI;
    // console.log(curLongitude, curLatitude, '---');
    // console.log(dealArr,'---dealArr');
    var pt = turf.point([curLongitude, curLatitude]);
    for (let i = 0; i < dealArr.length; i++) {
        var poly = turf.polygon([dealArr[i]]);
        if (turf.booleanPointInPolygon(pt, poly) == true) {
            if (saveLevel == 2) {
                console.log(dealArr[i],'---dealArr[i]');
                let startArr = [];
                startArr = JSON.parse(JSON.stringify(dealArr[i]));
                startArr.forEach(v => {
                    v[0] = v[0] - 20;
                    v[1] = v[1] + 20;
                })
              
                console.log(startArr,'---startArr');
                let surroundingsArr = []
                // surroundingsArr[0] = dealArr[i]
                // surroundingsArr[0][0] = dealArr[i][0]
                console.log(surroundingsArr,'---surroundingsArr');
                splitAgain(dealArr[i])
                // for (let k = 0; k < 9; k++) {
                //     const element = array[k];
                // }
            }
        }
    }
    return {
        lon: curLongitude,
        lat: curLatitude,
    }
}

// 当前九宫格再分割
const splitAgain = (dealArr) => {
    const entities = viewer.entities;
    for (let longitude = dealArr[0][0]; longitude <= dealArr[1][0]; longitude += 1) {
        let text = "";
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(longitude, 0),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    longitude,
                    dealArr[0][1],
                    longitude,
                    dealArr[2][1],
                ]),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
    let langS = [];
    for (let longitude = dealArr[0][0]; longitude <= dealArr[1][0]; longitude += 1) {
        langS.push(longitude);
    }
    // console.log(langS, '---langS');
    let arr = [];
    //每隔10读绘制一条纬度线和纬度标注,自己控制间隔
    for (let lat = dealArr[0][1]; lat >= dealArr[2][1]; lat = lat -= 1) {
        let text = "";
        arr.push(lat)
        entities.add({
            position: Cesium.Cartesian3.fromDegrees(0, lat),
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(
                    langS.map((long) => {
                        return [long, lat].join(",");
                    }).join(",").split(",").map((item) => Number(item))
                ),
                width: 1.0,
                material: Cesium.Color.WHITE,
            },
            label: {
                text: text,
                font: "12px sans-serif",
                fillColor: Cesium.Color.WHITE,
            },
        });
    }
}





</script>
  
<style lang="less" scoped></style>

 

irisMoon06
关注
Cesium Scene渲染（2）：网格构建
zhangiser的专栏
02-20 865
看完Scene的整体调度，我们来看地球的两个最重要部分，地形和影像。要搞清楚地形和影像如何渲染，我们还需要了解一下Cesium的网格构建。网格才是Cesium地球构建的方式，是地形数据和影像数据的载体
CesiumJS【Basic】- #085 当前视图的瓦片级别
AlanL的专栏
07-09 267
当前视图的瓦片级别
Cesium 关于获取地图层级Zoom
资深三维GIS开发
12-11 7659
经常看一些小伙伴问，在三维里如何获取当前的地图的层级。 首先明确的告诉大家一点，在Cesium里是获取不到当前的地图层级的，或者说获取不到明确的地图层级的，为什么那么说呢，看我以下的讲解！ 三维地图不像二维，在二维地图里比如加载某个瓦片地图，它是一个层级一个层级加载的，如下面是一个ol加载地图的截图。 我们来解析下这个url ：https://c.tile.openstreet...
cesium如何飞到指定层级
最新发布
(ง •̀_•́)ง
08-01 473
那么飞到指定层级首先获取当前相机位置 拿到经纬度。下方代码是cesium中视角高度转层级的代码。之后反转上方的代码 根据层级获取视角高度。根据获取的高度 调用flyTo方法。
cesium中level获取与换算
zhu_zhu_xia的博客
04-13 1469
因为三维本身大多数情况是一个有倾斜角度的场景，所以存在不同视距加载不同级别瓦片的情况，简单的说就是因为三维场景跟二维场景的差异，造成了在倾斜角会存在不同级别切片的问题，而现实存在的问题是我们需要判断不同级别显示不同的服务，比如影像、倾斜摄影、模型以便减轻前端的数据加载量加快显示的速度，让用户看到当前级别的数据。 1、获取当前场景level viewer.camera.moveEnd.addEventListener(function() { let tilesToRender = ...
cesium绘制网格_Cesium中级教程1 - 空间数据可视化（一）
weixin_39927158的博客
12-22 446
Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/本教程将教读者如何使用Cesium的实体(Entity)API绘制空间数据，如点、标记、标签、线、模型、形状和物体。不需要Cesium的先验知识，但是如果读者完全没有这方面的经验，那么读者可能希望从“新手入门中文教程(原创)”开始学习。什么是实体(Entity)AP...
cesium获取当前层级
A873054267的博客
01-11 9882
与二维不同，cesium其实没有层级的概念，二维之中当前层级是由zoom来控制，但是三维，视角的范围全靠视角高度来控制。 var currentMagnitude = viewer.camera.getMagnitude(); console.log('currentMagnitude - ' + currentMagnitude); viewer.camera.zoomIn((1000000...
cesium获取当前屏幕可视区域及level层
qq_43474235的博客
03-26 1435
在查看cesium文档时，根本找不到对应的获取层级的api,因为在三维区域只能获取到相机的高度，为此通过相机高度计算level层。获取当前屏幕的可视区域的经纬度。
Cesium 实时获取地图级别
QQhelphelp的博客
01-16 1072
Cesium 实时获取当前地图级别
Cesium 地图分级分片显示
资深三维GIS开发
04-22 2515
要求： 页面加载时展示中国范围地图； 双击局部缩放到局部范围，并且不展示中古地图； 局部地图缩放到一定层级，加载在线地图以提高地图精度； 一级： 二级： 三级：三级为互联网在线地图 关于地球的隐藏设置： 以上前两级的时候，我们都没展示Cesium的球，所以要对Cesium的球做一个隐藏，以下是部分代码： viewer.scene.globe.showGroundAtmosphere = false viewer.scene.skyAtmosphere.show = false ...
053：cesium显示网格切片标识，展示X、Y、Level 坐标
大剑师兰特的GIS世界
04-25 968
第053个本示例的目的是介绍如何在vue+cesium中加载瓦片网格切分标识地图。，它在切片方案中的每个渲染图块周围绘制一个框，并在其中绘制一个标签，指示图块的 X、Y、Level 坐标。这主要用于调试地形和图像渲染问题。
Cesium (五) 栅格图层
多多
07-09 6904
Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面。这些图层的亮度、对比度、色相均可以动态调整： //初始化一个查看器，并且提供一个栅格图层 var viewer = new Cesium.Viewer( 'cesiumContainer', { imageryProvider : new Cesium.ArcGisMapServerImageryProvid
百分点大数据技术团队：Cesium技术在智慧应急行业的应用
Percent_bigdata的博客
09-19 1583
编者按：社会发展进程中，城市建设规模不断扩大，日渐复杂的社会系统衍生出大量复杂性风险，应急新需求也与日俱增，各应急场景中三维地图的建设和应用已经越来越迫切。Cesium技术能够提供基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能、精度、渲染质量等方面都有高质量的保证，是应急行业系统GIS可视化的重要应用。本文从当前的市场需求及面临的问题出发，结合百分点科技多个项目的建设经验，从不同维度介绍了Cesium技术在智慧应急行业的应用。一、Cesium介绍目前，三维空间
Cesium原理篇：glTF
vnddtt3b的专栏
02-15 7541
关键字：Cesium glTF WebGL技术 大纲： 1 glTF简介，这是一个什么东西，有哪些特点 2 Cesium如何加载，渲染glTF，逻辑结构和关键技术 3 个人总结，从glTF学习如何设计一个二进制格式，个人想法分享 共计 4000字 | 建议阅读时间 未知 1 glTF简介        之前介绍了Cesium的Property，Material，Batch，Groun
cesium绘制网格_Cesium (五) 栅格图层
weixin_30638387的博客
12-31 885
Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面。这些图层的亮度、对比度、色相均可以动态调整：//初始化一个查看器，并且提供一个栅格图层var viewer = new Cesium.Viewer( 'cesiumContainer', {imageryProvider : new Cesium.ArcGisMapServerImageryProvider( {url...
Cesium：网格绘制
席木木的博客
12-02 1393
Cesium：网格绘制示例代码
《Cesium 进阶知识点》- 获取当前场景的级别
前端技术
08-30 1164
获取场景的级别信息
Cesium解决方案 绘制网格 绘制经纬度栅格
HMS Howe的学习笔记
04-08 3699
Cesium解决方案 绘制网格 绘制经纬度栅格
Cesium 计算level
既然青春留不住，还是做个大叔好!
02-01 1293
From https://stackoverflow.com/questions/33502620/cesium-js-how-to-get-each-tiles-level Q1 Cesium.js How to get each tiles’ level? I am trying to get each tiles’ rectangle and level in current view, and use these information to do some ajax request. Now I
cesium中根据视角大小动态改变粒子系统大小
06-07
在Cesium中动态改变粒子系统大小可以通过在粒子系统的更新过程中修改粒子的缩放因子来实现。具体来说，可以通过以下代码实现： ```javascript // 获取相机视角大小 var frustum = viewer.camera.frustum; var fov = Cesium.Math.toDegrees(frustum.fovy); // 根据视角大小计算缩放因子 var scale = 1.0 / Math.tan(Cesium.Math.toRadians(fov / 2.0)); // 遍历粒子系统中的粒子，并修改其缩放因子 var particleSystem = ... // 获取粒子系统对象 var particles = particleSystem.getParticles(); for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.scale = scale; } ``` 在这段代码中，首先获取相机的视角大小，然后根据视角大小计算出缩放因子。接着，遍历粒子系统中的所有粒子，并将它们的缩放因子都设置为计算得到的缩放因子。这样就可以根据相机的视角大小动态改变粒子系统的大小了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值