cesium地图根据经纬度画网格线

该代码示例展示了如何在Cesium地图上绘制经度和纬度线,并添加标注。通过循环遍历经度和纬度值,创建polyline和label实体,用白色线条表示经度线,文本标注显示度数。同时,调整图像渲染和抗锯齿设置以优化视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 绘制经纬度
    const entities = viewer.entities;
    for (let longitude = -180; longitude <= 180; longitude += 20) {
        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);
    }
    //每隔10读绘制一条纬度线和纬度标注,自己控制间隔
    for (let lat = -80; lat <= 80; lat += 10) {
        let text = "";
        text += "" + lat + "°";
        if (lat === 0) {
            text = "";
        }
        console.log(lat, '---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,
            },
        });
    }
    // 抗锯齿
    if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        viewer.resolutionScale = window.devicePixelRatio;
    }
    //开启抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = true;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值