Cesium Vue（七）— GEOJSON数据展示

最新推荐文章于 2024-04-26 16:47:03 发布

iukam

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量705

点赞数

分类专栏： Cesium 文章标签： vue.js 前端 javascript cesium

本文链接：https://blog.csdn.net/qq_40120946/article/details/133944816

版权

Cesium 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. GeoJSON

GeoJSON 是一种用于对各种地理数据结构进行编码的格式。

简而言之，GeoJSON为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。

结构：

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

GeoJSON 对象可以定义以下内容：

空间中的几何对象：例如，点、线串或多边形等。
特征：特征是空间有界的实体。
特征集合：也称为 FeatureCollection

2. 加载GeoJSON

这里用到DataV.GeoAtlas地理小工具系选择中国地图 => JSON API

请添加图片描述

实现脚本

  // https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

  // 加载geojson数据
  let dataGeo = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
    // , //添加颜色修改   
    // {
    //   stroke: Cesium.Color.RED,
    //   fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
    //   strokeWidth: 4,
    // }


  );
  console.log(dataGeo);
  viewer.dataSources.add(dataGeo);

请添加图片描述

3. GEOJSON样式修改

颜色修改

  let dataGeo = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
    , //添加颜色修改   
    {
      stroke: Cesium.Color.RED,
      fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
      strokeWidth: 4,
    }


  );
  viewer.dataSources.add(dataGeo);

形状修改

  dataGeo.then((dataSources) => {
    console.log(dataSources);
    viewer.dataSources.add(dataSources);
    let entities = dataSources.entities.values;
    entities.forEach((entity, i) => {
      entity.polygon.material = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromRandom({
          alpha: 1,
        })
      );
      entity.polygon.outline = false;
      let randomNum = parseInt(Math.random() * 5);
      entity.polygon.extrudedHeight = 100000 * randomNum;
    });
  });