前言
高能预警，本篇不是软广，而是一篇彻彻底底的硬广!
作为一名GIS研发人员，在GIS行业摸爬滚打了快5年，从项目开发人员（调接口）慢慢转变成为了接口开发人员（写接口，好吧，还是调接口😓）。由于前期项目大多偏向三维场景，使用的也是GIS圈比较为人熟知的Mapbox、Cesium等开源框架，但往往由于框架受限，导致无法满足甲方爸爸的全部需求。比如说甲方要求在Mapbox的矢量场景内浏览倾斜模型，当时由于能力有限，做的十分痛苦，在疯狂加班中终于把倾斜模型塞进了Mapbox中，但是还是面临加载卡顿、存在闪面等诸多问题。直到现在，类似这种二三维一体化的地图引擎开箱即用，且用的顺心的，市面上真的很少，往往是缺胳膊少腿，仍然无法满足项目的全部需求。
为此，我们团队总结了现有大多项目的需求，从底层研发了一款二三维地图引擎Mapmost SDK for WebGL（下面简称Mapmost引擎），涵盖了三维GIS项目中的大多数功能，并持续迭代，丰富地图引擎的二三维能力，旨在减少项目研发人员压力，真正做到你要的我们都有，没有的继续抓紧迭代（嗐，还得加班😣）。
好的，开始文章的正文，由于篇幅有限，本篇先从最近项目需求最多的地下空间展示、以及三维空间分析开始介绍下这款引擎的使用方式。
二维矢量瓦片加载
二维矢量瓦片作为地图引擎的基本功能，我们也是将其样式文件直接在初始化地图中进行配置，以帮助开发人员快速上手
let map = new mapmost.Map({
useWebGL2:false,
container: 'map', // 地图容器
style: "./lightMap.json", // style URL
center: [120.74603465203592, 31.30605899929158],// 中心经纬度
zoom: 16.810035105070947, // 地图层级
pitch: 60, // 地图倾斜角
bearing: 0, // 地图旋转角
userId:''//授权码ID，需要到官网领取哦
});
Mapmost矢量瓦片效果
三维模型加载
二三维一体化引擎当然还需要添加三维模型，为此我们在底层进行了模型的加载，并在上层应用侧设计了模型加载的接口
let models_obj = ["./building.glb"].map(item => ({
type: 'glb',
url: item
}));
let options = {
id: 'model_id',
type: 'model',
models: models_obj,
center: [120.67727020663829, 31.31997024841401],
};
map.addLayer(options)
引擎内置了PBR渲染管线，支持HDR文件一键导入，我们添加一份HDR文件到地图初始化参数中，除此以外，还支持改变场景曝光度值：
let map = new mapmost.Map({
。。。，
env3D: {
defaultLight: true,
exposure: 2.8,
envMap: './WhiteBG_Ref_1K.hdr'
},
});
Mapmost三维模型光照效果
地下空间
除了地上三维场景的展示，我们还打通了地下空间，设计方式参考Arcgis突破最大倾斜角的方式，使得三维相机能够进行地表下探，全方位360°展示地下模型。
这里又要开启碎碎念了🤣，三维地图引擎打通地下空间首先就要解决二维同面的问题，特别是对于重矢量瓦片图层的引擎来说。在世界空间中，二维的点、线、面其实是在同一水平面，但放到图形引擎中，为了保证空间上的有序，各家引擎都各自实现了一套算法，比如同样强调矢量瓦片的Mapbox来说，他采取的便是GL的DepthRange接口，按照图层先后顺序叠放图层，虽然解决了顺序和闪面问题，但带来的问题便是地下空间不支持，地下模型往往要置于地上浏览。Cesium引擎则采取了对数深度缓冲，将原本一大块远离相机的空间区域拉回高精度区域，同时对各个要素增加了一点深度偏移量，来解决闪面问题，这一方法看似完美，但却不适用于类似我们具有高度可扩展性的引擎。
因此，我们团队前期对这块思考的挺多，也在之前版本中进行不断尝试，最后采取了稳定的深度偏移策略，同时满足地上和地下空间。除此以外，地下场景的相机还要做到地图定位参数和相机参数的打通，由于篇幅有限，感兴趣的小伙伴可以关注我下次介绍下。
我们只需在地图初始化参数中扩大最大倾斜角，突破90°，就能实现相机下潜，浏览地下模型啦.
let map = new mapmost.Map({
。。。，
maxPitch:135 // 最大倾斜角扩大到135°
});
下面的效果图就是地下空间下轨道交通地铁站模型的展示。
Mapmost地下空间模型浏览
开挖分析
除了利用扩展倾斜角的方式浏览地下场景，我们还研发了地表开挖接口，把挡在视野下的地表随意裁剪，暴露出隐藏在地表之下的模型.
let excavation = new mapmost.ExcavationAnalysis(map);// 开启开挖分析
excavation.analyse({
// 裁剪区域，支持多个多边形裁切
range:[
[
[120.67622883526349, 31.322699660272306],
[120.67622883526349, 31.32289312008625],
[120.67645314913744, 31.32289312008625],
[120.67645314913744, 31.322699660272306],
[120.67622883526349, 31.322699660272306],
]
],
depth:30, // 裁剪深度
sideImg:'./huise.png', // 裁剪周边纹理，这里选用的是灰色图
bottomImg:'./huise.png' // 裁剪底部纹理，这里选用的是灰色图
})
Mapmost地下室效果
相同的开挖接口，还能直接作用于地形：
Mapmost地形开挖分析效果
可视域分析
包括开挖分析在内，引擎内置了诸多空间分析功能，比如可视域分析，我们还增加了一些辅助参数，帮助使用者通过简单方便的调参，最后达到心里预期的效果，官网在线文档地址指路👈：
let excavation = new mapmost.ViewshedAnalysis(map);// 开启可视域分析
// 分析参数
let opt = {
position: [120.7669270700174, 31.30360462347376, 800],
pitch: 60,
bearing: 57,
fovX: 90,
fovY: 45,
distance: 3000,
visibleColor: "#007f00",
visibleOpacity: 0.3,
invisibleColor: "#990000",
invisibleOpacity: 0.5,
wireframeColor: "#ffff00",
wireframeDisplay: true,
wireframeDensity: 8,
}
// 开始分析
analysis.analyse(opt);
Mapmost可视域分析效果
后记
前阵子和美术同学一起丰富了地图引擎的风格化场景，赶忙递上热乎的Mapmost水墨风场景：
Mapmost水墨风效果
如果你是GIS行业的开发人员，或是高校内的学生，恰逢纠结使用何种地图引擎，我希望通过这一篇的引入推荐，让你了解到我们Mapmost引擎，说不定引擎已经集成了你想要的功能。也希望同行业的开发人员带着“找茬”的心态使用我们引擎，我们团队一直秉承着开放的心态，欢迎提出宝贵的意见。
官网在线文档指路：Mapmost示例文档
点击这里跳转Mapmost官网体验