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）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。
2823
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
