cesium加载自定义mapbox地图

最新推荐文章于 2024-10-08 11:08:58 发布

孙霸天

最新推荐文章于 2024-10-08 11:08:58 发布

阅读量2.3k

点赞数 1

分类专栏： # cesium 文章标签： javascript 前端 cesium webgis

本文链接：https://blog.csdn.net/qq_36213352/article/details/122368847

版权

cesium 专栏收录该内容

54 篇文章 146 订阅

订阅专栏

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 token
    let cesium_tk = "token";

    // 添加mapbox自定义地图实例
    let layer=new Cesium.MapboxStyleImageryProvider({
        url:'https://api.mapbox.com/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>