在Cesium创建一个可以移动的点

IT小鹏

已于 2022-05-12 17:57:19 修改

阅读量437

点赞数 1

分类专栏： cesium 文章标签： javascript vue-cli3

于 2021-09-16 17:58:25 首次发布

本文链接：https://blog.csdn.net/qq_45987428/article/details/120334408

版权

cesium 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍如何通过Cesium库在地图上创建一个可移动的点。首先，通过npm安装指定版本的copy-webpack-plugin以避免版本冲突。然后，利用Cesium的ScreenSpaceEventHandler监听屏幕点击事件，实现点击地图时在当前位置创建一个黄色的点，并更新其位置。代码示例展示了如何获取地图坐标并设置点的位置。

摘要由CSDN通过智能技术生成

目的：将第一天创建固定的点，编程一个可以移动的点

插曲：
npm install copy-webpack-plugin@4.6.0
这个命令是安装copy-webpack-plugin ，后面@的是版本号，一般不写版本号的话，默认是安装最高版本，但是最高版本一般都会出错误，所以安装的时候建议加上版本号
安装这个命令会把earthsdk这个文件夹给删掉，需要自己在重新导入进去

//创建可以移动的点
    var handler = new Cesium.ScreenSpaceEventHandler(earth.czm.viewer.canvas); //获取地图对象
    handler.setInputAction(function (event) {
      let pick = earth.czm.viewer.camera.pickEllipsoid(event.position);
      let cartographic = Cesium.Cartographic.fromCartesian(pick);
      let x = Cesium.Math.toDegrees(cartographic.longitude);
      let y = Cesium.Math.toDegrees(cartographic.latitude);
      //设置监听方法
      earth.czm.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(x, y),
        point: {
          pixelSize: 10,
          color: Cesium.Color.YELLOW,
        },
      });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);