2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > cesium加载自定义mapbox地图

cesium加载自定义mapbox地图

时间:2019-03-06 07:13:22

相关推荐

cesium加载自定义mapbox地图

cesium加载自定义mapbox地图

自定义mapbox地图

可以使用mapbox studio来自定义地图样式

mapbox-studio官网

首页 使用模版创建地图 自定义地图,然后发布 使用自定义样式token

具体代码

<!DOCTYPE html><html lang="en"><head><!-- Use correct character set. --><meta charset="utf-8"/><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>cesium加载自定义mapbox地图</title><script src="http://192.168.1.1:8088/lib/Cesium-1.78/Build/Cesium/Cesium.js"></script><style>@import url(http://192.168.1.1:8088/lib/Cesium-1.78/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style></head><body><div id="cesiumContainer"></div><script>//Cesium tokenlet cesium_tk = "token";// 添加mapbox自定义地图实例let layer=new Cesium.MapboxStyleImageryProvider({url:'/styles/v1',username:'sungang',styleId: 'styleId',accessToken: 'token',scaleFactor:true});//初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;let viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false, // 位置查找工具baseLayerPicker: false,// 图层选择器(地形影像服务)timeline: false, // 底部时间线homeButton: false,// 视角返回初始位置fullscreenButton: false, // 全屏animation: false, // 左下角仪表盘(动画器件)sceneModePicker: false,// 选择视角的模式(球体、平铺、斜视平铺)navigationHelpButton: false, //导航帮助按钮imageryProvider: layer, //设置默认底图});//添加图层// viewer.imageryLayers.addImageryProvider(layer);// 去除版权信息viewer._cesiumWidget._creditContainer.style.display = "none";</script></body></html>

成果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。