prefacio

Como front-end de conducción autónoma, debe hacer un HMI de vehículo genial, monitoreo visual en 3D, etc. La exposición frecuente a algunos marcos gis y webgl es inevitable. Sin embargo, los autos sin conductor de nuestra empresa son diferentes a los de Tesla, Xiaopeng y Weilai, que son bien conocidos en el mercado. La mayor parte del negocio de la tecnología de línea principal está en los puertos. Como todos sabemos, los puertos generales, el gobierno y los proyectos empresariales generalmente no pueden acceder a la red externa para la seguridad de la red. Por lo tanto, es muy importante que una biblioteca pública pueda resolver varios escenarios comerciales (intranet de red pública) y pueda implementarse fuera de línea sin depender de la red externa.

Al principio usamos capas abiertas, uso sin conexión, carga de mapas, carga y edición de gráficos geojson, un excelente rendimiento está en línea con nuestro negocio. Pero openlayers solo tiene visualización 2D, lo cual no es suficiente si queremos hacer un mapa visual 3D genial. ¿Existe una solución que esté a la vez en línea con nuestro negocio y una pantalla 3D genial? La respuesta es sí, sigamos adelante.

Selección técnica

Requisitos del marco

fuente abierta
Se puede implementar sin conexión.
Admite la carga de varios servicios de mapas.
Geojson es compatible.
Admite pantalla 3D, visualización y edición de modelos glb/gltf.
Gran rendimiento y escalabilidad.
Curva de aprendizaje suave.
Buena comunidad, velocidad de reparación de problemas.

Frameworks webgl && Gis conocidos

Mapbox-gl.js
Cesio.js
Cubierta.gl
MapTalks.js
tres.js

Vale la pena mencionar que three.js en sí mismo no pertenece a gis, pero podemos lograr nuestras necesidades comerciales a través de algunos medios. Y las versiones de mapbox y maptalks anteriores a la 1.0.0 son todas visualizaciones 3D implementadas por el plug-in three.js. Combinando nuestras necesidades de marco, finalmente elegimos MapTalks.

MapTalks

Introducción a MapTalks

Lo primero que hay que decir es que MapTalks es un mapa tridimensional WebGL desarrollado de forma independiente por los chinos. En el entorno donde los marcos de mapas extranjeros dominan la lista y las reformas mágicas nacionales son de código abierto y se venden por dinero, no es fácil lograr tales logros, y solo este coraje es digno de nuestro elogio.

Ventaja de MapTalks

Optimización del rendimiento: la implementación subyacente independiente garantiza que haya más métodos de optimización del rendimiento.
Efecto de renderizado: el sistema de materiales basado en PBR hace que el efecto de renderizado del mapa 3D tenga infinitas posibilidades.
MapTalks se basa en formatos de datos abiertos y no bloquea a los usuarios en formatos o servicios de datos específicos.

MapTalks新旧版本对比

v1.0.0版本相比旧版，除了性能大幅度提升，还增加了很多新的功能和特性：

比如GeoJSONVectorTileLayer,3dtitle等，最重要的一点是这一次自身添加了对3D模型的渲染，包括hdr全局环境光，天空盒，天气效果，常用后处理泛光抗锯齿空间反射动画等等。老版本是通过社区一个热心大佬基于three.js实现的这些功能，性能和效果也是相当的出色，当然在新版本也得以了保留。详情请查阅maptalks.three: deyihu.github.io/maptalks.th…

这就体现了MapTalks的另一个优点。版本升级这么大，但是API还兼容老版本的（@three.js 好好学学！）这对于项目升级迭代无疑减少了大量的时间。以下就是我司业务对新老版本的使用的一个简单对比，新特性新功能远不于此，更多详情请查看官方文档：maptalks.com/

MapTalks配套工具

MapTalks IDE MapTalks：集成设计环境，三维地图场景设计软件

MapTalks Designer：矢量底图的配色软件

目前处于公测阶段，大家可以免费尝鲜。后期可能要收费吧,毕竟人家是要吃饭的。你可以理解这就是个低代码平台，动动手指就能轻松实现各种特效，哪怕你不懂代码，也可以！

优化两三事

即使再好的框架，也会因为使用不当导致你的项目达不到预期效果。尤其在webgl这类的项目，性能优化是重中之重。一个不留神，CPU，GPU消耗和温度都上去了，效果再牛逼机器挺不住了。下面我就说一下我们的优化策略和一些注意事项。

首先第一步打开开发者选项性能监视器。一旦出现cpu暴涨；JS堆大小，DOM接点只增不减的情况，那一定要格外注意，这会导致你的页面崩溃。可能是你的代码出现了问题，要认真断点排查

linux环境，假如你的生产环境是linux。千万注意显卡驱动是否正常，或者规定生产环境的硬件配置和系统版本。因为运行webgl项目时，浏览器会调用显卡资源，当你显卡驱动不正常时浏览器webgl就报错,项目大概率会出现运行不起来会是卡死情况。
模型的性能优化，尽可能减少模型不可见或者不必要的点线面，浏览器绘制模型点越多对机器的性能消耗越大。
模型的加载，考虑网络流量因素建议转换成GLTF或者fbx这类的二进制模型,使用promise.all 加上加载动画，提升用户体验。如果是局域网带宽足够，不是特大模型不建议压缩模型，因为解压缩本身就需要一定的性能消耗。
事件注册，setTimeout,setInterval,requestAnimationFrame,地图实例等在组件销毁时一定要注意解绑和销毁。
模型动画处理时，能用requestAnimationFrame坚决不使用setInterval，当浏览器达不到设定的调用周期时，requestAnimationFrame采用跳过某些帧的方式来表现动画，虽然会有卡滞的效果但是整体速度不会拖慢，而setInterval会因此使整个程序放慢运行，但是每一帧都会绘制出来。还有一点但你不在当前页面时requestAnimationFrame会自动休眠程序，setInterval则会一直执行，当你的电脑性能不够时就会出现页面崩溃的现象。下面是个小例子：

      let s = 0;
      let a = 0;
      setInterval(() => {
        s++;
        console.log("setInterval", s);
      }, 16);

      function animation() {
        a++;
        requestAnimationFrame(animation);
        console.log("requestAnimationFrame", a);
      }
      animation();
复制代码

涉及到数据组装计算，多层循环处理时，合理使用webworker,为渲染主线程分担压力。
使用vue，react频繁更新数据，模型动画操作时，要做好数据对比，避免重复数据一直触发。因为这不涉及虚拟dom，框架不会为你做diff对比。
数据量大且请求频繁，建议使用websockt+protobuf代替http+json,减少单帧数据量大小，提升稳定度

还有很多等我想起来在补充吧。

总结

En general, en términos de facilidad de uso, escalabilidad y efectos, MapTalks es un marco de mapas 3D webgl muy bueno, pero debido a la versión beta pública de la versión actual, la introducción del paquete aún es un poco complicada, no hay Soporte de TS, hay algunos errores, aún no lo suficientemente estables. Sin embargo, el equipo oficial ha estado escuchando las opiniones de todos y mejorándolas activamente. Tal vez obtengas la versión exclusiva de Zhenshen. Es comprensible en la etapa beta pública, y estamos dispuestos a dedicar más tiempo al excelente marco desarrollado de forma independiente por los chinos. No presentaré la API en este artículo, porque el oficial en sí es muy detallado y atento, y hay varios ejemplos y API para que todos puedan consultar.

Sitio web oficial de MapTalks: maptalks.com/

Biblioteca principal de MapTalks: maptalks.org/

Complemento MapTalks.tres: deyihu.github.io/maptalks.th…

Grupo QQ: 971657972

Genial mapa visual en 3D? te enseño