Cesium中加载Geojson

首先要下载安装Cesium ，见：VueCli3中加载Cesium.js_李疆的博客-CSDN博客_vue3 使用cesium

此demo官网示例：Cesium Sandcastle

在线预览：WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=100&example_name=loadGeojson&title=%E5%8A%A0%E8%BD%BDgeojson%E6%95%B0%E6%8D%AE

 

sichuan.json下载地址：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

 代码实现

<template>
  <div style="height: 100vh">
    <el-button type="primary" @click="addGeoJson()">addGeoJson</el-button>
    <div id="cesiumContainer" style="height: 100%" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      viewer: {},
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer("cesiumContainer");
  },
  methods: {
    addGeoJson() {
      this.viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load("sichuan.json")
      );
    },
  },
};
</script>

效果图

cesium自带属性查询功能，如下：

还可以给图层添加颜色：（注意：颜色单词必须大写！！！）

    async addGeoJson() {
      let res = await Cesium.GeoJsonDataSource.load("sichuan.json", {
        stroke: Cesium.Color.WHITE,
        fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
        strokeWidth: 5,
      });
      console.log("res", res);
      this.viewer.dataSources.add(res);
    },

这里的load（）函数返回的是一个promise 

 此外，可以根据各个市区中的某个属性大小（这里以市区里区县个数为例），将市区以三维形式展示，代码如下：

<template>
  <div style="height: 100vh">
    <el-button type="primary" @click="addGeoJson()">addGeoJson</el-button>
    <div id="cesiumContainer" style="height: 100%" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      viewer: {},
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer("cesiumContainer");
  },
  methods: {
    async addGeoJson() {
      let res = await Cesium.GeoJsonDataSource.load("sichuan.json", {
        stroke: Cesium.Color.WHITE,
        fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
        strokeWidth: 5,
      });
      this.viewer.dataSources.add(res);

      let entities = res.entities.values;
      let colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        let name = entity.name;
        let color = colorHash[name];
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1,
          });
          colorHash[name] = color;
        }
        entity.polygon.material = color;
        entity.polygon.outline = false;
        entity.polygon.extrudedHeight = entity.properties.childrenNum * 5000; //高度扩大5000倍，便于观察
      }
    },
  },
};
</script>

效果图

在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=102&example_name=loadGeojson3&title=%E5%8A%A0%E8%BD%BDgeojson3