Cesium绘制经纬网

老四点COM

已于 2024-03-01 09:44:18 修改

阅读量949

点赞数 9

分类专栏： cesium 文章标签：前端 javascript 开发语言

于 2024-02-21 14:43:44 首次发布

本文链接：https://blog.csdn.net/m0_57715356/article/details/136211168

版权

cesium 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Cesium库在地图上绘制自定义经纬网，并为经度和纬度添加标注。作者展示了如何创建Graticules类，实现经线和纬线的绘制以及经纬度标签的管理。

摘要由CSDN通过智能技术生成

此篇博客主要基于vanora1111博主绘制经纬网文章进行添加经纬度标注。


/**
 * 经纬网实现
 */
 import {
    Color,
    Cartographic,
    Cartesian3,
    PolylineCollection,
  } from "cesium";
  export class Graticules {
    constructor(viewer, options) {
        this.viewer = viewer;
        this.lines = this.viewer.scene.primitives.add(new PolylineCollection());
        this.entities = this.viewer.entities;
        this.color = Color.fromCssColorString("#ffffff").withAlpha(0.5);
        this.width = options?.width ?? 1;
        this.viewer.scene.globe.enableLighting = false; // 禁用灯光照射
    
        // 隐藏默认的经纬网格
        this.viewer.scene.globe.showGroundAtmosphere = false;
        this.viewer.scene.globe.showWaterEffect = false;
        this.label = []
        // 移除 attribution 标志
        this.viewer._cesiumWidget._creditContainer.style.display = "none";
        this.polylineLabelMap = new Map(); // 用于跟踪折线和标签的映射
        // this.render();
    }
    // 绘制经线
    drawLongLines() {

        for (let lon = -180; lon <= 180; lon += 10) {
            const positions = [];
            for (let lat = -90; lat <= 90; lat += 1) {
                const cartographic = Cartographic.fromDegrees(lon, lat);
                const position =
                    this.viewer.scene.globe.ellipsoid.cartographicToCartesian(
                    cartographic
                    );
                positions.push(position);
            }

            this.lines.add({
                positions: positions,
                width: this.width,
            })
            this.label.push(this.viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(lon, 360),
                label : {
                    text : lon.toString()+'°',
                    font: '18px sans-serif',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                }
            }))
        }

    }
    // 绘制纬线
    drawLatLines() {
      // 计算纬度线的位置
      for (let lat = -90; lat <= 90; lat += 10) {
        const positions = [];
        for (let lon = -180; lon <= 180; lon += 1) {
          const cartographic = Cartographic.fromDegrees(lon, lat);
          const position =
            this.viewer.scene.globe.ellipsoid.cartographicToCartesian(
              cartographic
            );
          positions.push(position);
        }
        this.lines.add({
          positions: positions,
          width: this.width
        });

        this.label.push(this.viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(180,lat),
            label : {
                text : lat.toString()+'°',
                font: '18px sans-serif',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                clampToGround: true,
            }
        }))
      }
    }
   
    render() {
      this.drawLongLines();
      this.drawLatLines();
      return this.lines;
    }
   
    clear() {
      this.lines.removeAll();
      this.clearLabel()
    }
   
    destroy() {
      this.lines.destroy();
      this.clearLabel()
    }
    clearLabel() {
        this.label.forEach((item) => {
            this.viewer.entities.remove(item);
        })
    }
  }

import { Graticules } from "@/utils/map/graticules";

let newMap
let graticulesFlag = ref(false)

if(!newMap){
    newMap = new Graticules(earthViewer.basicMap3d.viewer);
}
graticulesFlag.value = !graticulesFlag.value
if (graticulesFlag.value) {
    newMap.render();
} 
else {
    newMap.clear();
}

在此感谢！

文章链接Cesium 绘制经纬网，方格里不显示经纬度_cesium构建网格-CSDN博客

vanora1111https://blog.csdn.net/vanora1111