不装了，摊牌了，这款地图引擎你真的值得拥有

前言

高能预警，本篇不是软广，而是一篇彻彻底底的硬广!

作为一名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引擎地址：