cesium底图切换

cesium作为三维开源框架，实现底图切换也是很容易的。

let osm = new Cesium.UrlTemplateImageryProvider({url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});
let mapbox = new Cesium.MapboxImageryProvider({mapId: 'mapbox.dark',accessToken: 'pk.eyJ1IjoieW91bmdnaXMiLCJhIjoiY2o5Z3owdTViMnR5djJ3bGczaGw4ODdhZSJ9.K7Zmkra18V7CuynSW3rlRQ'
});
var viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: osm,contextOptions: {webgl: {alpha: true}},selectionIndicator:false,navigationInstructionsInitiallyVisible:false,homeButton:false,selectionIndicator: false,animation: false,  //是否显示动画控件baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件timeline: false, //是否显示时间线控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件infoBox: false,  //是否显示点击要素之后显示的信息fullscreenButton: false,shouldAnimate: true //动画播放
});
//flyto坐标定位点
viewer.scene.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(121.453668,31.285981, 300),  //定位坐标点，建议使用谷歌地球坐标位置无偏差duration:6   //定位的时间间隔
});//设置底图切换
let basemap=1;
document.getElementById("changeBasemap").onclick=function(){basemap=!basemap;console.log(basemap)if(basemap==true){viewer.imageryLayers.addImageryProvider(osm);}else{viewer.imageryLayers.addImageryProvider(mapbox);}
}

cesium底图切换相关推荐

Cesium的学习之路（二）：底图切换
目录前言: 一.加载天地图等WMTS图层二.创建viewer,初始化三.实现切换功能前言: (这一期来的比较晚,最近在分心研究jenkins 结合 gitlab自动化部署.有人可能会疑问了,这 ...
百度地图API-实现底图切换
底图切换下一期项目有一项优化叫做底图切换,客户可以自己选择看不看见街道图这个东西,研究了一下,简单基本实现demo. <!DOCTYPE html> <html lang=&quo ...
05 地图添加底图切换控件
本文讲述如何在地图上添加地图切换控件.通过底图切换控件,我们可以实现当前地图和的地图之间的一个切换,效果如下: 如上所示,通过右上角的底图切换控件可以实现两地图之间的切换显示,具体操作如下: 添加底图 ...
【MAPBOX基础功能】05、底图切换 - mapbox切换高德、天地图、bingmap等底图
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
arcgis js 底图切换_ArcGIS API for JavaScript切换底图
由于小编也是刚接触GIS,也常被网上的各种资源所混淆,关于地图的基本创建就有很多方法.其实无关就是3x和4x版本的不同.3x版本大多是3.33,4x版本为4.16最新版本.以后小编也将采用最新版本. ...
mapbox 天地图底图切换组件
地图却换组件效果: <template><div id="layerswitch"><div id="right-panel"& ...
cesium 实战记录（一）底图动态配置，前端实现切换
上帝希望: 有个底图管理功能,用户配置好需要展示的底图后,在地图页面会出现相应的底图可供切换: 大概就这样吧底图切换. 思考: 1.首先要想动态管理底图,地图页面动态渲染底部的basemap组件. 那 ...
mars3d - Webpack打包教程
mars3d - Webpack打包教程 1.新建文件夹mars3d-webpack 2.初始化 npm,然后在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 ...
cesium js 路径_Cesium开发学习路径
Cesium.js是做三维地球建模可视化的前端库,网上的教程很多,官网文档和例子都非常详细,这里只是整理一下学习路径,以备后续不时之需. 一.中文网络资料 Cesium有一定的使用基数,所以搜索ces ...

cesium底图切换

cesium底图切换相关推荐

最新文章

热门文章