如何利用Cesium制作互联网地图？

最新推荐文章于 2024-05-16 09:41:45 发布

GIS开发特训营

最新推荐文章于 2024-05-16 09:41:45 发布

阅读量1.4k

点赞数

分类专栏： GIS开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/gis_witch/article/details/122726649

版权

GIS开发专栏收录该内容

34 篇文章 29 订阅

订阅专栏

利用百度地图，实现在三维场景中加载百度地图，具体类型包括矢量地图和影像地图等。效果如下图所示：

实现步骤：

1. 引用开发库：

引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能；

2. 创建布局：

创建id='GlobeView'的 div 作为三维视图的容器，并设置其样式；

3. 构造三维场景控件：

实例化Cesium.WebSceneControl对象，完成此步骤后可在三维场景中加载三维球控件；

Example:

 //构造三维视图对象（视图容器div的id，三维视图设置参数）
 var webGlobe = new Cesium.WebSceneControl('GlobeView', {})

4. 加载数据:

创建第三方数据图层类CesiumZondy.Layer.ThirdPartyLayer的对象，调用appendBaiduMap()方法，配置不同参数可加载不同类型地图，包括：瓦片（ptype:‘tile’）、卫星（ptype:‘sate’）和交通地图（ptype:‘traffic’）。

· Example:

//构造第三方图层对象
 var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
    viewer: webGlobe.viewer,
 })
 //添加百度地图
 var baiduLayer = thirdPartyLayer.appendBaiduMap({
 //地图类型：瓦片：'tile'、卫星：'sate'、交通地图：'traffic'
    ptype: 'tile',
 })

关键接口

1.【三维场景控件类】Cesium.WebSceneControl(elementId, options)

参数名	类型	说明
elementId	Element \| String	放置视图的 div 的 id
options	Object	（可选）附加属性

· options属性主要参数

参数名	类型	默认值	说明
viewerMode	String	‘3D’	（可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图
showInfo	Boolean	false	（可选）是否显示默认的属性信息框
animation	Boolean	true	（可选）默认动画控制不显示
baseLayerPicker	Boolean	true	（可选）是否创建图层控制显示小组件
fullscreenButton	Boolean	true	（可选）是否创建全屏控制按钮
vrButton	Boolean	false	（可选）是否创建 VR 按钮

2.【第三方数据图层类】CesiumZondy.Layer.ThirdPartyLayer

【method】appendBaiduMap(optionsParam) → {ImageryLayer}：添加百度地图服务，返回瓦片层对象（ImageryLayer），可用于操作移除

· appendBaiduMap方法主要参数

参数名	类型	说明
optionsParam	Object	附加属性

· optionsParam属性主要参数

参数名	类型	默认值	说明
ptype	String	‘vec’	（必选）地图类型，提供瓦片-‘tile’、卫星-‘sate’、交通-'traffic’三种百度地图

代码块：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>百度地图显示</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义第三方图层对象
        var thirdPartyLayer;
        //定义百度图层对象
        var baiduLayer;

        //加载地图
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造第三方图层对象
            thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //添加百度地图
            baiduLayer = thirdPartyLayer.appendBaiduMap({
                //地图类型：瓦片：'tile'、卫星：'sate'、交通地图：'traffic'
                ptype: 'tile'
            });
        }

        /**图层切换函数*/
        function changeLayer() {
            let layer = document.getElementById("LayerSelect").value;
            //首先移除图层
            if (baiduLayer) {
                thirdPartyLayer.removeImageLayer(baiduLayer);
            }
            //根据选择添加地图
            if (layer == 'vector') {
                baiduLayer = thirdPartyLayer.appendBaiduMap({
                    ptype: 'tile'
                });
            } else if (layer === 'raster') {
                baiduLayer = thirdPartyLayer.appendBaiduMap({
                    ptype: 'sate'
                });
            }
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'>
        <!-- 菜单 -->
        <div id="menu" class="message">
            <select name="changeLayer" id="LayerSelect" onchange="changeLayer()">
                <option value="vector">矢量地图</option>
                <option value="raster">遥感地图</option>
            </select>
        </div>
    </div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>

测一测，看看我是否适合学习GIS开发https://www.wjx.cn/vj/eFS3fwC.aspx