web-dev-qa-db-ja.com

リーフレットのjavascriptマップの更新方法

リーフレットAPIを使用して、JavaScriptで基本的なgeoJsonプログラムを持っています。

<html>
<head>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="india.js" type="text/javascript"></script>

</head>


<body>
<div id = "map1" style="width: 1100px; height: 400px"> </div>

<script>

var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 });

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area);

var indiaLayer= L.geoJson(india, {style: {weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.1}});

        area.addLayer(indiaLayer);

        function clicked(){

        this.options.style.fillOpacity = 0.8;
            //how to refresh layer in the given map

        }

        indiaLayer.on('click', clicked);                
</script>
</body>
</html>

問題は、マップ上のレイヤーのコンテンツを自動的に更新する方法です。

ここの例

             function clicked(){

        indiaLayer.style.fillOpacity = 0.8;
            //how to refresh layer in the given map

        }

        indiaLayer.on('click', clicked);

ユーザーがindiaLayerをクリックすると、fillOpacity変数は変更されますが、マップを更新していないため、マップに反映されません。どうすればいいのかわかりません。

助けてください

P/s：これらはindiaLayerオブジェクトで使用できる関数です（つまり、クリックされた関数内のこのオブジェクト...この目的で使用するか、何も存在しません）

Leaflefドキュメント でGEOJsonの使用可能なメソッドのリストを確認できます。これは、この例で使用できる最も近いv.0.7.7へのリンクです。

javascriptjqueryleaflet
14
user609306

前回使用した

map._onResize();

マップを更新するのに役立ちます。多分少しハックですが、それはうまくいきます。

あなたのコードはarea._onResize（）になります

PS：新しい不透明度の値を設定する方法を変更してみてください-変更してみてください

function clicked(){
    this.options.style.fillOpacity = 0.8;
 }

それに

function clicked(){
    this.setStyle({fillOpacity: 0.2});
 }
18
Elephant
_map.invalidateSize();
_

map._onResize()-これはハックであり、将来のバージョンで削除されないという保証はありません。

17
Pavel Kharibin

area.fitBounds(area.getBounds());

0
justDev7a3