Mapmost SDK for WebGL学习之旅(一）-SDK介绍与开发入门-优快云博客

by STANCH

标签：#Mapmost SDK for WebGL教程 #GIS引擎 #三维地图引擎 #数字孪生 #智慧城市

1.概述

Mapmost SDK for WebGL是一款轻量化二三维一体化渲染的GIS引擎，采用B/S原生技术架构,可用于构建web地图和web应用程序，开发人员不需要掌握晦涩难懂的图形学和数学知识，只需要具备一些前端开发能力，就可以实现网页端三维数字孪生应用的快速搭建。在这个系列中，将以实战教学的方式帮助大家快速使用和理解该引擎，从而可以根据自己的需求开发出三维地图场景。

Mapmost SDK for WebGL项目展示 ,来源：Mapmost平台

2.Mapmost SDK for WebGL具备哪些能力？

支持Mapmost加密型矢量地图；
支持地形和多种坐标系栅格服务；
支持多种格式的三维模型（glb/gltf、fbx、obj）；
具备海量数据加载与渲染能力；
强大的数据融合集成能力，可以实时接入天地图、百度、高德地图等作为底图，叠加手工模型数据、点云、倾斜摄影模型、视频等构建三维场景；
功能齐全，拥有200+开放API和完备的开发案例文档，具备多源数据加载、时空治理分析、二三维一体化表达、智能物联融合、多端跨平台等特色能力；
可以使用配套产品Mapmost Studio 在线编辑地图样式，根据自己的需求定制地图样式，使用时只需一个链接，更新时链接也无需修改。

Mapmost SDK for WebGL地图样式，来源：Mapmost平台智能物联融合项目，来源：Mapmost平台

3.地图基础操作

（1）地图初始化

使用Mapmost SDK for WebG开发，我们可以按照官网在线文档的零基础入门教程安装相关开发工具，并可以实现一个初始化的三维地图场景，然后就可以开发我们自己的三维GIS场景啦。

SDK零基础入门文档，来源：Mapmost官网

在按照教程中的代码运行成功后，我们就可以得到下图一样的三维场景，通过鼠标交互，我们就可以实现场景的旋转、平移和缩放操作了。

来源：Mapmost平台

在主要代码中，我们只通过mapmost.Map()接口，就实现了一个三维地图场景的搭建，是不是非常简单？那么它有什么作用呢？

let map = new mapmost.Map({
  container: 'map', // 地图容器 id
  style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
  center: [120.71923008473078, 31.29446443371741], // 地图初始中心点
  zoom: 14, // 地图初始级别
  userId: '***', // 授权码
});

mapmost.Map()接口我们可以理解为页面上的地图，我们可以通过配置参数来实现对地图的控制，比如上面代码中的参数：

container是放置地图的HTML元素，在页面中我们要创建一个相应的HTML元素；
style为地图的样式，通过样式文件我们可以实现不同的地图底图，代码中的样式文件也就是我们在页面（上图）中看到的地图；
center是地图的初始中心点，可以理解为视口的中心；
zoom是地图的初始缩放级别，数值越大视角越大，反之越小；
userId是使用Mapmost SDK for WebGL必要的授权码，可以在官网免费申请使用。

还有更多的参数我们可以查看API文档。

来源：Mapmost平台

（2）放大和缩小地图

除了使用鼠标滚轮进行缩放，我们还可以通过调用zoomIn()来实现放大，通过zoomOut()缩小，在代码中我们添加两个按钮来控制缩放；

<body>
    <div id="map"></div>
    <div class="btn-group">
        <button onClick="mapZoomIn()">放大地图</button>
        <button onClick="mapZoomOut()">缩小地图</button>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map', // 地图容器 id
            style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
            center: [120.71923008473078, 31.29446443371741], // 地图初始中心点
            zoom: 14, // 地图初始级别
            userId: '***', // 授权码
        });
        function mapZoomIn() {
            map.zoomIn()
        }
        function mapZoomOut() {
           map.zoomOut()
        }
    </script>
</body>

来源：Mapmost平台

（3）获取和设置地图层级

通过getZoom()获取地图层级，setZoom()设置地图层级，在代码中我们添加两个按钮，分别获取地图层级和设置层级

<body>
    <div id="map"></div>
    <div id="info"></div>
    <div class="btn-group">
        <button onClick="getMapLevel()">获取地图层级</button>
        <input type="number" placeholder="0<=value<=22" />
        <button onClick="setMapLevel()">设置地图层级</button>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map', // 地图容器 id
            style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
            center: [120.71923008473078, 31.29446443371741], // 地图初始中心点
            zoom: 14, // 地图初始级别
            userId: '***', // 授权码
        });
        function getMapLevel() {
            const zoom = map.getZoom();
            document.getElementById('info').innerText = zoom;
        }
        function setMapLevel() {
        let zoom = Number(document.querySelector('input').value)
        if (zoom < 0 || zoom > 22) {
            alert("超出范围");
            return;
        }
        map.setZoom(zoom)
    }
    </script>
</body>

来源：Mapmost平台

（4）地图旋转角度和仰俯角

通过getBearing()获取当前方位角，即以从北顺时针方向测量的度数，例如地图方位角为 90°对应正东指向。通过setBearing()设置地图层级。getPitch()获得地图当前的倾斜角度，setPitch()设置地图的倾斜角。

<body>
    <div id="map"></div>
    <div id="info"></div>
    <div class="btn-group">
        <button onClick="getmapbearing()">获取旋转角</button>
        <input type="number" id="bearing" />
        <button onClick="setmapbearing()">设置旋转角</button>
        <button onClick="getmappitch()">获取俯仰角</button>
        <input type="number" id="pitch" placeholder="0~85"/>
        <button onClick="setmappitch()">设置俯仰角度</button>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map', // 地图容器 id
            style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
            center: [120.71923008473078, 31.29446443371741], // 地图初始中心点
            zoom: 14, // 地图初始级别
            userId: '***', // 授权码
        });
        function getmapbearing() {
            const bearing = map.getBearing();
            document.getElementById('info').innerText = bearing;
        }
        function setmapbearing() {
            let inputValue = document.getElementById('bearing').value;
            map.setBearing(inputValue)
        }
        function getmappitch() {
            const pitch = map.getPitch();  // 获取地图俯仰角
            document.getElementById('info').innerText = pitch;
        }
        function setmappitch() {
            let inputValue = document.getElementById('pitch').value;
            if (Number(inputValue) < 0 || Number(inputValue) > 85) {
                alert('输入有误-请输入0-85之间的数值')
                return;
            }
            map.setPitch(inputValue)
        }
    </script>
</body>

（5）地图视角切换

相机视角飞行切换是一种常见的跳转视角的方式，我们可以通过 flyTo()实现视角平滑过渡到目标视角。

<body>
    <div id="map"></div>
    <div id="info"></div>
    <div class="btn-group">
        <button onClick="changeViewer()">视角切换</button>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map', // 地图容器 id
            style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
            center: [120.71205084518476, 31.29266278954009, 0], // 地图初始中心点
            zoom: 16, // 地图初始级别
            userId: '***', // 授权码
        });
        function changeViewer() {
        map.flyTo({
            center: [120.7244404767631, 31.29541401755057, 0],// 飞行结束后地图的初始中心点
            zoom: 15,//飞行结束后地图的层级
            bearing: 40, //飞行结束后地图的方位
            pitch: 60,//飞行结束后地图的倾斜角
            speed: 1,//平均速率
            curve: 1, //随着飞行路径出现的缩放曲线
            easing(t) {
                return t;
            }
        });
    }
    </script>
</body>

除了上面介绍的地图基础操作，大家还可以在在线文档中按照示例预览中的示例添加其他功能，实现自己想要的功能，赶快试试吧。下面是上述操作的完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>地图基础操作</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        #info {
            color: #000000;
            position: absolute;
            top: 60px;
            left: 20px;
            font-weight: bold;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.0.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <div id="info"></div>
    <div class="btn-group">
        <button onClick="mapZoomIn()">放大地图</button>
        <button onClick="mapZoomOut()">缩小地图</button>
        <button onClick="getMapLevel()">获取地图层级</button>
        <input type="number" placeholder="0<=value<=22" />
        <button onClick="setMapLevel()">设置地图层级</button>
        <button onClick="getmapbearing()">获取旋转角</button>
        <input type="number" id="bearing" />
        <button onClick="setmapbearing()">设置旋转角</button>
        <button onClick="getmappitch()">获取俯仰角</button>
        <input type="number" id="pitch" placeholder="0~85"/>
        <button onClick="setmappitch()">设置俯仰角度</button>
        <button onClick="changeViewer()">视角切换</button>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map', // 地图容器 id
            style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
            center: [120.71205084518476, 31.29266278954009, 0], // 地图初始中心点
            zoom: 16, // 地图初始级别
            userId: '***', // 授权码
        });

        function mapZoomIn() { //放大地图
            map.zoomIn()
        }
        function mapZoomOut() {//缩小地图
            map.zoomOut()
        }
        function getMapLevel() {//获取地图层级
            const zoom = map.getZoom();
            document.getElementById('info').innerText = zoom;
        }
        function setMapLevel() {//设置地图层级
            let zoom = Number(document.querySelector('input').value)
            if (zoom < 0 || zoom > 22) {
                alert("超出范围");
                return;
            }
            map.setZoom(zoom)
        }

        function getmapbearing() {//获取地图旋转角度
            const bearing = map.getBearing();
            document.getElementById('info').innerText = bearing;
        }
        function setmapbearing() {//设置地图旋转角度
            let inputValue = document.getElementById('bearing').value;
            map.setBearing(inputValue)
        }
        function getmappitch() {// 获取地图仰俯角
            const pitch = map.getPitch(); 
            document.getElementById('info').innerText = pitch;
        }
        function setmappitch() {// 设置地图仰俯角
            let inputValue = document.getElementById('pitch').value;
            if (Number(inputValue) < 0 || Number(inputValue) > 85) {
                alert('输入有误-请输入0-85之间的数值')
                return;
            }
            map.setPitch(inputValue)
        }
        function changeViewer() { //切换视角
        map.flyTo({
            center: [120.7244404767631, 31.29541401755057, 0],
            zoom: 15,
            bearing: 40,
            pitch: 60,
            speed: 1,
            curve: 1,
            easing(t) {
                return t;
            }
        });
    }
    </script>
</body>

</html>

关注Mapmost，持续更新GIS、三维美术、计算机技术干货

Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态