Cesium加载Geojson并设置贴地

Cesium环境搭建请参考：

Cesium+vue 环境部署（一）_mouka~的博客-CSDN博客_cesium vue

1. Geojson文件可以用以下方式获取

• 通过QGIS软件右键图层另存为导出
• geojson.io生成json

2. 加载json数据

let gjson = require("@/assets/lj.json");
    Cesium.Math.setRandomNumberSeed(0); //设置随机数种子
    let promise = Cesium.GeoJsonDataSource.load(gjson, {
      clampToGround: true
    }); //geojson面数据

数据最终都要加载view中 viewer.dataSources.add(dataSource)

3.解决数据贴地显示

// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

导致了我们加载后出现数据显示不完整

这时候有的网页百度就会出现viewer.scene.globe.depthTestAgainstTerrain = false（竟然发现奇迹般的在上面了，这种做法在视觉上是将添加的数据放在了地图（没有地形数据）上面）

添加地形后，拖动地图发现面数据没有贴在地形上，给人感觉是在地形上方的某个位置，拖动视角会对地形数据进行不同位置的遮挡，这并不是我们想要的效果（可自行拖动试试看）。

let viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),添加地形
      animation: false //左下角图案
    });

我们通过添加clampToGround: true来实现贴地（这才是我们想要的贴地效果）

let viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
      animation: false //左下角图案
    });

    viewer.scene.globe.depthTestAgainstTerrain = false;

    let gjson = require("@/assets/lj.json");
    Cesium.Math.setRandomNumberSeed(0); //设置随机数种子
    let promise = Cesium.GeoJsonDataSource.load(gjson, {
      clampToGround: true
    }); //geojson面数据

4. 完整代码（没有name属性就随便赋一个固定的颜色即可）：

 let viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
      animation: false //左下角图案
    });

    viewer.scene.globe.depthTestAgainstTerrain = false;

    let gjson = require("@/assets/lj.json");
    Cesium.Math.setRandomNumberSeed(0); //设置随机数种子
    let promise = Cesium.GeoJsonDataSource.load(gjson, {
      clampToGround: true
    }); //geojson面数据
    promise.then(function(dataSource) {
      viewer.dataSources.add(dataSource);
      let entities = dataSource.entities.values;
      let colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        let name = entity.name; //geojson里面必须得有一个name属性，entity.name对应
        let color = colorHash[name]; //可以使两个同名要素使用同一种颜色。。。
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1.0
          });
          colorHash[name] = color;
        }
        entity.polygon.material = color; //设置要素颜色
        entity.polygon.outline = false;
        //entity.polygon.height = 10000; //要素距离地面的高度
        //entity.polygon.extrudedHeight = 1000;
      }
    });
    viewer.zoomTo(promise);

资源下载：Cesium+Vue-Javascript文档类资源-CSDN下载

QQ群（GIS开发交流、数据共享、软件使用）：993836992