devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Cesium.js基础使用（vue）

作者：小桥流水78 | 2024-07-25 01:07:16

赞

踩

cesium.js

如何通过Cesium创建一个地图：

1、npm安装(这里使用1.95.0版本)

  1. npm i cesium@1.95.0 -s
  2. 或
  3. yarn add cesium@1.95.0 -s

2、组件引入

import * as Cesium from "cesium/Cesium";

3、容器创建

<div id="cesiumContainer" />

4、核心类Viewer创建

在Cesium中Viewer是一切的开端，通过newCesium.Viewer(container, options)来创建一个Viewer对象，可以把该对象理解为三维虚拟地球，在Viewer对象上的所有操作，可以看作是对三维虚拟地球的操作。

  1. const viewer = new Viewer("cesiumContainer", {
  2.         infoBox: false,
  3.         animation: false, // 是否显示动画控件
  4.         homeButton: false, // 是否显示home键
  5.         geocoder: false, // 是否显示地名查找控件
  6.         baseLayerPicker: false, // 是否显示图层选择控件
  7.         timeline: false, // 是否显示时间线控件
  8.         fullscreenButton: false, // 是否全屏显示
  9.         infoBox: false, // 是否显示点击要素之后显示的信息
  10.         sceneModePicker: false, // 是否显示投影方式控件  三维/二维
  11.         navigationInstructionsInitiallyVisible: false,
  12.         navigationHelpButton: false, // 是否显示帮助信息控件
  13.         orderIndependentTranslucency: false,
  14.         shouldAnimate: true,
  15.         scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
  16.         selectionIndicator: false, // 取消点击有绿框
  17.         // imageryProvider: false, // 不提供地图
  18.         baseLayerPicker: true, //是否显示图层选择控件
  19.       });

5、 设置初始位置（经纬度、缩放比例）

  1.     viewer.camera.flyTo({
  2.         destination: Cesium.Cartesian3.fromDegrees(
  3.           113.764043,
  4.           34.005325,
  5.           8000000
  6.         ),
  7.       });

此时，一个地球就出现了!!!

cesium内置了一些图层供我们切换。

 还可以通过一些json数据给地图添加想要的区块图层

  1.     //阿里云地理信息工具 数据获取
  2.       viewer.dataSources.add(
  3.         Cesium.GeoJsonDataSource.load(
  4.           "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
  5.         )
  6.       );
我们还可以通过cesium对一些建筑物进行观察

但需要申请Cesium的令牌(token)

如何申请？

通过以下官网地址申请

 Cesium ion

 使用：

 Cesium.Ion.defaultAccessToken =       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDVhMjQ0Yi05MDg4LTRlNDYtYTIxMi00YmI4ZWYxOWMyNTgiLCJpZCI6MTQ5MzYwLCJpYXQiOjE2ODc3ODQ0OTh9.KlhT_LCnsEtYyawpEmJ_wx44_qTUbgze-SxGMRavbAM";

之后就可以访问高清页面；

完整代码

  1. <template>
  2.   <div id="cesiumContainer" @dragover="allowDrop" @drop="drop">
  3.     <nav>
  4.       <button @click="draw('point')">点绘制</button>
  5.       <button @click="draw('polyline')">线绘制</button>
  6.       <button @click="draw('polygon')">圆绘制</button>
  7.       <button @click="clearDrawEntities">清空</button>
  8.     </nav>
  9.  
  10.     
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. import * as Cesium from "cesium/Cesium";
  16. import { Viewer } from "cesium/Cesium";
  17.  
  18. import Map from "ol/Map";
  19. import View from "ol/View";
  20. import TileLayer from "ol/layer/Tile";
  21. import XYZ from "ol/source/XYZ";
  22. import { transform, getTransform } from "ol/proj";
  23. // import { selectNodesForSpecifiedRegion } from "../../utils/gis/commonMethods";
  24. export default {
  25.   name: "cesiumView",
  26.   data() {
  27.     return {
  28.       // map: null,
  29.       cesiumContainer: null,
  30.       mapViewer: null,
  31.       tempEntities: [],
  32.       activeNames: [],
  33.     };
  34.   },
  35.   mounted() {
  36.     this.initMap();
  37.   },
  38.   methods: {
  39.     handleChange() {},
  40.  
  41.     //init
  42.     initMap() {
  43.       // 此应用程序正在使用 Cesium 的默认 ion 访问令牌，请在使用 Ceisum API 调用之前先注册一个你自己的 Cesium ion 访问令牌
  44.       Cesium.Ion.defaultAccessToken =
  45.         "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDVhMjQ0Yi05MDg4LTRlNDYtYTIxMi00YmI4ZWYxOWMyNTgiLCJpZCI6MTQ5MzYwLCJpYXQiOjE2ODc3ODQ0OTh9.KlhT_LCnsEtYyawpEmJ_wx44_qTUbgze-SxGMRavbAM";
  46.       const viewer = new Viewer("cesiumContainer", {
  47.         infoBox: false,
  48.         animation: false, // 是否显示动画控件
  49.         homeButton: false, // 是否显示home键
  50.         geocoder: false, // 是否显示地名查找控件
  51.         baseLayerPicker: false, // 是否显示图层选择控件
  52.         timeline: false, // 是否显示时间线控件
  53.         fullscreenButton: false, // 是否全屏显示
  54.         infoBox: false, // 是否显示点击要素之后显示的信息
  55.         sceneModePicker: false, // 是否显示投影方式控件  三维/二维
  56.         navigationInstructionsInitiallyVisible: false,
  57.         navigationHelpButton: false, // 是否显示帮助信息控件
  58.         orderIndependentTranslucency: false,
  59.         shouldAnimate: true,
  60.         scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
  61.         selectionIndicator: false, // 取消点击有绿框
  62.         // imageryProvider: false, // 不提供地图
  63.         baseLayerPicker: true, //是否显示图层选择控件
  64.       });
  65.       //设置初始位置
  66.       viewer.camera.flyTo({
  67.         destination: Cesium.Cartesian3.fromDegrees(
  68.           113.764043,
  69.           34.005325,
  70.           3000
  71.         ),
  72.       });
  73.  
  74.       // entities 默认点位
  75.       // const entity = viewer.entities.add({
  76.       //   position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
  77.       //   point: {
  78.       //     pixelSize: 50,
  79.       //     color: new Cesium.Color(0, 1, 0, 1),
  80.       //   },
  81.       // });
  82.       // //将摄像头设置到远点处
  83.       // viewer.trackedEntity = entity;
  84.  
  85.       //阿里云地理信息工具 数据获取
  86.       // viewer.dataSources.add(
  87.       //   Cesium.GeoJsonDataSource.load(
  88.       //     "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
  89.       //   )
  90.       // );
  91.  
  92.       // Viewer.scene.globe.show = false;
  93.       // logo去除
  94.       viewer.cesiumWidget.creditContainer.style.display = "none";
  95.  
  96.       this.mapViewer = viewer;
  97.  
  98.       window.viewer = viewer;
  99.  
  100.       console.log(viewer, "viewer");
  101.     },
  102.     // deleteRectangle() {},
  103.  
  104.     //获取经纬度
  105.     getPosition(viewer) {
  106.       let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  107.       handler.setInputAction(function (event) {
  108.         let cartesian = viewer.scene.pickPosition(event.position);
  109.         let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  110.         let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
  111.         let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
  112.         let alt = cartographic.height; // 高度
  113.         let coordinate = {
  114.           longitude: Number(lng.toFixed(6)),
  115.           latitude: Number(lat.toFixed(6)),
  116.           altitude: Number(alt.toFixed(2)),
  117.         };
  118.         console.log(coordinate,'coordinate');
  119.       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  120.     },
  121.     /**
  122.      * Role map drop
  123.      * Desc 元素拖入地图放置事件
  124.      */
  125.     drop(e) {
  126.       e.preventDefault();
  127.  
  128.       this.getPosition(window.viewer);
  129.       // console.log(e, "eeeeeeeeee");
  130.       // const pos = transform(this.map.getEventCoordinate(e), "EPSG:3857", "EPSG:4326");
  131.       // console.log(pos, "pos");
  132.  
  133.       // const pos = ol.proj.transform(pos, 'EPSG:3857', 'EPSG:4326');
  134.       // const data = e.dataTransfer.getData("Text");
  135.       // console.log(data,'data')
  136.     },
  137.     //图标拖动效果
  138.     drag(event, item) {
  139.       console.log(event, item, "---------------");
  140.     },
  141.     /**
  142.      * Role dragover
  143.      * Desc 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发,
  144.      *      允许元素拖入地图
  145.      */
  146.     allowDrop(e) {
  147.       e.preventDefault();
  148.       // event.preventDefault
  149.     },
  150.     draw(type) {
  151.       //点绘制
  152.       let _this = this;
  153.       let viewer = this.mapViewer;
  154.       let tempEntities = this.tempEntities;
  155.       let position = [];
  156.       let tempPoints = [];
  157.  
  158.       /**
  159.        * Role  depthTestAgainstTerrain 开启地形深度检测
  160.        * desc  开启地形检测后，会计算其他地理要素和地形之间的遮挡关系。未开启时，将会出现场景变化时，地物位置显示不正确。
  161.        */
  162.       viewer.scene.globe.depthTestAgainstTerrain = true;
  163.  
  164.       /**
  165.        * Role ScreenSpaceEventHandler
  166.        * type => canvas
  167.        * default => Document
  168.        * desc 处理用户输入事件。可以添加自定义功能以在以下位置执行当用户输入输入时。
  169.        */
  170.       let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  171.  
  172.       switch (type) {
  173.         case "point":
  174.           //监听 鼠标左键
  175.           handler.setInputAction(function (movement) {
  176.             // 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
  177.             let ray = viewer.camera.getPickRay(movement.position);
  178.             // 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
  179.             position = viewer.scene.globe.pick(ray, viewer.scene);
  180.             let point = _this.drawPoint(position);
  181.             tempEntities.push(point);
  182.  
  183.             /**
  184.              * Role ScreenSpaceEventType
  185.              * Desc 此枚举类型用于对鼠标事件进行分类:向下，向上，单击，双击，按住按钮时移动。
  186.              */
  187.           }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  188.           // 左键双击停止绘制
  189.           handler.setInputAction(function () {
  190.             handler.destroy(); //关闭事件句柄
  191.             handler = null;
  192.           }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  193.           // 右击单击停止绘制
  194.           handler.setInputAction(function () {
  195.             handler.destroy(); //关闭事件句柄
  196.             handler = null;
  197.           }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  198.           break;
  199.         case "polyline":
  200.           //鼠标移动事件
  201.           handler.setInputAction(function (movement) {},
  202.           Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
  203.           //左键点击操作
  204.           handler.setInputAction(function (click) {
  205.             //调用获取位置信息的接口
  206.             let ray = viewer.camera.getPickRay(click.position);
  207.             position = viewer.scene.globe.pick(ray, viewer.scene);
  208.             tempPoints.push(position);
  209.             let tempLength = tempPoints.length;
  210.             //调用绘制点的接口
  211.             let point = _this.drawPoint(tempPoints[tempPoints.length - 1]);
  212.             tempEntities.push(point);
  213.             if (tempLength > 1) {
  214.               let pointline = _this.drawPolyline([
  215.                 tempPoints[tempPoints.length - 2],
  216.                 tempPoints[tempPoints.length - 1],
  217.               ]);
  218.               tempEntities.push(pointline);
  219.             } else {
  220.               // tooltip.innerHTML = "请绘制下一个点，右键结束";
  221.             }
  222.           }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  223.           //右键点击操作
  224.           handler.setInputAction(function (click) {
  225.             tempPoints = [];
  226.             handler.destroy(); //关闭事件句柄
  227.             handler = null;
  228.           }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  229.           break;
  230.         case "polygon":
  231.           //鼠标移动事件
  232.           handler.setInputAction(function (movement) {},
  233.           Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  234.           //左键点击操作
  235.           handler.setInputAction(function (click) {
  236.             //调用获取位置信息的接口
  237.             let ray = viewer.camera.getPickRay(click.position);
  238.             position = viewer.scene.globe.pick(ray, viewer.scene);
  239.             tempPoints.push(position);
  240.             let tempLength = tempPoints.length;
  241.             //调用绘制点的接口
  242.             let point = _this.drawPoint(position);
  243.             tempEntities.push(point);
  244.             if (tempLength > 1) {
  245.               let pointline = _this.drawPolyline([
  246.                 tempPoints[tempPoints.length - 2],
  247.                 tempPoints[tempPoints.length - 1],
  248.               ]);
  249.               tempEntities.push(pointline);
  250.             } else {
  251.               // tooltip.innerHTML = "请绘制下一个点，右键结束";
  252.             }
  253.           }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  254.           //右键点击操作
  255.           handler.setInputAction(function (click) {
  256.             let cartesian = viewer.camera.pickEllipsoid(
  257.               click.position,
  258.               viewer.scene.globe.ellipsoid
  259.             );
  260.  
  261.             if (cartesian) {
  262.               let tempLength = tempPoints.length;
  263.               if (tempLength < 3) {
  264.                 alert("请选择3个以上的点再执行闭合操作命令");
  265.               } else {
  266.                 //闭合最后一条线
  267.                 let pointline = _this.drawPolyline([
  268.                   tempPoints[tempPoints.length - 1],
  269.                   tempPoints[0],
  270.                 ]);
  271.                 tempEntities.push(pointline);
  272.                 _this.drawPolygon(tempPoints);
  273.                 tempEntities.push(tempPoints);
  274.                 handler.destroy(); //关闭事件句柄
  275.                 handler = null;
  276.               }
  277.             }
  278.           }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  279.           break;
  280.       }
  281.     },
  282.     drawPoint(position, config) {
  283.       let viewer = this.mapViewer;
  284.       let config_ = config ? config : {};
  285.       return viewer.entities.add({
  286.         name: "点几何对象",
  287.         position: position,
  288.         point: {
  289.           color: Cesium.Color.SKYBLUE,
  290.           pixelSize: 10,
  291.           outlineColor: Cesium.Color.YELLOW,
  292.           outlineWidth: 3,
  293.           disableDepthTestDistance: Number.POSITIVE_INFINITY,
  294.           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  295.         },
  296.       });
  297.     },
  298.     drawPolyline(positions, config_) {
  299.       let viewer = this.mapViewer;
  300.       if (positions.length < 1) return;
  301.       let config = config_ ? config_ : {};
  302.       return viewer.entities.add({
  303.         name: "线几何对象",
  304.         polyline: {
  305.           positions: positions,
  306.           width: config.width ? config.width : 5.0,
  307.           material: new Cesium.PolylineGlowMaterialProperty({
  308.             color: config.color
  309.               ? new Cesium.Color.fromCssColorString(config.color)
  310.               : Cesium.Color.GOLD,
  311.           }),
  312.           depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
  313.             color: config.color
  314.               ? new Cesium.Color.fromCssColorString(config.color)
  315.               : Cesium.Color.GOLD,
  316.           }),
  317.           clampToGround: true,
  318.         },
  319.       });
  320.     },
  321.     drawPolygon(positions, config_) {
  322.       let viewer = this.mapViewer;
  323.       if (positions.length < 2) return;
  324.       let config = config_ ? config_ : {};
  325.       return viewer.entities.add({
  326.         name: "面几何对象",
  327.         polygon: {
  328.           hierarchy: positions,
  329.           material: config.color
  330.             ? new Cesium.Color.fromCssColorString(config.color).withAlpha(0.2)
  331.             : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(0.2),
  332.         },
  333.       });
  334.     },
  335.     //清除实体
  336.     clearDrawEntities() {
  337.       let viewer = this.mapViewer;
  338.       this.tempEntities = [];
  339.       // 清除之前的实体
  340.       const entitys = viewer.entities._entities._array;
  341.       let length = entitys.length;
  342.       // 倒叙遍历防止实体减少之后entitys[f]不存在
  343.       for (let f = length - 1; f >= 0; f--) {
  344.         if (
  345.           entitys[f]._name &&
  346.           (entitys[f]._name === "点几何对象" ||
  347.             entitys[f]._name === "线几何对象" ||
  348.             entitys[f]._name === "面几何对象")
  349.         ) {
  350.           viewer.entities.remove(entitys[f]);
  351.         }
  352.       }
  353.     },
  354.   },
  355. };
  356. </script>
  357.  
  358. <style lang="less" scoped>
  359. #cesiumContainer {
  360.   width: 100vw;
  361.   height: 100vh;
  362.   position: relative;
  363.   header {
  364.     position: absolute;
  365.     top: 0;
  366.     width: 100%;
  367.     height: 50px;
  368.     background: rgba(0, 0, 0, 0.5);
  369.   }
  370.   .leftBar {
  371.     width: 250px;
  372.     height: 50%;
  373.     position: absolute;
  374.     top: 30%;
  375.     z-index: 999;
  376.     .el-collapse-item__content {
  377.       display: flex;
  378.       justify-content: space-between;
  379.       // flex-wrap: wrap;
  380.     }
  381.     .collapseItems {
  382.       // display: block;
  383.       width: 100%;
  384.       height: auto;
  385.       .ivu-icon {
  386.         display: block;
  387.       }
  388.       b {
  389.         display: block;
  390.         text-align: center;
  391.       }
  392.     }
  393.   }
  394.   nav {
  395.     position: absolute;
  396.     left: 20px;
  397.     top: 20px;
  398.     width: 150px;
  399.     height: 180px;
  400.     // background: rgba(0, 0, 0, 0.5);
  401.     z-index: 999;
  402.     display: flex;
  403.     flex-direction: column;
  404.     justify-content: space-between;
  405.     button {
  406.       width: 100%;
  407.       height: 30px;
  408.       cursor: pointer;
  409.     }
  410.   }
  411. }
  412. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/877532
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号