Cesium学习笔记5——加载topojson和Geojson

WALL*E

发布时间 2023.12.05阅读数 939 评论数 0

在根目录下新建bucket.css
@import”../Build/CesiumUnminified/Widgets/widgets.css”;@import”../Build/CesiumUnminified/Widgets/lighter.css”;html{height:100%}body{background:#000;color:#eee;font-family:sans-serif;font-size:9pt;padding:0;margin:0;width:100%;height:100%;overflow:hidden}.fullSize{display:block;position:absolute;top:0;left:0;border:none;width:100%;height:100%}#loadingOverlay{position:absolute;top:0;left:0;opacity:.9;width:100%;height:100%;display:none}#loadingOverlay h1{text-align:center;position:relative;top:50%;margin-top:-.5em}.sandcastle-loading #loadingOverlay{display:block}.sandcastle-loading #toolbar{display:none}#toolbar{margin:5px;padding:2px 5px;position:absolute}.infoPanel{background:rgba(42,42,42,.8);padding:4px;border:1px solid #444;border-radius:4px}

新建代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Load GeoJSON or TopoJSON data and apply custom styling.">
    <meta name="cesium-sandcastle-labels" content="Showcases, Tutorials, DataSources">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
      @import url(bucket.css);
      html,
      body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
window.startup = async function (Cesium) {
    'use strict';
//Sandcastle_Begin
const viewer = new Cesium.Viewer("cesiumContainer", {
      timeline:false,
        animation:false,
        infoBox:false,
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的Token" ,
            layer: "vec",
            style: "default",
            tileMatrixSetID: "w",
            format: "tiles",
            maximumLevel: 18,
        }),
    });

//Example 1: Load with default styling.
Sandcastle.addDefaultToolbarButton("Default styling", function () {
  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(
      "../ne_10m_us_states.topojson"
    )
  );
});

//Example 2: Load with basic styling options.
Sandcastle.addToolbarButton("Basic styling", function () {
  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(
      "../ne_10m_us_states.topojson",
      {
        stroke: Cesium.Color.HOTPINK,
        fill: Cesium.Color.PINK.withAlpha(0.5),
        strokeWidth: 3,
      }
    )
  );
});

//Example 3: Apply custom graphics after load.
Sandcastle.addToolbarButton("Custom styling", function () {
  //Seed the random number generator for repeatable results.
  Cesium.Math.setRandomNumberSeed(0);

  const promise = Cesium.GeoJsonDataSource.load(
    "../ne_10m_us_states.topojson"
  );
  promise
    .then(function (dataSource) {
      viewer.dataSources.add(dataSource);

      //Get the array of entities
      const entities = dataSource.entities.values;

      const colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        const entity = entities[i];
        const name = entity.name;
        let color = colorHash[name];
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1.0,
          });
          colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = color;
        //Remove the outlines.
        entity.polygon.outline = false;

        //Extrude the polygon based on the state's population.  Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight =
          entity.properties.Population / 50.0;
      }
    })
    .catch(function (error) {
      //Display any errrors encountered while loading.
      window.alert(error);
    });
});

//Reset the scene when switching demos.
Sandcastle.reset = function () {
  viewer.dataSources.removeAll();

  //Set the camera to a US centered tilted view and switch back to moving in world coordinates.
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
    new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0)
  );
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
};
//Sandcastle_End
    Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    window.startup(Cesium).catch((error) => {
      "use strict";
      console.error(error);
    });
}
</script>
</body>
</html>

效果：

代码 Cesium 虚拟数字地球 topojson Geojson

转载原出处：https://www.cnblogs.com/yhlx125/p/17541167.html

打赏 0

上一篇：Cesium学习笔记4——加载天地图地图服务

下一篇：Cesium学习笔记6——加载倾斜摄影模型

Cesium学习笔记5——加载topojson和Geojson

WALL*E

为你推荐

Makefile项目管理-----在Linux下编译c/c++程序

ESP32 bin文件生成及多个bin文件合并指南

STM32复习笔记（六）看门狗

智能机器人-（三）轮式，足式机器人的基本概念

精选电赛知识补充——小零件篇

精选信息论 (Information Theory): Introduction and information measures

关于作者

WALL*E

15

0

0

2

Cesium学习笔记10——通过WFS服务实现交互式属性查询

Cesium学习笔记5——加载topojson和Geojson

Cesium学习笔记4——加载天地图地图服务

相关推荐

精选轮廓检测中cv.findContours报错ValueError: not enough values to unpack (expected 3, got 2)

如何理解信号处理/自控原理中的bode图，并分析系统？

configparser模块和PyYAML模块生成和修改配置文件

ubuntu学习篇3——SecureCRT安装与配置

机器人算法工程师入门指南（三）机器人算法工程师需要学习哪些知识？（及教材推荐）

Deep manta算法解析

热门泡泡

30积分失眠，聊聊自己搞ROS的心得体会吧

ros学习路线

30积分 TF_REPEATED_DATA ignoring data错误

各位大佬，有什么ROS定位算法推荐吗

5积分想买能用ROS2的开发套件。或者开发板

5积分 ros中启动gazebo时报错

给作者打赏

Cesium学习笔记5——加载topojson和Geojson

WALL*E

为你推荐

Makefile项目管理-----在Linux下编译c/c++程序

ESP32 bin文件生成及多个bin文件合并指南

STM32复习笔记（六）看门狗

智能机器人-（三）轮式，足式机器人的基本概念

精选电赛知识补充——小零件篇

精选信息论 (Information Theory): Introduction and information measures

评论（0）

关于作者

WALL*E

15

0

0

2

Cesium学习笔记10——通过WFS服务实现交互式属性查询

Cesium学习笔记5——加载topojson和Geojson

Cesium学习笔记4——加载天地图地图服务

相关推荐

精选轮廓检测中cv.findContours报错ValueError: not enough values to unpack (expected 3, got 2)

如何理解信号处理/自控原理中的bode图，并分析系统？

configparser模块和PyYAML模块生成和修改配置文件

ubuntu学习篇3——SecureCRT安装与配置

机器人算法工程师入门指南（三）机器人算法工程师需要学习哪些知识？（及教材推荐）

Deep manta算法解析

热门泡泡

30积分 失眠，聊聊自己搞ROS的心得体会吧

ros学习路线

30积分 TF_REPEATED_DATA ignoring data错误

各位大佬，有什么ROS定位算法推荐吗

5积分 想买能用ROS2的开发套件。或者开发板

5积分 ros中启动gazebo时报错

给作者打赏

忘记密码

修改头像

添加你感兴趣的标签

举报类型（必选）

举报详情（选填）

30积分失眠，聊聊自己搞ROS的心得体会吧

5积分想买能用ROS2的开发套件。或者开发板