8

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 &copy; <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 ステートメントを使用してアイコンを変更できます。

4

2 に答える 2

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 &copy; <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);
        }
    });
});

});

ここにデモがあります: http://demos.nodeline.com/leaflet_development/

于 2012-04-09T08:26:51.487 に答える
3

ズームでジェネリック クラスを変更し、CSS で変更することもできます。

map.on('zoomend', function(event) {
    document.body.className = "zoom"+map.getZoom();
});

次に、CSS は次のようになります。

.myIcon{background:red;}
.zoom4 .myIcon{background:pint;}

レベル10を超えてズームインするまで、マーカーの名前を非表示にするために使用します.

于 2013-09-30T12:10:52.727 に答える