高德地图API使用笔记

1.前言

这几天，我在研究使用高德地图API,因为已有的项目使用的高德API是1.4，Loca是1.3，我这里直接升级到了API 2.0,Loca 2.0了,并且没有使用vue-amap，直接使用了原生的api进行创建。首先我这里有一个问题，如果你看Loca 2.0 的参考,会发现没有地方进行数据的绑定，下面是layer的全部方法：

其实还有一个方法就是setSource(),它接受一个 Loca.GeoJSONSource 对象，可以设置相关的数据源。

2.图层点击

3.绘制虚线

在官方的文档中，其实有说明，LineLayer 图层是支持 虚线 配置的，但是实际上并没有这个参数的说明。我后来在 示例中找到了dashArray这个参数的使用，

1
2
3
4
5

// 高德配置
dashArray: [10, 0, 10, 0]

// 释义 "1"是第一段虚线长度，"2"紧跟着的间隔，"3"是第二段虚线的长度，"4"是第二段虚线后边的间隔
lineDash:[1,2,3,4]

官方开发人员在群里说，下一个版本会改成 dash 参数，我当前用的版本是Loca 2.0。

4.问题汇总

我这里的问题，都是基于 JS API 2.0 和 Loca API 2.0的，后期官方可能会修复部分的问题。

(1) 地图切换后无法渲染要素
使用vue的时候，在路由中第一次进入的时候可以显示绘制的图层，但是切换到其他的路由，再切换回来之后，地图可以显示，也可以打印出来地图和loca变量，但是上面的图层没有显示出来，没有报错，图层也加上了，这是什么原因？

【解决方案】
官方给出的答案，是在路由切换的时候，将组件进行销毁操作，这个问题，后期官方会进行修改。

(2) 无法在同一个位置绘制点
我监听地图函数，点击点时候创建了一个Marker，并在这个marker周围用new AMap.Circle 绘制了一个圆，当我从地图上移除了这个marker和circle之后，再次点击同一个位置，地图的click就不会响应了，但是在这个圆之外，就可以响应地图点击事件，再次创建一个marker和圆，感觉是地图上的circle没有清除，但是实际上，地图上已经没有了这个圆。

1
2
3
4
5
6

// 删除图像和marker
map.remove(state.marker);
state.marker=null;
state.circle.destroy();
map.remove(state.circle);
state.circle=null;

【解决方案】
群里的大佬给出的方案，就是不要将地图上的对象放到响应式的数据中。

(3) 地图上的infowindows中的滚动条滚动时导致地图缩放
在使用infowindows的时候，如果infowindows中有滚动条，使用鼠标滚轮滚动的时候，就会导致地图也滚动。

【解决方法】
还是高德钉钉群里的大佬说的，就是监听鼠标滚轮事件，然后禁止事件冒泡，我这里使用的时el-scroll，并且是vue 3.0，主要代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<template>
    <div class="info-wrap">
        <div class="name">{{currAttr.JZMC}}</div>
        <el-scrollbar style="height: 200px;" class="scroll-wrap" ref="scrollbar">
        </el-scrollbar>
    </div>
</template>

<script>

export default {
  setup(){
    const scrollbar = ref();  // scrollbar是页面ref后面对应的名字
    // 组件挂载时执行
    onMounted(()=>{
      nextTick(()=>{
        // 监听鼠标滚轮事件，禁止冒泡，解决高德info穿透的bug
        let scrollWrap=scrollbar.value.scrollbar;
        scrollWrap.addEventListener("wheel",function(e){
            e.stopPropagation();
            return false;
        })
      })
    });

    return {
      scrollbar,
    }
  }
}

</script>

5.数据解析

6.绘制区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 显示行政区
var disLayer=new AMap.DistrictLayer.Province({
    zIndex:9,
    adcode:['330110'],
    depth:2,
    styles:{
        'fill':'rgba(0,0,0,0.6)',
        'province-stroke':'cornflowerblue',
        'city-stroke': 'white',//中国地级市边界
        'county-stroke': 'rgba(255,255,255,1)',//中国区县边界
        'stroke-width':2,
    }
});
// 添加到地图上
mainmap.addLayer(disLayer);

6.Deepin上的浏览器显示版本过低

我在Deepin上进行开发，无论使用自带的浏览器，还是使用最新的deb安装的谷歌浏览器，都出现了问题。显示：浏览器版本过低，请升级最新版本的浏览器，或使用高版本火狐、谷歌等浏览器。

我以为是自己浏览器版本不对，从官方下载了谷歌，也下载了火狐，都是显示这个错误，我的谷歌的浏览器：版本 96.0.4664.45（正式版本） （64 位）。

[尝试]
经过高德钉钉开发群里的 @吴桐 进行了点播，输出了浏览器的显卡信息：

1
2
3
4
5
6
7
8
9
10

(function () {
    var canvas = document.createElement('canvas'),
        gl = canvas.getContext('experimental-webgl'),
        debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

    console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
})();

/// 结果输出了
// ANGLE (Intel, Mesa Intel(R) UHD Graphics 630 (CFL GT2), OpenGL 4.6 (Core Profile) Mesa 20.3.4)

[解决]
在加载js代码的以前，强制开启GPU,这个问题同样出现在手机端浏览器中，在电脑端会显示出地形渲染，在手机端就会显示一片空白，也是通过在脚本加载之前 forceWebGL 进行处理。

1

window.forceWebGL = true; // 强制启动WebGL 

7.手机无法开启地形渲染

我在2.1Bate版本中开启了地形，用了上面的 forceWebGL 属性，出现的问题就是在地图放大到一定的级别的时候，会有地形显示，但是缩小到一定的范围之后，就是空白。手机是iphone6s，无论是在谷歌浏览器，还是safari浏览器，还是钉钉、微信自带的浏览器都是这个问题。

我做了很多测试，都是不行的，这是手机上不同分辨率下的截图，可以看到，缩小到一定的级别，连道路网都没有了，这可以排除网络的问题。

当我关闭地形显示，重新部署，虽然缩小地图不再出现空白了，但是只渲染了注记层，有时候渲染出来了地图道路图层，但是当移动地图的时候，发现只有注记层跟着移动，底图道路面等不跟着移动。而且我自己使用Loca加载的geojson也会复制一份跟随注记移动，但是会原始的那一份还是不动。

最初的问题，就是开启了地形显示之后，手机上就是一片空白，然后我开启了window.forceWebGL = true; 地图缩小到一定的级别，还是空白，但是放大到十几二十几级，地形和底图什么的都先显示了，我后来关闭了地形显示，再次测试，还是出现了问题。重新部署，虽然缩小地图不再出现空白了，但是只渲染了注记层，有时候渲染出来了地图道路图层，但是当移动地图的时候，发现只有注记层跟着移动，底图道路面等不跟着移动。而且我自己使用Loca加载的geojson也会复制一份跟随注记移动，但是会原始的那一份还是不动。手机是iphone6s,浏览器无论是用谷歌浏览器，还是safari浏览器，还是在钉钉里面用钉钉直接打开这个网址，都是同样的问题。

我怀疑jssdk 2.1Beta 和loca 2.0是不是不兼容呢，只要不使用loca加载json，就不会出现问题。如果使用了loca加载了数据，就会出现缩小到一定的级别，就会出现空白的现象。在高德开发者交流群里，官方给出的回应是，现在不支持，结果就没有了下文了，看来，只能等到官方自己修复了。

8.配置密钥

浙政钉里面的地图无法显示自定义样式，已经开启了 window.forceWebGL = true; 这怎么解决？ 群里有人说要配置密钥，于是我就尝试了配置密钥。其实我以前配置过一次，后来忘记了。

前端配置：

1
2
3
4
5

// 在使用 AMapLoader.load API加载高德地图之前
window._AMapSecurityConfig = { // 加载密钥
    serviceHost:'https://openmap.tech/_AMapService'
}

后端配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义地图服务代理
location /_AMapService/v4/map/styles {
    set $args "$args&jscode=密钥";
    proxy_pass https://webapi.amap.com/v4/map/styles;
}
# 海外地图服务代理
location /_AMapService/v3/vectormap {
    set $args "$args&jscode=ccaa0ac9b3067bef75f9d32ee853a78c";
    proxy_pass https://fmap01.amap.com/v3/vectormap;
}
# Web服务API 代理
location /_AMapService/ {
    set $args "$args&jscode=ccaa0ac9b3067bef75f9d32ee853a78c";
    proxy_pass https://restapi.amap.com/;
}

9.浙政钉上无法显示自定义样式

在火狐浏览器中，在其他的一些浏览器中，都是可以显示自定义的样式，但是在浙政钉上，确实显示不了。官方没有答案，就在高德开发者群里的交流圈问了，刚开始让我配置密钥，可是我配置了密钥也不行。有人回答说：“window.forceWebGLBaseRender = true 试试”，结果试来试去，都不行。最后回答说：“那就没办法了，没有硬件加速，用不了自定义地图和3D地图”

高德地图在浙政钉中有如下问题：

• 1.无法使用影像地图
• 2.无法使用loca模块

【解决方案】
我问了高德的开发人员，他说没有GPU加速，无法使用自定义地图和3D地图。我问了钉钉的开发人员，他说目前钉钉内置的浏览器不支持GPU加速，我参考了钉钉的开发文档，没有方法能直接调用系统默认的浏览器打开外部页面。现在只能是说检测到钉钉环境，就弹出一个窗口，说让用户自己在浏览器中打开页面。