在cesium地图中指定经纬度点绘制指定高度的柱子

已于 2023-07-26 17:28:08 修改
阅读量606 收藏
点赞数 1
分类专栏： cesium 文章标签： javascript 原型模式 开发语言 前端
于 2023-07-26 10:37:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/131933696
版权
本文提供了一个在Cesium地图上根据经纬度点和指定高度绘制柱子的代码示例。数据以JSON格式输入，包含经度、维度和高度信息。示例还展示了如何创建自定义的DataSource类来处理WebGLGlobe格式的数据，并提供了加载和显示数据的方法。
摘要由CSDN通过智能技术生成

文章目录

本文记录了在cesium地图中指定经纬度点绘制指定高度的柱子的代码。

一、效果展示

结果如下图示，在指定经纬度点绘制指定高度的柱子。

在这里插入图片描述

二、输入格式

输入的文件格式是json格式，数据格式如下所示，三个三个一组，分别是经度维度和高度。

 //WebGL Globe JSON is an array of series, where each series itself is an
//array of two items, the first containing the series name and the second
//being an array of repeating latitude, longitude, height values.
/
/Here's a more visual example.
      [["series1",[latitude, longitude, height, ... ]
       ["series2",[latitude, longitude, height, ... ]]

在这里插入图片描述

三、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- 包含 CesiumJS 的 JavaScript 和 CSS 文件 -->
  <script src="cesium/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="cesium/Build/Cesium/Widgets/widgets.css">
</head>

<body>
  <div id="cesiumContainer"></div>
  <script type="module">

    /**
 * 这个类是一个自定义 DataSource 的示例。它加载 Google 的 WebGL Globe（https://github.com/dataarts/webgl-globe）
 * 定义的 JSON 数据。
 * @alias WebGLGlobeDataSource
 * @constructor
 *
 * @param {string} [name] 此数据源的名称。如果未定义，将从 URL 中派生名称。
 *
 * @example
 * const dataSource = new Cesium.WebGLGlobeDataSource();
 * dataSource.loadUrl('sample.json');
 * viewer.dataSources.add(dataSource);
 */
    function WebGLGlobeDataSource(name) {
      // 所有公共配置都被定义为 ES5 属性
      // 这些是 "私有" 变量及其默认值。
      this._name = name;
      this._changed = new Cesium.Event();
      this._error = new Cesium.Event();
      this._isLoading = false;
      this._loading = new Cesium.Event();
      this._entityCollection = new Cesium.EntityCollection();
      this._seriesNames = [];
      this._seriesToDisplay = undefined;
      this._heightScale = 10000000;
      this._entityCluster = new Cesium.EntityCluster();
    }

    Object.defineProperties(WebGLGlobeDataSource.prototype, {
      // 以下属性必须由所有 DataSource 实例实现

      /**
       * 获取此实例的可读名称。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {String}
       */
      name: {
        get: function () {
          return this._name;
        },
      },
      /**
       * 由于 WebGL Globe JSON 不是时间动态的，此属性始终为未定义。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {DataSourceClock}
       */
      clock: {
        value: undefined,
        writable: false,
      },
      /**
       * 获取 Entity 实例的集合。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {EntityCollection}
       */
      entities: {
        get: function () {
          return this._entityCollection;
        },
      },
      /**
       * 获取一个值，指示数据源当前是否正在加载数据。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {Boolean}
       */
      isLoading: {
        get: function () {
          return this._isLoading;
        },
      },
      /**
       * 获取在底层数据发生变化时将被触发的事件。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {Event}
       */
      changedEvent: {
        get: function () {
          return this._changed;
        },
      },
      /**
       * 获取在处理过程中遇到错误时将被触发的事件。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {Event}
       */
      errorEvent: {
        get: function () {
          return this._error;
        },
      },
      /**
       * 获取数据源启动或停止加载时将被触发的事件。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {Event}
       */
      loadingEvent: {
        get: function () {
          return this._loading;
        },
      },

      // 这些属性特定于此 DataSource。

      /**
       * 获取系列名称的数组。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {string[]}
       */
      seriesNames: {
        get: function () {
          return this._seriesNames;
        },
      },
      /**
       * 获取或设置要显示的系列的名称。WebGL JSON 被设计为一次只能查看一个系列。
       * 有效值在 seriesNames 属性中定义。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {String}
       */
      seriesToDisplay: {
        get: function () {
          return this._seriesToDisplay;
        },
        set: function (value) {
          this._seriesToDisplay = value;

          // 遍历所有实体，并仅在它们属于当前系列时将其 show 属性设置为 true。
          const collection = this._entityCollection;
          const entities = collection.values;
          collection.suspendEvents();
          for (let i = 0; i < entities.length; i++) {
            const entity = entities[i];
            entity.show = value === entity.seriesName;
          }
          collection.resumeEvents();
        },
      },
      heightScale: {
        get: function () {
          return this._heightScale;
        },
        set: function (value) {
          if (value <= 0) {
            throw new Cesium.DeveloperError("value must be greater than 0");
          }
          this._heightScale = value;
        },
      },
      /**
       * 获取或设置应该显示此数据源的标志。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {Boolean}
       */
      show: {
        get: function () {
          return this._entityCollection;
        },
        set: function (value) {
          this._entityCollection = value;
        },
      },
      /**
       * 获取或设置此数据源的聚类选项。此对象可在多个数据源之间共享。
       * @memberof WebGLGlobeDataSource.prototype
       * @type {EntityCluster}
       */
      clustering: {
        get: function () {
          return this._entityCluster;
        },
        set: function (value) {
          if (!Cesium.defined(value)) {
            throw new Cesium.DeveloperError("value 必须被定义。");
          }
          this._entityCluster = value;
        },
      },
    });

    /**
     * 异步加载提供的 URL 中的 GeoJSON，替换任何现有数据。
     * @param {object} url 要处理的 URL。
     * @returns {Promise} 将在加载 GeoJSON 时解析的 Promise。
     */
    WebGLGlobeDataSource.prototype.loadUrl = function (url) {
      if (!Cesium.defined(url)) {
        throw new Cesium.DeveloperError("url 是必需的。");
      }

      // 根据 URL 创建一个名称
      const name = Cesium.getFilenameFromUri(url);

      // 如果名称与当前名称不同，则设置名称。
      if (this._name !== name) {
        this._name = name;
        this._changed.raiseEvent(this);
      }

      // 将 URL 加载到 json 对象中，然后用 'load' 函数处理它。
      const that = this;
      return Cesium.Resource.fetchJson(url)
        .then(function (json) {
          return that.load(json, url);
        })
        .catch(function (error) {
          // 如果出现任何错误或异常，将捕获并触发错误事件并拒绝 Promise。
          this._setLoading(false);
          that._error.raiseEvent(that, error);
          return Promise.reject(error);
        });
    };

    /**
     * 加载提供的数据，替换任何现有数据。
     * @param {Array} data 要处理的对象。
     */
    WebGLGlobeDataSource.prototype.load = function (data) {
      //>>includeStart('debug', pragmas.debug);
      if (!Cesium.defined(data)) {
        throw new Cesium.DeveloperError("data 是必需的。");
      }
      //>>includeEnd('debug');

      // 清除可能已经存在的任何数据。
      this._setLoading(true);
      this._seriesNames.length = 0;
      this._seriesToDisplay = undefined;

      const heightScale = this.heightScale;
      const entities = this._entityCollection;

      // 当对大量实体进行更改时，最好在 suspendEvents 中暂停事件。
      // 这将使事件被批处理为最小的函数调用，并在处理结束时（调用 resumeEvents 时）全部发生。
      entities.suspendEvents();
      entities.removeAll();

      // WebGL Globe JSON 是一个系列的数组，其中每个系列本身是一个由两个项组成的数组，
      // 第一个项包含系列名称，第二个项是重复的纬度、经度、高度值数组。
      //
      // 这里有一个更直观的例子。
      //[["series1",[latitude, longitude, height, ... ]
      // ["series2",[latitude, longitude, height, ... ]]

      // 遍历每个系列
      for (let x = 0; x < data.length; x++) {
        const series = data[x];
        const seriesName = series[0];
        const coordinates = series[1];

        // 将系列名称添加到我们可能值的列表中。
        this._seriesNames.push(seriesName);

        // 默认情况下使第一个系列可见
        const show = x === 0;
        if (show) {
          this._seriesToDisplay = seriesName;
        }

        // 现在遍历系列中的每个坐标，并从数据中创建我们的实体。
        for (let i = 0; i < coordinates.length; i += 3) {
          const latitude = coordinates[i];
          const longitude = coordinates[i + 1];
          const height = coordinates[i + 2];

          // 忽略高度为零的线条。
          if (height === 0) {
            continue;
          }

          const color = Cesium.Color.fromHsl(0.6 - height * 0.5, 1.0, 0.5);
          const surfacePosition = Cesium.Cartesian3.fromDegrees(
            longitude,
            latitude,
            0
          );
          const heightPosition = Cesium.Cartesian3.fromDegrees(
            longitude,
            latitude,
            height * heightScale
          );

          // WebGL Globe 只包含线条，所以这是唯一创建的图形。
          const polyline = new Cesium.PolylineGraphics();
          polyline.material = new Cesium.ColorMaterialProperty(color);
          polyline.width = new Cesium.ConstantProperty(2);
          polyline.arcType = new Cesium.ConstantProperty(
            Cesium.ArcType.NONE
          );
          polyline.positions = new Cesium.ConstantProperty([
            surfacePosition,
            heightPosition,
          ]);

          //Polyline 实例本身需要在一个实体上。
          const entity = new Cesium.Entity({
            id: `${seriesName} index ${i.toString()}`,
            show: show,
            polyline: polyline,
            seriesName: seriesName, // 自定义属性，指示系列名称
          });

          // 将实体添加到集合中。
          entities.add(entity);
        }
      }

      // 完成所有数据处理后，调用 resumeEvents 并触发 changed 事件。
      entities.resumeEvents();
      this._changed.raiseEvent(this);
      this._setLoading(false);
    };

    WebGLGlobeDataSource.prototype._setLoading = function (isLoading) {
      if (this._isLoading !== isLoading) {
        this._isLoading = isLoading;
        this._loading.raiseEvent(this, isLoading);
      }
    };

    // 现在我们已经定义了自己的 DataSource，我们可以使用它来加载
    // 任何针对 WebGL Globe 格式化的 JSON 数据。
    const dataSource = new WebGLGlobeDataSource();
    dataSource
      .loadUrl("cesium/Apps/SampleData/HLtest1.json")
      .then(function () {
        // 初始化加载后，创建按钮让用户在系列之间切换。
        function createSeriesSetter(seriesName) {
          return function () {
            dataSource.seriesToDisplay = seriesName;
          };
        }

        for (let i = 0; i < dataSource.seriesNames.length; i++) {
          const seriesName = dataSource.seriesNames[i];
          Sandcastle.addToolbarButton(
            seriesName,
            createSeriesSetter(seriesName)
          );
        }
      });

    // 创建 Viewer 实例并添加 DataSource。
    const viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false,
      timeline: false,
    });
    viewer.clock.shouldAnimate = false;
    viewer.dataSources.add(dataSource);

  </script>
  </div>
</body>

</html>
_乐多_
关注
专栏目录
cesium 添加 Echarts 饼图
God's asylum的博客
06-23 248
1、首先创建echarts饼图，拿到创建好的canvas。2、用echarts里面生成的canvas添加到cesium billboard中。
Cesium+ECharts：柱状图图标
席木木的博客
11-25 1901
Cesium结合ECharts图表库,实现三维场景中添加柱状图图标。
cesium 地图添加柱状统计图，并且动态添加。
weixin_42476786的博客
01-14 3707
遇到一个需求，需要在三维地图上动态添加一个柱状图。 function echartsPlay() { dlEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.388481, 39.924949, 0), name: '电力', ellipse: ...
cesium 发光线
最新发布
半路转行的Giser
08-29 369
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/124028204 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论，百分百回复哦
cesium的经纬度显示
ljtcrx的博客
05-13 272
【代码】cesium的经纬度显示。
cesium地图根据经纬度画网格线
irisMoon06的博客
04-24 1211
【代码】cesium地图根据经纬度画网格线。
Cesium 地图显示鼠标经纬度和高度
02-23
在事件处理器中，我们可以调用`viewer.camera.pickEllipsoid()`方法获取鼠标在地图上的位置，再通过`Cesium.Cartographic`对象转换为地理坐标（经度、纬度）： ```javascript var handler = new Cesium....
cesium 经纬度绘制点_Cesium 绘制点、线、面和测距
weixin_39972777的博客
12-22 1269
本文基于ES6，采用React+Cesium的Webgis前端开发框架，目前threejs和cesium的结合正在研究中。此段代码采用原生javascript，可能过程中用到了es6的扁平化语法，如()=>{},list.map方法。废话不多说了，直接上代码。import Cesium from 'cesium/Source/Cesium';import monitor from '../s...
cesium 经纬度绘制点_Cesium搜索经纬度并标点
weixin_39646695的博客
12-22 1422
思路: 先输入经纬度，然后判断经纬度的格式，如果格式正确的话 就拿到输入的经纬度 在地球上对应的位置去标点 并且相机的位置中心也飞往该点先实现标点 相机中心点showPoints(lng, lat) { // 接受两个参数 lng经度 lat纬度this.viewer.entities.removeAll() //先清除地球上的标点console.log(this.viewer.enti...
cesium 经纬度绘制点_cesium绘制点线面
weixin_42570296的博客
12-31 1234
这个问题的解决，是通过设置的一个新的按钮，这个按钮用来保存之前绘制的点，因为鼠标点击事件每次点击必须要执行viewer.entities.removeAll();这句话，但是将每次鼠标左键点击的位置坐标保存下来，设置一个保存按钮进行绘制鼠标左键点击过的点。另附代码：//位置数组var positions_lon = [];var positions_lat = [];var positions_h...
cesium 经纬度绘制点_关于Cesium中的常用坐标系及说明
weixin_42531163的博客
01-13 1692
Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图(支持多种格式的瓦片服务)，该框架不需要任何插件支持，但是浏览器必须支持WebGL。Cesium中常用的坐标系主要有两种：WGS84坐标系和笛卡尔空间直角坐标系。平时我们常见的某个点的经纬度就是在WGS84坐标系下某个点的坐标，它的坐标原点在椭球的质心；而笛卡尔坐标系主要是用来做空间位置的变化如平...
[cesium] | 动态柱状图
啊嘞嘞的博客
09-24 1991
基于cesium的动态拉高柱体，柱体颜色和label根据实际高度渐变 效果图
cesium 实现经纬线绘制和经纬度标注
一碗老面的博客
10-09 2211
废话不对数直接上线效果图及代码 1.效果图 2.实现代码 <!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=
【Cesium】创建形状基础---点、线、面、矩形、柱体、连廊、墙等
Wangzx的博客
07-13 4808
【代码】Cesium创建形状基础---点、线、面、矩形、柱体、连廊、墙等。
cesium通过一个经纬度来获取高程
weixin_39752673的博客
10-17 1318
【代码】cesium通过一个经纬度来获取高程。
cesium绘制网格_cesium 实现经纬线绘制和经纬度标注
weixin_39630744的博客
12-22 2167
今天某客户提出要实现在地球上经纬线显示和经纬度标注，看了官方资料，没有相关api，网上也看了好多帖子，基本都是实现的贴图划线(话说官方本来就有不同等级的贴图网格 根本不需要你来画)，只有在github上找了一个cesimu-Graticule.js，经纬度是画出来了，话说你有那么明显的bug放出来干啥？？？？what？？？说白了，没得抄~~ o(╯□╰)o所以自力更生吧，思路很简单，画的很low，...
Cesium柱状统计图
xt3d的博客
03-15 1116
Cesium柱状统计图 实现效果 详情参见 Cesium实战项目
Cesium添加点，通过经纬度转换为屏幕坐标
weixin_43493318的博客
06-21 1507
Cesium添加点，通过经纬度转换为屏幕坐标
如何在cesium中绘制一条每个点高度不同的折线
05-30
要在Cesium中绘制高度不同的折线，可以通过定义一个Polyline实例，并为每个点设置不同的高度值来实现。具体步骤如下： 1. 创建一个空的Polyline实例： ``` var polyline = new Cesium.Polyline(); ``` 2. 定义折线的属性，例如颜色、宽度、是否闭合等： ``` polyline.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED); polyline.width = 2; polyline.loop = false; ``` 3. 定义折线的点，每个点都需要设置位置和高度值： ``` var positions = [ Cesium.Cartesian3.fromDegrees(lon1, lat1, height1), Cesium.Cartesian3.fromDegrees(lon2, lat2, height2), Cesium.Cartesian3.fromDegrees(lon3, lat3, height3), // ... ]; ``` 4. 将点添加到折线中： ``` polyline.positions = positions; ``` 5. 将折线添加到场景中： ``` viewer.scene.primitives.add(polyline); ``` 这样就可以在Cesium中绘制一条每个点高度不同的折线了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值