AntV 的L7可视分析引擎是要放弃了吗？

howcode
2,101 阅读4分钟

最近遇到了一个糟心的事，由于一个业务场景需要使用GIS地图，然后使用了AntV L7地理空间数据可视分析引擎，过程其实一直很顺畅的，但直到前两天，一切都变了

首先和大家说下我的使用过程

使用过程

上手还是很简单的，安装依赖

npm install @antv/l7
npm install @antv/l7-map

使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import { Scene, PointLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
export default {
  data() {
    return {};
  },
  mounted() {
    const scene = new Scene({
      id: "map",
      map: new GaodeMap({
        pitch: 0,
        style: "dark",
        center: [121.435159, 31.256971],
        zoom: 14.89,
        minZoom: 10,
      }),
    });
  },
};
</script>
<style>
::-webkit-scrollbar {
  display: none;
}

html,
body {
  overflow: hidden;
  margin: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>

到此就结束了，页面也能生效

在过去，由于是本地开发环境，我一直没有加入token，虽然控制台有警告信息您正在使用 Demo 测试 Token, 生产环境务必自行注册 Token 确保服务稳定 高德地图申请地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare Mapbox地图申请地址 https://docs.mapbox.com/help/glossary/access-token/!，但这并不妨碍地图的展示

注意，我在new GaodeMap时，传了个style: "dark",当时是黑暗模式是生效的

变故

由于一直没加入token，前两天发现控制台报错了<AMap JSAPI> KEY异常，错误信息：USER_KEY_RECYCLED，地图也加载不出来了，于是我按指引去申请了token

const scene = new Scene({
  id: "map",
  map: new GaodeMap({
    pitch: 0,
    style: "dark",
    center: [121.435159, 31.256971],
    zoom: 14.89,
    minZoom: 10,
    token:"xxxxxx"
  }),
});

加上token后，地图终于恢复展示了，但是！！我的dark黑暗模式呢？？

一开始我以为是我的问题，但我想了想，我代码也没改啥地方呀，就加入了个token怎么就不能黑暗起来了呢？有些朋友会说：既然是你加入token影响的，那你把token去掉重新测试下不就好了？问题就在：我不加token的情况下，地图目前是无法加载出来了

积极应对

此时我还在想，一定是我哪块代码影响了这里吧，毕竟我看官网的例子，demo都是使用了dark，个个好着呢

我于是决定新建个项目，重新排查问题

结果很舒服！dark模式还是没生效，我点开官网给出的vue例子，发现将里面的style修改成dark后是生效的，这我不能接受啊！

image.png

于是我把package.json中的dependencies都修改成和它保持一致

"dependencies": {
    "@antv/l7": "latest",
    "@antv/l7-maps": "latest",
    "vue": "^2.5.22"
  },

然后还是哭了，根本不生效

于是我整个项目都按它的demo来实现，结果还是一样！

222.png

我的dark模式呢！！还有没有天理了！

最后，我找到了官方的HTML使用CDN实现的demo，发现也是无法生效！！！最离谱的是官方的demo也是无法实现黑暗模式！

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>创建地图场景</title>
    <style>
      html,
      body {
        overflow: hidden;
        margin: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/@antv/l7"></script>
    <script>
      const scene = new L7.Scene({
        id: "map",
        map: new L7.GaodeMap({
          style: "dark", // 样式URL
          center: [121.435159, 31.256971],
          zoom: 14.89,
          minZoom: 10,
          pitch: 0,
          token: "xxxxxx",
        })
      });</script>
  </body>
</html>

最最后，尝试了使用scene.setMapStyle('dark')的api，发现也是没法生效 affa2d677ca68d207f680bca5ea32c60.jpg

但是我发现，如果不使用new L7.GaodeMap，使用demo，将mapStyle改成dark，是生效的，并且setMapStyle也是生效的，这直接把我整破防了

scene.on("loaded", () => {
    scene.setMapStyle('dark');
})

找官方baba去反馈

我想的是：这事总不能就这么办吧，找官方反馈下！

结果很舒服！除了上GitHub提iisue，其他途径压根找不到官方baba！

其实如果没有贴反馈途径就算了，但是你官网贴了好几个技术支持服务群，我一个都联系不上，这算什么事呢？经评论提醒，是钉钉群，这算我的一个疏忽

666.png

唯一一个能查到信息的群 555.png

后话

我自己也坚持在做开源，深知维护开源项目的难易性，这里面最需要的其实是被理解，然后积极沟通相互把一件事情去做好，如此知名的开源库发生这样的事情属实有点让我有点emo，至少可以提供个更好的途径让大家去沟通，因为GitHub反馈真的很慢，希望AntV能越做越好。

2023.10.23更新

在一篇文章中，找到了解决的方法，在public的index.html文件中，加入以下代码即可解决

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "xxxx", // 高德平台申请时的秘钥
  };
</script>

并且在高德平台中，也能找到相应的提醒

111.png

其实我之前意识到：这可能不是AntV L7的问题，而是高德平台最近的api变动导致的，但万万没想到人家在2021年12月02日前就提醒了，而AntV L7官网上大量demo、快速上手，甚至注意事项里面都没提及这件事，这是我觉得做的不够好的地方。

avatar
文章
阅读
粉丝