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

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

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

使用过程

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

perl 复制代码
npm install @antv/l7
npm install @antv/l7-map

使用

js 复制代码
<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

arduino 复制代码
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后是生效的,这我不能接受啊!

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

js 复制代码
"dependencies": {
    "@antv/l7": "latest",
    "@antv/l7-maps": "latest",
    "vue": "^2.5.22"
  },

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

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

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

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

js 复制代码
<!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,发现也是没法生效

找官方baba去反馈

我想的是:这事总不能就这么办吧,找官方反馈下!

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

其实如果没有贴反馈途径就算了,但是你官网贴了好几个技术支持服务群,我一个都联系不上,这算什么事呢?

唯一一个能查到信息的群

后话

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

相关推荐
一水鉴天3 小时前
整体设计 定稿 之24 dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之1)
前端·html
_杨瀚博3 小时前
微信支付集成_JSAPI
前端
polaris_tl3 小时前
react beginwork
前端
亮子AI4 小时前
【css】列表的标号怎么实现居中对齐?
前端·css
梦想的旅途24 小时前
媒体文件(图片/文件)的上传与管理:获取 Media ID 的技术细节
前端·http·servlet
一水鉴天4 小时前
整体设计 定稿 之22 dashboard.html 增加三层次动态记录体系仪表盘 之1
前端·html
张拭心4 小时前
程序员越想创业,越不要急着动手
前端·人工智能
舒一笑5 小时前
在低配云服务器上实现自动化部署:Drone CI + Gitee Webhook 的轻量级实践
前端·后端·程序员
龙国浪子5 小时前
从零到一:打造专业级小说地图设计工具的技术实践
前端·electron
一水鉴天5 小时前
整体设计 定稿 之24+ dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之2)
开发语言·前端·javascript