Cesium.js基础使用（vue）

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

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

npm i cesium@1.95.0 -s
或
yarn add cesium@1.95.0 -s

2、组件引入

import * as Cesium from "cesium/Cesium";

3、容器创建

4、核心类Viewer创建

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

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

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

    viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(113.764043,34.005325,8000000),});

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

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

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

• 通过阿里云数据可视化平台拿到相应地区的json数据DataV.GeoAtlas地理小工具系列
• 使用Cesium.GeoJsondataSource.load添加

    //阿里云地理信息工具 数据获取viewer.dataSources.add(Cesium.GeoJsonDataSource.load("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"));

我们还可以通过cesium对一些建筑物进行观察

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

如何申请？

通过以下官网地址申请

 Cesium ion

 使用：

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

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

完整代码

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！