高德地图API使用笔记二

1.前言

我这里还是使用的jssdk2.0和loca2.0进行的测试。

2.自定义地图无法叠加Loca

这个问题让我非常的头疼，我使用了Loca添加了部分的资源，但是在使用 AMap.GLCustomLayer 进行自定义加载图层的时候，出现了问题，就是无法将Loca和GLCustomLayer进行结合使用。在官方的例子下，添加loca容器，原有的三个盒子就不见了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var map = new AMap.Map('container', {
    center: [120.092, 30.355],
    zooms: [2, 20],
    zoom: 14,
    viewMode: '3D',
    pitch: 50,
});
// 创建loca
var loca = new Loca.Container({
    map: map,
});

/**
 * 创建自定义图层
 */
var gllayer = new AMap.GLCustomLayer({
    /** 省略代码 */
});
map.add(gllayer);

【解决】
这里的 AMap.GLCustomLayer 添加，必须在 new Loca.Container 之前，否则就不会出现自定义的图层

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

var map = new AMap.Map('container', {
    center: [120.092, 30.355],
    zooms: [2, 20],
    zoom: 14,
    viewMode: '3D',
    pitch: 50,
});

var gllayer = new AMap.GLCustomLayer({
    /** 省略代码 */
});

map.add(gllayer);
// 创建loca
var loca = new Loca.Container({
    map: map,
});

交流圈中说，这个问题是已知的问题，后面排期会解决，我用的是 Loca 2.0 和 jssdk 2.0，关键是要急用，这就比较尴尬了。

3.ZMarkerLayer无法嵌入

我使用官方的这个例子国贸数据分布 里面的数据，潜入自己的项目中，一模一样的代码，结果弹出了这个错误：Error while reading CSS rules from null SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet ，我上面两条是我自己的map和loca,应该没有什么问题的，数据也都是官方的数据，代码都是一样。

这个问题，看来是MacBook上的Firfox独有的。

后来我发现，这个问题不大，虽然报了错误，但是不影响渲染。

4.ZMarkerLayer出现偏移

当我使用官方提供的例子 “国贸数据分布” ，嵌入到自己的项目中，就是有问题，这个边框还是有点偏移。

应该是全局的样式影响到了这个ZMarker的创建，因为ZMarker本质上就是一个dom，不过是将它输出为了canvas上。后来经过我的努力，最终解决了找到了罪魁祸首,就是这个 box-sizing，如果设置了 border-box ，就会出现偏移的情况。

1
2
3

*:not(input){
  box-sizing: border-box;
}

【解决】
可以在ZMarker创建的时候，将content中的 box-sizing:initial 进行重新初始化。

5.火狐浏览器无法渲染部分样式

高德地图在 macos 的火狐浏览器(Firefox Developer Edition 104.0b10 64 位)上有问题，loca 2.0版本，比如 标牌点-某片区的房价情况 在火狐浏览器上显示时，没有下面的呼吸点。

在谷歌浏览器上显示的比较全，会有下面的呼吸点。

打开火狐的控制台，出现了：Uncaught TypeError: console.error is not a function，还有就是：同源策略禁止读取位于 https://a.amap.com/Loca/static/loca-v2/demos/images/prism_blue.png 的远程资源。这个可能不是主要的问题，当我在自己的项目中嵌入这些代码的时候：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 呼吸点 金色
var scatterYellow = new Loca.ScatterLayer({
    loca,
    zIndex: 110,
    opacity: 1,
    visible: true,
    zooms: [2, 26],
    depth: false
});

scatterYellow.setSource(geo);
scatterYellow.setStyle({
    unit: 'meter',
    size: function (i, feat) {
        return feat.properties.price > 60000 ? [90, 90] : [0, 0];
    },
    texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_yellow.png',
    altitude: 20,
    duration: 2000,
    animate: true,
});

出现的错误会更多：Error while reading CSS rules from null SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet。Error while reading CSS rules from null SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet。Error: (regl) invalid texture shape。虽然官网的例子没有弹出这些问题，但是下面的呼吸点，都是无法显示的。

6.内存泄漏问题排查

当我在使用 圆点—全国粤菜分布情况 这个示例的时候，总是会出现内存不断飙升的情况，我测试了官方的例子，却又没有问题。我的项目使用的是 vue 3.0 进行开发的，我修改了很多的代码，把能想到的代码都进行了清理，最后只剩下 loca.add(pointLayer); 只要我一加这句话，那么内存就会不断的飙升，真是奇了怪了。

【尝试】
1.后来我看了看自己的loca创建的代码，我使用的是store进行的存储，本来我以为因为响应式的问题，后来我改了，还是不行。

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

getters:{
    loca(state){
      let tempLoca=null;
      if(state.loca){
        tempLoca=state.loca;
      }else{
        tempLoca=new Loca.Container({
            map:state.map
        })
        tempLoca=markRaw(tempLoca);
        
        state.loca=tempLoca;
      }
      return tempLoca;
    }
  },

2.奇怪的是，在谷歌浏览器中没有出现类似的内存不断飙升的问题，但是在火狐浏览器中，就会出现这个问题。

3.使用官方的例子，在单独的html开发，也不会出现内存飙升的问题，主要的问题可能就是在vue环境中会出现这个问题。

7.热力图

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
33
34
35
36
37
38

/**
 * 初始化热力图
 */
function initHeatMap(){
    if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
        return
    }
    axiox({
        method:"get",
        url:"./data/heatmapdata.json"
    }).then(res=>{
        return res.data;
    }).then(res=>{
        let heatmapData=res;
        mainMap.plugin(["AMap.HeatMap"],function() {
        //初始化heatmap对象
        let heatmap = new $AMap.HeatMap(mainMap, {
            radius: 25, //给定半径
            opacity: [0, 0.8],
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: heatmapData,
            max: 100
        });
        });
    }).catch(err => {
        console.log(err)
    })
}

从最大值到最小值归一化到 0-1 区间， 然后颜色对应如下：

1
2
3
4
5

0.5: 'blue',
0.65: 'rgb(117,211,248)',
0.7: 'rgb(0, 255, 0)',
0.9: '#ffea00',
1.0: 'red' 。

例子中的半径设置为了25，还有一个透明度的变化，从内到外依次变淡