当前位置:   article > 正文

Leaflet扩展Marker_leaflet marker添加自定义属性

leaflet marker添加自定义属性

        前言:习惯了使用ArcGIS JS API,它里面的Graphic和GraphicsLayer很方便,其中

Graphic = geometry+symbol+attribute+infotemplate,往地图上添加带属性信息Graphic,在单击Graphic的时候可以“取出”

之前存在Graphic里的属性信息。最近使用leaflet作为开发技术,我并没有在leaflet里找到和arcgis的Graphic类似的机制,不过

可以使用 Leaflet 的类扩展机制增加属性信息。该笔记 以Marker为例,扩展Marker使其像arcgis js api的graphic类似,带有自

定义的属性信息。。。

1、创建自定义类 L.MarkerEx

  1. L.MarkerEx = L.Marker.extend({
  2. _customAttr:{},
  3. setAttr(options){
  4. Object.assign(this._customAttr,options)
  5. },
  6. getAttr(){
  7. return this._customAttr;
  8. }
  9. });

2、创建L.MarkerEx类对应的函数L.markerEx  (类名首字母大写,方法名首字母小写)

  1. L.markerEx=function(latlon){
  2. return new L.MarkerEx(latlon);
  3. }

3、 验证 自定义的扩展自L.Marker的类L.MarkerEx

  1. //创建 L.MarkerEx类对象,添加到map
  2. var marker = L.markerEx(L.latLng(-37.82, 175.24)).addTo(map);
  3. // 给marker添加属性信息
  4. marker.setAttr({name:"张三",sex:"未知",age:"18"});
  5. //单击marker,输出自定义的属性信息
  6. marker.on('click',function (evt) {console.log(evt.target.getAttr())})

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/234809
推荐阅读
相关标签
  

闽ICP备14008679号