Cesium中加载Geojson

末蓝、 2021-09-02 09:38 1004阅读 0赞

首先要下载安装Cesium ，见：[https://blog.csdn.net/qq\_40323256/article/details/108475669][https_blog.csdn.net_qq_40323256_article_details_108475669]

此demo官网示例：[https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html][https_sandcastle.cesium.com_src_GeoJSON_20and_20TopoJSON.html]

代码实现

效果图

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

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

<template>
      <div class="home">
        <el-button type="primary" @click="addGeoJson()">addGeoJson</el-button>
        <div id="cesiumContainer"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          viewer: {}
        };
      },
      components: {},
      created() {},
      mounted() {
        this.viewer = new Cesium.Viewer("cesiumContainer");
      },
      computed: {},
      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);
    
          var entities = res.entities.values;
          var colorHash = {};
          for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            var name = entity.name;
            var 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.extrudedHeight = entity.properties.childrenNum * 5000; //高度扩大5000倍，便于观察
          }
        }
      }
    };
    </script>
    
    <style scoped lang="scss">
    .home {
      height: 100vh;
      #cesiumContainer {
        height: 100%;
        border: 1px solid gray;
      }
    }
    </style>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

[https_blog.csdn.net_qq_40323256_article_details_108475669]: https://blog.csdn.net/qq_40323256/article/details/108475669
[https_sandcastle.cesium.com_src_GeoJSON_20and_20TopoJSON.html]: https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/633b9a82fb524ef4a976e221c5595b36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/03ac7007c67e426f8b0f9e8117485bd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/7ef8651343a34ebbb8154cd72811b089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/c827519df469472ea72897ac17940ea5.png