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】
转换!!!