Cesium绘制经纬度栅格&网格抗锯齿

Cesium绘制经纬度栅格&栅格平滑抗锯齿

此篇博客主要讲述Cesium 绘制经纬度栅格网络及平滑显示栅格经纬度曲线功能.查了一些资料,感谢下边两位大佬的分享绘制经纬度及标注和 Cesium画线不光滑.本人是站在巨人的肩膀上完成此篇博客.

主要实现方法很简单就是,循环在三维球上绘制polyline,经纬度叠加后呈现出来的就是经纬度网格效果;

一.绘制经度线

const viewer = new Cesium.Viewer("cesiumContainer");
const entities = viewer.entities;
//每隔20读绘制一条经度线和经度标注,自己控制间隔
for (let lang = -180; lang <= 180; lang += 20) {
  let text = "";
  if (lang === 0) {
    text = "0";
  }
  text += lang === 0 ? "" : "" + lang + "°";
  if (lang === -180) {
    text = "";
  }

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(lang, 0),
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        lang,
        -90,
        lang,
        0,
        lang,
        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 lang = -180; lang <= 180; lang += 5) {
  langS.push(lang);
}
//每隔10读绘制一条纬度线和纬度标注,自己控制间隔
for (let lat = -80; lat <= 80; lat += 10) {
  let text = "";
  text += "" + lat + "°";
  if (lat === 0) {
    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,
    },
  });
}

完成以上两步,三维球即可显示绘制出的经纬度栅格.如图所示,拉近视角可以看出绘制经纬线呈锯齿状;只有在垂直视角才会显示为一条直线;这就需要参考第二篇文章了.

三.设定分辨率,配置Cesium抗锯齿;

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

Cesium Sandcastle查看效果及代码.

问题

1. 开启抗锯齿,只是把突出的锯齿磨掉了.polyline还是会明暗隔间,未找到优化方法,欢迎指教.
2. 因为绘制的是一段一段的曲线,所以高度拉到500以下超出循环绘制范围时,绘制的经纬度线会显示为虚线.我的处理方法是,判断相机高度.低于1km隐藏栅格线.

希望此篇博客对大家有帮助.上边两个问题有更好的优化方法也请不吝赐教.
到此结束,转载请注明出处,有错误欢迎指教,喜欢欢迎点赞哈!