最近遇到了一个糟心的事,由于一个业务场景需要使用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能越做越好。