[leaflet] Map 지도 + leaflet // 거리계산 (2)

1. 중간에 마우스 클릭을 한 부분 구간거리 재기
2. 총 거리재기
3. 삭제하기

3가지가 기능을 완성하기를 원해서 만들게 되었다

1. leaflet.draw + leaflet.measurecontrol

leaflet.draw의 기능은 정말 편하고 좋은데
아래 링크에서 올려준 기능을 그냥 바로 사용하고싶어서
전체적으로 js 파일을 수정했다 ㅋㅋ... << 과거로 돌리면 저렇게 안할꺼다

다운로드 링크
leaflet.draw-src.js
leaflet.draw.css
leaflet.measurecontrol.js
leaflet.measurecontrol.css

파일을 다운로드 해주고 위치를 설정해준 후에

2. jsp에 기능추가

map.jsp

<!-- 그림도구컨트롤 -->
<script src="plugins/draw/leaflet.draw-src.js"></script>
<link rel="stylesheet" href="plugins/draw/leaflet.draw.css" />
<!-- 거리 -->
<script src="plugins/draw/sample/leaflet.measurecontrol.js"></script>
<link rel="stylesheet" href="plugins/draw/sample/leaflet.measurecontrol.css"/>

<script> //navigator.geolocation.getCurrentPosition(function(pos) { 여기 추가 });  
// 거리계산
	L.Control.measureControl().addTo(mymap);
</script>

요부분들을 추가해준다 요기까지 하게되면
구간거리와 총 거리재기는 가뿐하게 해결된다
하지만 아직 삭제는 안된다.

3. 삭제기능 추가

leaflet.measurecontrol.js

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

  if (this.type == "polyline")
  {
    //마지막 점은 총거리도 추가
    var markersLength = this._markers.length;
    if (markersLength > 1)
    {
      var marker = this._markers[markersLength-1];
      var txt = '총길이: ' + this._getTooltipText().subtext + '</br>' + '구간길이: ' + marker._tooltip._content;
      marker._tooltip.setContent(txt);
    }
  }
  if ((!this.options.allowIntersection) || !this._shapeIsValid()) {
    this._showErrorTooltip();
    return;
  }

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

  markerbindTooltip = this._markers[markersLength-1]._tooltip.setContent(); // 거리랑 구간 팝업
  removemarkers = this._markerGroup;

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

  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>';

  var mMap = this._map;
  poly.on('click', function(){
    poly.bindPopup(txt2,{className:"button"}).openPopup();
    $('.button').on('click', function(){
      mMap.removeLayer(markerbindTooltip);
      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/measureControl
+과장님의 친절한 티칭..!