Leaflet.canvaslabel在Ajax异步请求时bindPopup无效的解决办法

目录

前言

一、场景重现

1、遇到问题的代码

2、问题排查

二、通过实验验证猜想

1、排查LayerGroup和FeatureGroup

2、排查Leaflet.canvaslabel.js

三、柳暗花明又一村

1、点聚类的办法

2、歪打正着

总结

---

前言

        在上一篇博客中介绍了基于SpringBoot的全国风景区WebGIS按省展示实践。在这篇博客中，关于旅游景点我是使用Leaflet.canvaslabel.js进行静态标注的，其实在案例中要实现点击风景区点，然后自动弹出它的其它信息，比如景点名称，所在省市县信息，还有设立年份。最开始打算采用bindPopup的方案，在编写代码的过程当中，发现一个有趣的问题。在点击所在省份之后，再把景点信息列表在地图上渲染出来，然后针对每个点绑定popup。但实际的情况是，界面上的景点点击后，没有任何反应，奇怪的是有时候又可以点。当时想着，如果是代码的绑定得有问题，肯定是都出不来，不存在一份代码，两种效果的情况。

        遇到了问题，便解决问题。在没有找到具体的问题前，首先检查代码的问题，然后检查相应的组件是否有什么缺陷，最后再梳理解决办法，大致的思路如此。本文在此背景下诞生，博文首先详细介绍了风景区展示时具体的问题，然后分析排查思路和方向，接着使用不同的方案验证思路，最后给出最终的解决方案。解决问题就是对症下药一样，找到了病根基本上就是药到病除，解决了问题的酸爽感一定让很多技术圈朋友深有体会吧。

一、场景重现

        我想在讲述一些解决办法之前，还是把碰到的详细问题描述清楚。首先是不至于让看到博文的朋友感到很诧异，第二是对于解决方案的前提条件有一个具象的描述。能让我们知道为什么会这样？出现了什么情况？我们要解决的问题是什么。这里结合代码和实际效果来讲解，这样可能比较有针对性。

1、遇到问题的代码

        这里将之前的第一版代码贴出来，肯定有朋友第一眼就能看到问题的所在，但当时折腾了我很久。也许旁观者清，也许是经验比较多，曾经遇到过，一下子就解决了。

/* 展示省份geojson范围*/
function showProvince(id){var myStyle = {color:"white",weight:5,"opacity":1,fillOpacity: 0};$.ajax({  type:"get",  url:prefix + "/geojson/" + id, dataType:"json",  cache:false,processData:false,success:function(result){if(undefined != provinceAreaLayer ){provinceAreaLayer.removeFrom(mymap);//先移除}if(result.code == web_status.SUCCESS){var geojson = JSON.parse(result.data);provinceAreaLayer = L.geoJSON(geojson,{style:myStyle}).addTo(mymap);//同时设置中心位置和级别，一般省份设置为7mymap.setView(provinceAreaLayer.getBounds().getCenter(),7);}},error:function(){$.modal.alertWarning("获取空间信息失败");});
}/*风景区展示*/        
function showScenicSpot(code){$.ajax({  type:"get",  url:prefix + "/datalist/" + code,  dataType:"json",  success:function(result){if(result.code == web_status.SUCCESS){var strokeStyleSet = "#23168d";var lat,lng,cityInfo;for(var i=0;i<result.data.length;i++){var dataInfo = result.data[i];var geomObj = JSON.parse(dataInfo.geomJson);if(i == 0){lat = geomObj.coordinates[1];lng = geomObj.coordinates[0];continue;}var radiusSize = 5;var content = "<strong>名称:</strong>"+dataInfo.name + "<br/><strong>级别:</strong>"+ dataInfo.level;content += "<br/><strong>所属行政区划:</strong>"+ dataInfo.province + "/" + dataInfo.city + "/" + dataInfo.area;content += "<br/><strong>评定时间:</strong>"+ dataInfo.evaluationTime ;var latlng = new L.latLng(geomObj.coordinates[1], geomObj.coordinates[0]);let marker = L.circleMarker(latlng, {radius: radiusSize,color: strokeStyleSet,labelStyle: {offsetX: 0, //横坐标偏移(像素)offsetY: 30, //纵坐标偏移(像素)text: dataInfo.name,rotation: 0,zIndex: radiusSize,minZoom : 5,strokeStyle: strokeStyleSet}}).addTo(showLayerGroup);marker.bindPopup(content); }mymap.addLayer(showLayerGroup);}},error:function(){$.modal.alertWarning("获取信息失败");}});
}

        不出意外的话还是出了意外，我们来计划在点击风景区时，通过bindPopup弹出经典的一些附属信息。但是无论点击哪个景点，似乎都没有符合我们的预期，效果如下：

         遇到点击了没有效果的情况，第一个想到的原因是看一下网页的控制台，看是否有什么报错信息。根据这个思路，我们打开浏览器的控制台看一下：

        很遗憾，控制台没有想要的信息，代码是没有问题的，可以正常运行的。那么问题到底出在哪里呢？ 

2、问题排查

        在明确没有代码语法问题和报错的前提下，怎么解决这个问题呢？代码是严格按照我们的设计去执行的，但是为什么没有按照我们的预期效果来展示呢？当时，博主从下面两个方向进行思考。首先、排查相关组件的引用是否有问题，因为在本案例中，涉及到LayerGroup和FeatureGroup的使用，是否是因为涉及Group的增加和删除导致了标记对象的事件显示不征程。其次想到的是Leaflet.canvaslabel.js这个组件本身是不是有问题，在数量规模和事件绑定上是不是有什么不对的地方。受限于博主的经验，首先想到了这两个方面，因此排查工作也由此展开。

二、通过实验验证猜想

        针对问题我们有了两个方面的猜想，要想验证猜想的成立，就必须通过代码实验，通过实验说明问题可以解决，这样才是有说服力的。本节针对上述猜想，阐述两个实验环节。

1、排查LayerGroup和FeatureGroup

        怀疑LayerGroup和FeatureGroup有问题的根据是因为，在展示省份地理范围和风景区点位列表时，我们都会设计Group的操作，通过Group，可以实现图层级的隐藏和展示，可以实现某一专题的元素共同的可视化。但是在切换省份时，要想实现只展示当前省份和所属的风景区信息，首先要把之前的省份地理范围清空掉，同时也把之前省份的风景区列表清除掉。所以映入眼帘的第一个嫌疑人出现。添加元素和移除的方法如下：

function preview(code,id){showLayerGroup.clearLayers();//图层要素清除showProvince(id);showScenicSpot(code);
}

        要素添加到图层的代码如下：

let marker = L.circleMarker(/*省略*/).addTo(showLayerGroup);
mymap.addLayer(showLayerGroup);

        通过在Leaflet的官方网站中查看API文档，查看相关的示例代码，并没有发现什么问题。甚至在当时调试的情况下，已经不采用Group的方案，直接把marker添加到Map当中，问题依然没有解决，至此，排除是LayerGroup或者FeatureGroup引起的问题。

2、排查Leaflet.canvaslabel.js

        在把LayerGroup和FeatureGroup排除了嫌疑之后，把目光转向了Leaflet.canvaslabel.js。思考是不是因为Leaflet.canvaslabel.js这个组件自身有什么缺陷（在大规模数据量的时候），或者说我们在API的调用有没有什么问题。带着这个疑问，我们来做两个实验。第一个实验是针对性的看API，是否有什么方法或者属性配置没有正确配置。第二个实验是Leaflet.canvaslabel.js配合大规模数据点，比如5000个点的情况下，能否正常bindPopup。下面逐步来进行验证：

options: {defaultLabelStyle: {offsetX: 0, //横坐标偏移(像素)offsetY: 0, //纵坐标偏移(像素)scale: 1, //放大比例rotation: 0, //旋转角度（弧度），可能会导致碰撞检测不准确text: null, //标注文本内容minZoom: null, //最小显示级别maxZoom: null, //最大显示级别collisionFlg: true, //碰撞检测center: null, //标注位置，默认为null,会自动计算几何中心zIndex: 0, //排序defaultHeight: 20, //文本高度,无法自动计算,所以直接传参手动调整//文本样式,具体值请参考[canvas](https://www.runoob.com/tags/ref-canvas.html)font: "10px sans-serif",fillStyle: "rgba(0,0,0,1)",lineCap: "round",lineDash: [],lineDashOffset: 0,lineJoin: "round",strokeStyle: "rgba(0,0,0,1)",textAlign: "center",textBaseline: "middle",lineWidth: 1,},},

        这是组件的属性配置，基本上与标注的可视化没有关系。再来看事件和执行器：

/*** 执行侦听器*/_executeListeners: function (event) {if (!this._textBounds) return;var me = this;var ret = this.getTextByEvent(event);if (ret && ret.length > 0) {me._map._container.style.cursor = "pointer";if (event.type === "click") {me._onClickListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mousemove") {me._onHoverListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mousedown") {me._onMouseDownListeners.forEach(function (listener) {listener(event, ret);});}if (event.type === "mouseup") {me._onMouseUpListeners.forEach(function (listener) {listener(event, ret);});}} else {me._map._container.style.cursor = "";}},/*** 添加click侦听器*/addOnClickListener: function (listener) {this._onClickListeners.push(listener);},

        通过代码发现，组件也并有修改逻辑，只是接收点击事件，然后添加到执行器中。基本排除了组件自身的问题。那么剩下最后一个猜想，大规模数量下组件的事件是不是失效了。因此我们进行大规模数据量的加载试验。

        在之前的博文中在Leaflet中点对象使用SVG和Canvas两种模式的对比，对组件的加载能力有较详细的描述，在使用5000甚至10000个点的规模下，展示非常迅速，同时点击对象，也能实现Popup的快速提示。

var count = 30000;
for (let i = 0; i < count; i++) {let latlng = L.latLng(23.95 + Math.random() * 10, 112.40034 + Math.random() * 15);var content = "<strong>名称:</strong>城市"+i + "<br/><strong>级别:</strong>"+ i;content += "<br/><strong>所属行政区划:</strong>"+ i + "/" ;content += "<br/><strong>评定时间:</strong>"+ i ;var title = "重要城市" + Math.random();let c = L.circleMarker(latlng, {radius: 5,labelStyle: {text: title,rotation: 0,zIndex: 1,strokeStyle: "red",}}).addTo(showGroup);c.bindPopup(content);
}
map.addLayer(showGroup);

        经过两个方向，几个步骤的排查，依然没有找到具体的原因，也没有找到解决方案。有点懊恼，于是想着换个思路。对组件的多点展示能力有初步怀疑，但没有找到原因。

三、柳暗花明又一村

        山重水复疑无路，柳暗花明又一村。这句话用形容当时解决问题的情况非常贴切，在两个方向都明确没有定位最终问题的情况下。我决定用之前遇到的一个点聚类的思路。遇到问题不要放弃，再没有方向的时候，发散思路，解决了问题，经验值就此提升。因此，遇到bug，解决bug才是好的态度。这里分两个步骤描述问题的解决办法。

1、点聚类的办法

        带着之前没有找到的根本问题，一直将注意力集中在风景区的点数量上。怀疑是不是点多了，导致了事件响应的问题。所以考虑减少点位信息，在Leaflet当中，可以通过点聚类的办法介绍视野内的对象，通过减少点的渲染，保障Popup的正常可视化。

        大家还记得点聚类的组件用什么吗？之前也有文章进行深入讲解，就是用leaflet.markercluster-src。代码就不详细贴了，创建聚合图层，将点添加到图层中。

//创建聚合图层并设置最大聚合半径为 26像素
var markersGroup = L.markerClusterGroup({maxClusterRadius: 26});

        通过点聚合，发现确实能解决几个省的展示问题，当时以为找到了解决办法很欣喜，但是在浙江时，发现有风景区不能很好的展示出来。开始对数据的加载机制有个第一次怀疑，这算个歪打正着。本来没有怀疑数据的加载机制。

2、歪打正着

        在对数据的加载机制有了怀疑之后，便迅速去看代码。在展示省份地理范围的代码中，我们使用ajax的方式去后台请求数据，ajax请求头如下：

type:"get",  
url:prefix + "/geojson/" + id,  
data:{},  
dataType:"json"

        众所周知，在ajax当中，其默认的数据加载方式异步的，也就是async=true。其实到了这里，才是真正的问题根源。就是由于数据请求的异步方式导致了组件的事件响应问题。再来看一下代码：

 function preview(code,id){showLayerGroup.clearLayers();//图层要素清除showProvince(id);showScenicSpot(code);}

        在上述代码中，首先异步加载省份的geojson地理范围，再异步加载风景区信息。也就是异步的问题导致的，虽然方法看起来像是先加载地理范围，实际上设置了异步，可能地理范围还没有加载完，风景区信息已经再加载了。也正是这个原因导致了事件不响应。按照这个思路，我们将ajax方法设置为同步的方式，即async=false。

        再来看具体的效果，以浙江为例：

杭州西湖风景区

杭州市千岛湖风景区

浙江普陀山风景区

        至此，问题得以全部解决，Leaflet.canvaslabel在Ajax异步请求时bindPopup无效的解决办法。导致popup无效的问题是ajax的异步机制导致的。当然在实际开发当中，您可以使用一个解决返回所有的数据，把空间范围和数据列表同时返回就不存在上述问题了。解决办法很多，找到问题根本很重要。遇到问题，慢慢分析，大胆设想，小心验证，一定会有收获，不放弃。

总结

        以上就是本文的主要内容，本文分享了作者在排查GIS问题当中的一些思路和方法。在没有找到具体的问题前，首先检查代码的问题，然后检查相应的组件是否有什么缺陷，最后再梳理解决办法，大致的思路如此。本文在此背景下诞生，博文首先详细介绍了风景区展示时具体的问题，然后分析排查思路和方向，接着使用不同的方案验证思路，最后给出最终的解决方案。行文仓促，定有不足之处，案例的排查方法和经验都不足，欢迎有经验的大佬基于批评指正，万分感谢。