[leaflet] Map 지도 + leaflet // 면적계산 (3)

1. 자유롭게 선택 가능
2. 면적을 계산
3. 삭제기능

1. 다운로드

다운로드
leaflet.draw.css
leaflet.draw-src.js
leaflet.measurearea.css
leaflet.measurearea.js

2. jsp 작성 + js 수정

map.jsp

<!-- 면적 -->
<script src="plugins/draw/sample/leaflet.measurearea.js"></script>
<link rel="stylesheet" href="plugins/draw/sample/leaflet.measurearea.css"/>
<script> //navigator.geolocation.getCurrentPosition(function(pos) { 여기 추가 });  
	// 면적계산
	L.Control.areaControl().addTo(mymap);
</script>

leaflet.measurearea.js

_finishShape: function () {
  this._drawing = false;

  var latlngs = this._poly._defaultShape ? this._poly._defaultShape() : this._poly.getLatLngs();
  var intersects = this._poly.newLatLngIntersects(latlngs[latlngs.length - 1]);

  var minx=180, miny=180, maxx=0, maxy=0;
  for (var i=0; i<latlngs.length; i++)
  {
    if (minx > latlngs[i].lng) minx = latlngs[i].lng;
    if (maxx < latlngs[i].lng) maxx = latlngs[i].lng;
    if (miny > latlngs[i].lat) miny = latlngs[i].lat;
    if (maxy < latlngs[i].lat) maxy = latlngs[i].lat;
  }

  var cpt = new L.LatLng((miny + maxy) /2, (minx + maxx) / 2);

  if ((!this.options.allowIntersection && intersects) || !this._shapeIsValid()) {
    this._showErrorTooltip();
    return;
  }

  this._area = L.GeometryUtil.geodesicArea(latlngs);
  if (!this._poly._areaMarker) {
    this._poly._areaMarker = L.marker(cpt, {
      icon: L.divIcon({
        className: 'leaflet-mouse-marker',
        iconAnchor: [20, 20],
        iconSize: [1, 1]
      }),
      opacity: 0,
      zIndexOffset: this.options.zIndexOffset
    });

    this._map.addLayer(this._poly._areaMarker);
  }

  // 여기부터 (수정부분)

  var txt = '면적: '+ L.GeometryUtil.readableArea(this._area, this.options.metric, this.options.calcUnit);
  this._poly._areaMarker.bindTooltip(txt, {permanent: true, className: "my-label-distance", offset: [10, 0] });

  var txt2 = '<div class="img-box"><button type="button" class="remove">'
	  txt2 += '<img class="img" src="plugins/draw/sample/images/spritesheet-remove.png" alt="삭제" width="50%;">';
	  txt2 += '<img class="img-hover" src="plugins/draw/sample/images/spritesheet-remove2.png" alt="삭제2" width="40%;" style="margin-left: 8px;">';
	  txt2 += '</button></div>';

  polyMarker = this._poly._areaMarker;
  removemarkers = this._markerGroup; 

  var poly = new this.Poly(this._poly.getLatLngs(), this.options.shapeOptions);

  var mMap = this._map;

  poly.on('click', function(){
    polyMarker.bindPopup(txt2,{className:"button"}).openPopup();
    $('.remove').on('click', function(){
      mMap.removeLayer(polyMarker);
      mMap.removeLayer(removemarkers);
      mMap.removeLayer(poly);
    })
  })

  L.Draw.Feature.prototype._fireCreatedEvent.call(this, poly);

  // 여기까지 (수정부분)
  
  this.disable();

},

수정된 css는 나중에 git에 올려두겠다!

참고
http://demo.cmworld.net:18080/cmworld_maps_api/sample/controls/measureArea