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能越做越好。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐4 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄5 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser7 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la7 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui7 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui