我正在为Web应用程序创建一个区域绘图工具,我使用标记作为锚点,用户可以使用它来更改多边形的形状。
这是我到目前为止所拥有的。 http://demos.nodeline.com/leaflet_development/
回购是https://github.com/SpencerCooley/Leaflet_development
$(document).ready(function(){
var map, cloudmade, sanAntonio, polygonPoints
map = new L.Map('map');
cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude)
map.setView(sanAntonio, 13).addLayer(cloudmade);
polygonPoints = [];
var polygon = new L.Polygon(polygonPoints);
map.addLayer(polygon);
map.on('click', function(e) {
var marker = new L.Marker(e.latlng, {draggable:true});
polygonPoints.push(e.latlng);
var markerId = polygonPoints.length -1
map.addLayer(marker);
polygon.setLatLngs(polygonPoints);
marker.on('drag', function(){
var locationWhileDrag = marker.getLatLng();
$('#first_marker').val(locationWhileDrag);
polygonPoints.splice(markerId,1,locationWhileDrag);
polygon.setLatLngs(polygonPoints);
});
});
});
当用户放大到街道级别时,我只希望标记为正常大小。缩小正常大小的标记时,完全淹没多边形。我仔细查看了文档但却找不到任何相关内容。
我主要是在寻找建议/头脑风暴。我想也许有办法检测你目前处于哪种变焦状态?如果是这样,我可以使用if语句来更改图标。
答案 0 :(得分:12)
好的,所以我找到了一些方法并想出了这个:
//this sets up an icon to be replaced on redraw.
var MyIcon = L.Icon.extend({
iconUrl: 'marker.png',
iconSize: new L.Point(10, 16),
shadowSize: new L.Point(10, 16),
iconAnchor: new L.Point(10, 16)
});
var icon = new MyIcon();
//When view resets use the smaller icon if zoom level is less than 13
map.on('viewreset', function(){
if(map.getZoom() < 13){
marker.setIcon(icon);
}
});
setIcon()方法不在文档中,我在google论坛中找到它并且它工作。我做了一个较小的图标,我基本上只是在缩放级别小于13时替换原始图标。我是现在为不同的缩放级别实现不同的标记,以使标记“更远”的效果。
以下是修订后的代码。
$(document).ready(function(){
var map, cloudmade, sanAntonio, polygonPoints
map = new L.Map('map');
cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude)
map.setView(sanAntonio, 13).addLayer(cloudmade);
polygonPoints = [];
var polygon = new L.Polygon(polygonPoints);
map.addLayer(polygon);
map.on('click', function(e) {
//this sets up an icon to be replaced when redraw.
var MyIcon = L.Icon.extend({
iconUrl: 'marker.png',
iconSize: new L.Point(10, 16),
shadowSize: new L.Point(10, 16),
iconAnchor: new L.Point(10, 16)
});
var icon = new MyIcon();
//this sets up an icon to be replaced when redraw.
var marker = new L.Marker(e.latlng, {draggable:true});
polygonPoints.push(e.latlng);
var markerId = polygonPoints.length -1
map.addLayer(marker);
polygon.setLatLngs(polygonPoints);
marker.on('drag', function(){
var locationWhileDrag = marker.getLatLng();
$('#first_marker').val(locationWhileDrag);
polygonPoints.splice(markerId,1,locationWhileDrag);
polygon.setLatLngs(polygonPoints);
});
//When view resets use the small icon if zoom level is less than 13
map.on('viewreset', function(){
if(map.getZoom() < 13){
marker.setIcon(icon);
}
});
});
});
答案 1 :(得分:3)
您还可以在缩放时更改泛型类,并使用CSS进行更改。
map.on('zoomend', function(event) {
document.body.className = "zoom"+map.getZoom();
});
然后你的CSS将是:
.myIcon{background:red;}
.zoom4 .myIcon{background:pint;}
我用它来隐藏我的标记的名称,直到你放大到10级。