Cesium 绘制经纬网，方格里不显示经纬度

---

前言

其实调用图层叠加是最好的方式，又省事。但是也记录一下前端自己生成的吧。

---

效果图如下：

1、具体代码

/**
 * 经纬网实现
 */
import {
  Color,
  Cartographic,
  Cartesian3,
  PolylineCollection,
  PolylineDashMaterialProperty
} from "cesium";
export class Graticules {
  constructor(viewer, options) {
    this.viewer = viewer;
    this.lines = this.viewer.scene.primitives.add(new PolylineCollection());
    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;

    // 移除 attribution 标志
    this.viewer._cesiumWidget._creditContainer.style.display = "none";
    // 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
        // material: PolylineDashMaterialProperty({
        //   color: Cesium.Color.WHITE.withAlpha(0.5)
        // })
        // material: this.color  // 加上材质报错
      });
    }
  }
  // 绘制纬线
  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
        // material: PolylineDashMaterialProperty({
        //   color: Cesium.Color.WHITE.withAlpha(0.5)
        // })
        // material: this.color
      });
    }
  }

  render() {
    console.log("执行");
    this.drawLongLines();
    this.drawLatLines();
    return this.lines;
  }

  clear() {
    this.lines.removeAll();
  }

  destroy() {
    this.lines.destroy();
  }
}

2、使用 

<script>
import { Graticules } from "@/utils/map/Graticules";
export default {
  data() {
    return {
    };
  },
  mounted() {
    if (window.viewer) {
       let newMap = new Graticules(window.viewer);
       newMap.render();
     }
  },
</script>

---

总结

发现同事调用的图层，代码更加简洁，但API明显是用的公司封装的，等问清楚了 再来补充