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

最新推荐文章于 2025-04-23 10:20:25 发布

原创最新推荐文章于 2025-04-23 10:20:25 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

该代码示例展示了如何在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;