前端技术

【Cesium 基础】ImageryProvider 服务https://blog.youkuaiyun.com/seelingzheng/article/details/105020595关于Cesium中的常用坐标系及说明https://blog.youkuaiyun.com/XLSMN/article/details/76168510

《Cesium 基础知识点》- 相机最近和最远距离设置

处理用户输入事件。可以添加自定义功能，以便在用户输入时执行。

天地图 WMTS， 此级别下，该区域无影像

1. Cesium.Viewer 默认投影默认为 GeographicProjection 地理投影​2. MapProjection投影分类​2.1GeographicProjection地理投影默认投影，EPSG:43262.2WebMercatorProjection墨卡托投影EPSG:3857

一、添加// 省会城市var citys = [ [ '沈阳',123.429092,41.796768 ], [ '长春',125.324501,43.886841 ], [ '哈尔滨',126.642464,45.756966 ], [ '北京',116.405289,39.904987 ], [ '天津',117.190186,39.125595 ], [ '呼和浩特',111.751990,40.841490 ], [ '银川',106

一、APICesium.LabelCesium.LabelCollection二、修改LabelCollection 中的 Label// 这里是循环设置字体颜色为半透明，同理，也可修改其它样式，如：outlineColor、font 等labeCollection._labels.forEach(label => { label.fillColor = Cesium.Color.ORANGE.withAlpha(0.5)});三、LabelCollection 隐.

API

源码// 多边形外围let range = [121.1911,31.53762,121.1921,30.87844,121.9246,30.83999,121.8824,31.34811];let positions = Cesium.Cartesian3.fromDegreesArray(range);// 第 1 个孔let holeRange1 = [121.2671,31.4566,121.2382,31.3481,121.3659,31.3934];// 注意这其实也是一个多边.

一、地表大气层// 关闭地表大气层，默认是 trueviewer.scene.globe.showGroundAtmosphere = false;官网 API在此 设置Cesium.Globe对象的属性 如下图对比，为 true 会有一层白色朦胧感。图中加载天地图影像和注记图层。false 无地表大气层true 有地表大气层二、天空大气层// 关闭天空大气层，默认是 trueviewer.scene.skyAtmosphere.show = false;...

一、获取图层列表对象var layers = viewer.imageryLayers._layers;控制台可看到，返回 Array 类型，当前场景有5个图层二、获取指定下标的图层获取第一个图层对象var baseLayer = viewer.scene.imageryLayers.get(0);控制台可看到...

一、颜色全透明例如：设置球的基础色，默认颜色是Cesium.Color.BLUE// 方式一viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);// 方式二(推荐)viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;二、颜色半透明例如：设置球的地下色，默认是Cesium.Color.BLACK// 方式一viewer.scene.globe....

一、说明Cesium.ImageryProvider是基类，支持以下15 种类型二、设置图层顺序Cesium.ImageryLayerCollection中的方法1.lower(layer)说明将图层向下移一层。API 截图示例// viewer 是 Cesium.Viewer 对象，layer 是基于 Cesium.ImageryProvider 的图层viewer.imageryLayers.lower(layer);2. raise(lay...

注意，下面两行代码都得设置。// 隐藏天空大气viewer.scene.skyAtmosphere.show = false;// 隐藏球viewer.scene.globe.show = false;1、仅隐藏球。如图会有一个白圈，这是天空大气层。2、仅隐藏天空大气。外围的白圈没了，不是很明显吧，继续往下看。3、正常情况下，有天空大气和球。请仔细与上面做对比。4、全部隐藏。...

测试版本：1.79.1Cesium官方在 1.7x 版中新增了地下模式https://cesium.com/blog/2020/07/06/camptocamp-underground-visualization-with-cesium/

1、添加var layerProvider = new Cesium.ArcGisMapServerImageryProvider({ url: 'http://127.0.0.1:6080/arcgis/rest/services/World/MapServer'});viewer.imageryLayers.addImageryProvider(layerProvider);

一、被遮挡viewer.scene.globe.depthTestAgainstTerrain = true;二、无遮挡viewer.scene.globe.depthTestAgainstTerrain = false;

API 上有 4 种：3D、3D 、 2.5D（哥伦布视图CV）和变形。常用的是前 3 种。// 2.5D 哥伦布模式viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;// 变形模式viewer.scene.mode = Cesium.SceneMode.MORPHING;// 2D 模式viewer.scene.mode = Cesium.SceneMode.SCENE2D;// 3D 模式viewer.scene.mode =

切换时，跳转到指定位置。网上提供两种方式。一、修改源代码（不推荐，不可取）Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);//homebutton默认跳转位置二、重载了homebutton点击之后的响应函数（推荐）// overwrite homebuttonviewer.homeButton.viewModel.command.beforeExecute.addEven...

camera.flyTo下述代码摘自：API 链接注意第二个示例中添加了说明： (west, south, east, north) 对应 (xMin,yMin,xMax,yMax)// 1. Fly to a position with a top-down viewviewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)});// 2. Fly to

放大// 放大function zoomIn() { // viewer 为 Viewer 对象 let position = viewer.camera.position; let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height; // 每次缩小 20 倍，参数可改 let moveRate = cameraHeight / 20.0

一、添加// 地形对象let terrainProvider = new Cesium.CesiumTerrainProvider({ url : 'http://develop.smaryun.com:6163/igs/rest/g3d/terrain/GetTerrain'});// 添加viewer.scene.terrainProvider = terrainProvider;二、删除//添加一个简单的terain，这样就不会对任何地形进行保护globe.viewe

1、GeoServer WMS 调用添加var wmsOptions = { url: 'http://localhost:6767/geoserver/topp/wms', layers: 'topp:states', parameters: { version: '1.1.1', width: 512, height: 512 }};var layer = viewer.imageryLayers.addIma

目录一、普通 3dtiles二、Cesium Ion 3dtiles三、模型偏移(重点)一、普通 3dtiles添加// 3d tiles 对象let tileSet = new Cesium.Cesium3DTileset({ url: './data/3dtile.json'});// 定位tileSet.readyPromise.then(function (tileset) { // tileset的边界球 let boundingSpher

目录一、天地图二、谷歌三、Bing一、天地图注意：_w 使用球面墨卡托，_c 无效// vec(全球矢量地图服务)// img(全球影像地图服务)// cia(全球影像中文注记服务)// cva(全球矢量中文注记服务)let mapType = 'img';let tdtUrl = `http://{s}.tianditu.com/${mapType}_w/wmts?service=wmts&request=GetTile&version=1.0.0.

一、场景初始化let viewer = new Cesium.Viewer('cesiumContainer', { //地图图标，图层选择器，选择要显示的地图服务和地形服务,默认会用到cesium.ion baseLayerPicker: false, //问号图标，导航帮助按钮，显示默认的地图控制帮助 navigationHelpButton: false, animation: false,//动画器件，显示当前时间，允许跳转特定时间 timeli

1、仔细阅读 options 内容2、参考 API：链接let viewer = new Cesium.Viewer('cesiumContainer', { // imageryProvider : new Cesium.ArcGisMapServerImageryProvider({ // url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",

一、访问https://cesium.com/ion/signin/tokens二、登录/注册三、申请四、使用// 密钥let defaultAccessToken = 'your token string';// 设置Cesium.Ion.defaultAccessToken = defaultAccessToken;// 初始化let viewer = new Cesium.Viewer('cesiumContainer', {});...

一、新建项目vue create webapp2、下载 Cesiumnpm install cesium3、引入(全局)新建 vue.config.js 文件const CopyWebpackPlugin = require('copy-webpack-plugin')const webpack = require('webpack')const path = require('path') let cesiumSource = './node_modules/cesiu.