마우스 휠이있는 지점까지 전단지 확대

전단지를 사용하여 새로운 반점을 추가하는 프로젝트를 진행하고 있습니다. 따라서 응용 프로그램은 2 가지 모드가 있습니다 :마우스 휠이있는 지점까지 전단지 확대

정기적 인지도는 동일한에서 유지하는 일반적인
로 작동 (안지도의 중앙에)이 점 오버레이가있는 경우, 새로운 포인트 모드를 추가해야 할 때 항상 포인트 (구현 됨).

두 번째 모드에서는 스크롤 휠 확대/축소를 재정의해야합니다. 지도의이 '새'점만 확대/축소해야합니다.

확대/축소 앵커 포인트를 선택할 수있는 특정 옵션이없는 전단을 찾았습니다.

는하지만 그것을 구현하는 것이 가능하다 생각하지만, 나는 :-) 여기에

이 응용 프로그램보기의 단순화 된 스키마 얼마나 아직 이해되지 않은 : 당신이

출처

2017-10-13 Nikolay Aleshkovskiy

을 강조하기 때문에이 지도 컨테이너의 중심이 아닌 확대/축소하려는 지점 인 경우지도 옵션을 이미 알고있을 수 있습니다.

Whet 마우스 휠을 사용하여지도를 확대 할 수 있습니다. 'center'을 전달하면 마우스의 위치에 관계없이보기의 중심으로 확대/축소됩니다.

따라서 'center' 값이 사용자의 케이스에 정확히 맞지 않습니다.

그러나 당신은 쉽게 리플릿 스크롤 휠 줌을 구현하는 방법을 사용자 정의 할 수 있어야한다 :

L.Map.ScrollWheelZoom.include({ 
 
    _performZoom: function() { 
 
    var map = this._map, 
 
     zoom = map.getZoom(), 
 
     snap = this._map.options.zoomSnap || 0; 
 

 
    map._stop(); // stop panning and fly animations if any 
 

 
    // map the delta with a sigmoid function to -4..4 range leaning on -1..1 
 
    var d2 = this._delta/(this._map.options.wheelPxPerZoomLevel * 4), 
 
     d3 = 4 * Math.log(2/(1 + Math.exp(-Math.abs(d2))))/Math.LN2, 
 
     d4 = snap ? Math.ceil(d3/snap) * snap : d3, 
 
     delta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom; 
 

 
    this._delta = 0; 
 
    this._startTime = null; 
 

 
    if (!delta) { 
 
     return; 
 
    } 
 

 
    if (map.options.scrollWheelZoom === 'center') { 
 
     console.log(zoom + delta); 
 
     map.setZoom(zoom + delta); 
 

 
    //////////////////////////////////////////////////////////////////////// 
 
    // Add a case where scrollWheelZoom option is an app specific point. 
 
    } else if (map.options.scrollWheelZoom instanceof L.Point) { 
 
     map.setZoomAround(map.options.scrollWheelZoom, zoom + delta); 
 
    //////////////////////////////////////////////////////////////////////// 
 

 
    } else { 
 
     map.setZoomAround(this._lastMousePos, zoom + delta); 
 
    } 
 
    } 
 
}); 
 

 

 
var map = L.map('map', { 
 
    scrollWheelZoom: L.point(150, 100) // x, y 
 
}).setView([48.85, 2.35], 12); 
 

 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
}).addTo(map);

#mapWrapper { 
 
    position: relative; 
 
} 
 

 
#map { 
 
    height: 500px; 
 
} 
 

 
#pointer { 
 
    z-index: 2000; 
 
    position: absolute; 
 
    top: 100px; /* y */ 
 
    left: 150px; /* x */ 
 
    width: 5px; 
 
    height: 5px; 
 
    background-color: red; 
 
}

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
 

 
<div id="mapWrapper"> 
 
    <div id="map"></div> 
 
    <div id="pointer"></div> 
 
</div>

참고 : 나는 당신이 또한 줌 제어 버튼 동작을 수정 한 것 같아요.

출처

2017-10-13 08:20:41 ghybs

ghybs 정말 고마워요! 나는 아직 그것을 시험하지는 않았지만, 그것이 내가 필요로하는 것처럼 완전히 보인다. –

마우스 휠이있는 지점까지 전단지 확대

답변

관련 문제