mapbox-gl 使用中遇到的问题与解决办法

此文用于总结一下mapboxgl使用过程中遇到的一些问题。

1.图层顺序

问题：不知道如何对多个图层进行排序

解决办法：利用  addLayer(layer,[before])   这个函数对图层顺序进行控制。这个函数的第一个参数是要添加的图层a，第二个参数是另一个图层的名字b（字符串形式）。如果图层b存在，那么图层a会被放置在图层b的前面。这让图层可以放置在图层栈里额任意位置。

例子：

map.addLayer(
{
 "id": "<新图层名>",
 "type": "circle",
 "paint": {
           "circle-radius": 2.5,
           "circle-color": "#007cbf"
           },
 "source": "biketrail1_3"
 },
"<下方图层名称>")
 

2.聚集，把'K'换成‘千’

使用mapbox的聚集功能时，可以注意到当聚集的数字超过1000时会缩写为以k为单位的数，如  1.3k

如果想要把这个英文的单位转为中文的“千”应该怎么做呢？

首先去github上找mapbox-gl-js的源码，在源码里用find in path搜索“cluster”,发现有一个包的名字叫做“supercluster”,有关聚集的代码应该在这里，node_modules\supercluster

看源码，发现了这样一个函数：getClusterProperties

function getClusterProperties(cluster) {
    var count = cluster.numPoints;
    var abbrev = count >= 10000 ? Math.round(count / 1000) + 'k' :
                 count >= 1000 ? (Math.round(count / 100) / 10) + 'k' : count;
    return extend(extend({}, cluster.properties), {
        cluster: true,
        cluster_id: cluster.id,
        point_count: count,
        point_count_abbreviated: abbrev
    });
}

之后回到mapgl-gl-js.js文件里去搜这个函数getClusterProperties，把里面的k替换为千就行了。

之后用新的这个mapbox-gl-js文件替换原来的，运行测试的聚集html,就能发现已经成功！！！

【注意】当然，如果你配置了mapbox-gl-js的调试环境，那么可以直接在源码里修改，之后在mapbox-gl-js文件夹路径下运行  yarn build-min

就能得到修改后的js文件。

3、鼠标样式

如果想改变鼠标样式，可以用setCursor()函数，例子如下：

map.setCursor('default');

map.setCursor('pointer');

map.setCursor('wait');

如果是想要使用自己的图片，则为：

map.setCursor('url(./image/hand.png) 4 12, auto');

未完待续。。。。