Skip to content

Latest commit

 

History

History
111 lines (92 loc) · 1.88 KB

coding_tutorial.md

File metadata and controls

111 lines (92 loc) · 1.88 KB

编程风格: http://es6.ruanyifeng.com/#docs/style

一个样例:

import BaseLayer from '../layers/BaseLayer'
class Map{
  constructor(dom,option) {
    this._obj = L.map(dom, option);
    this._prev_data = []
    this._data = []
  }
  on(event_type,callback){
    this._obj.on(event_type,callback);
    return this;
  }
  setOption(option){
    this._obj.setOption(option);
    return this;
  }
  data(){
    // update this._data
  }
  render(){
    //leaflet 渲染  
  }
  enter(){
    //更新dom, 集合操作
  }
  onElement(){
    
  }
}

var map = new Map('#div',{
  center: [123,34]
})
map.on('click',function(){
  
})

不希望被调用,可以参照下面的语法 http://es6.ruanyifeng.com/#docs/class

export default class BaseLayer{
  constructor() {
    if(new.target === BaseLayer){
      throw new Error('this class cannot be initialize')
    }
  }
  setOption(){
    
  }
}
import BaseLayer from '../layer/BaseLayer'
export default class Map extends BaseLayer{
  
}

常量定义

//const.js
export const CLICK = 'click'

常量引用

import {CLICK} from './const'

on(events_type,callback){
//有更简单的语法可以再写一下

  switch(events_type){
    case CLICK: this._obj.on(CLICK, callback);
    default: this._obj.on(events_type, callback)
  }
}
onElement(events_type,callback){
  for(let i=0;i<this._item.length;i++){
    _item[i].on(events_type,function(){
      callback(this._data[i],i)
    })
  }
}

//调用
layer.onElement('click',function(d,i){
  console.log(d)
})

https://leafletjs.com/reference-1.3.4.html#layergroup

var marker1 = L.marker([lat,lon],20)
var marker2 = L.marker([lat,lon],20)
L.layerGroup([marker1, marker2])
    .addLayer(polyline)
    .addTo(map);