2
다른 확대/축소 수준에 따라 leaflet.js지도에서 마커를 렌더링하는 데 어려움이 있습니다. 마커에 드래그 앤 드롭 기능을 구현하기 위해 jquery UI를 사용하고 있습니다. 지도 외부 영역에서 마커를 떨어 뜨릴 때지도 줌 레벨을 가져와 아이콘 크기를 변경해야합니다. 확대 할 때 모든 마커의 크기를 조정해야합니다.지도 확대/축소 수준에 따라 마커 아이콘 이미지 변경
마커의 크기를 줄이고 크기를 조정하는 방법을 잘 모르겠습니다. 다음은
내가 지금까지 달성 한 것입니다 :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Leaflet Example</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<style>
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
* html #map {
height: 100%;
}
#box {
position: absolute;
top: 10px;
right: 10px;
background-color: white;
padding: 10px;
z-index: 1000;
}
#box img {
margin-left: 20px;
margin-right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="box">
Drag Marker on the map:
<span class="poi-type"><img class="drag" type="tree" src="icons/tree_green.png" alt="TREE: green" />Tree</span>
<span class="poi-type"><img class="drag" type="red" src="icons/poi_red.png" alt="POI: red" />Red</span>
<span class="poi-type"><img class="drag" type="black" src="icons/poi_black.png" alt="POI: black" />Black</span>
</div>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
var map, user;
var markers = [];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var poiIcon = L.Icon.extend({
options: {
iconSize: [22, 32],
iconAnchor: [-20, 0],
shadowUrl: 'icons/poi_shadow.png',
shadowSize: [22, 13],
shadowAnchor: [-31, -19],
popupAnchor: [32, -2]
}
});
var blackIcon = new poiIcon({ iconUrl: 'icons/poi_black.png' });
var redIcon = new poiIcon({ iconUrl: 'icons/poi_red.png' });
var treeIcon = new poiIcon({ iconUrl: 'icons/tree_green.png', shadowUrl: 'icons/tree_shadow.png' });
$(document).ready(function() {
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3328], mapMaxZoom),
map.unproject([4864, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
noWrap: true
}).addTo(map);
map.on('zoomend', changeIconSize);
//function changeIconSize(e) {
// var defaultIconSize = new L.point(22, 32);
// var defaultShadowSize = new L.point(22, 13);
// var transformation = new L.Transformation(1, 0, 1, 0);
// var currentZoom = map.getZoom();
// var newIconSize = transformation.transform(defaultIconSize, sizeFactor(currentZoom));
// var newShadowSize = transformation.transform(defaultShadowSize, sizeFactor(currentZoom));
// var newIconAnchor = new L.Point(Math.round(newIconSize.x/2), newIconSize.y);
// var newIcon = new L.Icon.Default({
// iconSize: newIconSize,
// iconAnchor: newIconAnchor,
// shadowSize: newShadowSize,
// });
// return newIcon;
//}
// Drag & Drop
$(".drag").draggable({
helper: 'clone',
containment: 'map',
start: function(evt, ui) {
$('#box').fadeTo('fast', 0.6, function() {});
},
stop: function(evt, ui) {
$('#box').fadeTo('fast', 1.0, function() {});
var options = {
pid: guid(),
type: ui.helper.attr('type'),
icon: eval(ui.helper.attr('type') + 'Icon'),
draggable: true
};
insertPoint(
map.containerPointToLatLng([ui.offset.left, ui.offset.top]), options);
}
});
// Create a GUID
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
// UPDATE point
function updatePoint(point) {
alert(point.getLatLng().lat + " - " + point.getLatLng().lng);
}
// DELETE point
function deletePoint(pid) {
for (i = 0; i < markers.length; i++) {
if (markers[i].options.pid === pid) {
map.removeLayer(markers[i]);
markers.splice(i, 1);
}
}
}
// INSERT point
function insertPoint(position, options) {
var newIcon = changeIconSize();
options.icon = newIcon;
var point = L.marker(position, options).addTo(map);
point.bindPopup(
'<a onClick="deletePoint(\'' + point.options.pid
+ '\');" href="#">Remove Me!</a>',
{
closeButton: false
}
);
point.on('dragend', function (evt) {
updatePoint(point);
});
markers.push(point);
}
function sizeFactor(zoom) {
if (zoom <= 8) return 0.3;
else if (zoom == 9) return 0.4;
else if (zoom == 10) return 0.5;
else if (zoom == 11) return 0.7;
else if (zoom == 12) return 0.85;
else if (zoom == 13) return 1.0;
else if (zoom == 14) return 1.3;
else if (zoom == 15) return 1.6;
else if (zoom == 16) return 1.9;
else // zoom >= 17
return 2.2;
}
});
</script>
</body>
</html>
감사합니다, Pawan