美文网首页
使用leaflet插件,左右地图同步功能小结

使用leaflet插件,左右地图同步功能小结

作者: victoriasuli | 来源:发表于2018-05-30 08:20 被阅读0次

    1.地图构造

        1)左右地图构造,同一组件,需要调用时为不同id.一开始的时候用的在组件内部,定义了一个变量,随机生成随机数。


    2.放大,缩小,平移同步

    1)事件的监听

    监听鼠标的mouseOver和mouseOut,移近加监听,移除去监听(否则事件不断响应,会造成死循环)

    2)数据派发

    一开始用了center(中心点)和zoom(方大级别)两个参数控制,导致zoom的时候一个地图按中心点缩放,而另一个按当前鼠标位置进行缩放。最终采用bounds控制。


    3.数据同步

    一开始采用直接把图层传出去,导致删除和编辑的时候,点击右侧,结果右侧没删,左侧删了。因为图层是一个对象,用的是引用。所以采用把每个layer转成GeoJSON,放进数组传出。


    4.图形构造

    因为传出去不处理拿进来以后还是GeoJSON,而mapleaflet可以用GeoJSON构造对象。

            L.geoJSON(element, {

                style: function(feature) {

                  return { color: 'red' };

                }

            }));


    5.点工具栏编辑的时候编辑不了(获取不到图形那些节点)

    后来发现,GeoJSON构造的对象不能被编辑!!!

    但是左边还是可用的(因为本来也不让他编辑)

    右边需要根据类型构造Marker,polyline,polygon


    6.数据转换

    绘制完成时拿到的数据是【lng,lat】

    构造时需要的数据格式是【lat,lng】

    转换!!!

    相关文章

      网友评论

          本文标题:使用leaflet插件,左右地图同步功能小结

          本文链接:https://www.haomeiwen.com/subject/vkagxftx.html