初识百度地图JSAPIThree

GIS咕噜
293 阅读3分钟

引言

最近在用百度地图JSAPI开发系统时，发现百度地图开发者官网上线了一个Three版的JSAPI，从官方介绍看，这是一个基于Three.js开发的二三维一体化地图引擎，官方介绍页面的效果看着还不错，3D效果比较酷炫，看得人心里咕噜咕噜的，于是GIS咕噜决定动手实践一下，看看效果如何。

动手实践

准备

想要测试这个地图引擎，必须有个前端工程项目。我是用cursor生成的一个基于vite和react的空白项目。

安装

接下来执行安装命令，完成后就可以在页面引入JSAPIThree

npm install @baidumap/mapv-three

配置

官方文档配置步骤很详细，必须按照文档配置，否则后续会踩坑，笔者一开始偷懒想跳过这些步骤，结果后面报错一个接一个，还不如一开始就老老实实按文章走。

  1. vite配置

image.png 2. index.html页面配置

image.png 3. ak配置

image.png

在页面引入

function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) {
      return;
  }
    const engine = new mapvthree.Engine(containerRef.current, {
      map: {
          center: [116, 39],
          range: 100000,
          pitch: 80,
          projection: 'ECEF', // 这句是平面变成地球的魔法
      },
    });
    return () => {
      if (engine) {
          engine.dispose();
      }
  };
  }, []);
  return (
    <div className="App"  ref={containerRef}>
    </div>
  )
}

效果

地图出现了，很激动！！！哈哈，不过这个和之前的地图看着一样。

image.png 接下来才是见证奇迹的时刻，只需要把projeciton配置改为ECEF, 地图就变成一个地球了，旋转地球仪很丝滑，还是很酷炫的。或许这个就是为什么叫JSAPIThree的原因。

image.png 今天的尝试到此结束，接下来准备把官方宣传的一些Demo复刻一下，学习之路才刚刚开始。

报错处理

以下问题虽然是我没看文档导致的，但还是记录一下。

**报错1：**Uncaught Error: Unable to determine base URL automatically, try defining a global variable called MAPV_BASE_URL.

image.png 这个是因为我忘记配置index.html了。

**报错2：**没有有效百度地图AK，请设置BaiduMapConfig.ak或options.ak

image.png 这个是没配置地图ak的原因。

**报错3：**Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

image.png 这个是因为没配置vite的copy插件，配置完也得npm install rollup-plugin-copy

**报错4：**地图瓦片瓦片请求跨域失败

image.png 这个是配置地图ak了，但配置错了。谁能想到复制粘贴还能看错行，这种错误真是不该犯。

思考与见解

  1. 基于Three.js的地图引擎挺新鲜的，以前的地图引擎不管百度、高德还是腾讯，都是直接基于web原生的。两个各有利弊，原生webgl可以让地图引擎功能更聚焦，性能更佳，但扩展性差。基于three.js可以直接调用丰富的开源生态组件，对三维应用开发友好。
  2. 百度地图JSAPIThree这个地球是和Cesium一样的真正三维的地球，这和目前高德、腾讯，以及百度旧版的地图JSAPI是不一样的，它是可以完美兼容三维数据的。但真正的效果还需要写代码验证。
  3. 百度地图JSAPIThree安装还是比较简单和现代化，以前用的地图引擎都是要手动在html页面通过script标签引入，对于单页面应用很不友好。这个版本的地图引擎和其他现代化库的引入方式完全一致，和vite和webpack这种编译工具搭配很好用。

参考链接

百度地图JSAPIThree官网 lbsyun.baidu.com/faq/api?tit…

百度地图JSAPIThree开发指南 lbsyun.baidu.com/jsapithree/…

avatar
文章
阅读
粉丝