jQuery 传单中的javascript映射如何刷新

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18515230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:50:29  来源:igfitidea点击:

javascript map in leaflet how to refresh

javascriptjqueryleaflet

提问by user609306

i have a basic geoJson program in javascript by using leaflet API.

我通过使用传单 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>

the problem is how would i automatically refresh the content of Layer on the map.

问题是我如何自动刷新地图上图层的内容。

example here

例子在这里

             function clicked(){

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

        }

        indiaLayer.on('click', clicked);   

when user click on indiaLayer , the fillOpacity variable changes but doesn't reflect back on map which is understood since i am not refreshing the map. I don't know how to do it.

当用户点击 indiaLayer 时, fillOpacity 变量会发生变化,但不会反映在地图上,这是可以理解的,因为我没有刷新地图。我不知道该怎么做。

please help

请帮忙

P/s: these are the functions available on indiaLayer object (i.e. this object inside clicked function...which one to use for this purpose or there exist none)

P/s:这些是 indiaLayer 对象上可用的功能(即点击功能内的这个对象......为此目的使用哪个或不存在)

You can check the list of methods available of GEOJson in the Leaflef documentationThis is the link to v.0.7.7, which is the closest available to used in this example.

您可以在Leaflef 文档中查看GEOJson 的可用方法列表这是指向 v.0.7.7 的链接,这是本示例中最接近的可用方法。

回答by Elephant

Last time I've used

我上次用过

map._onResize(); 

and that help me refresh map. Maybe a little hack, but, it work.

这有助于我刷新地图。也许有点黑客,但是,它的工作。

In your code will be area._onResize()

在您的代码中将是 area._onResize()

P.S: Maybe you should try change the way to set new opacity value - try change

PS:也许您应该尝试更改设置新不透明度值的方式 - 尝试更改

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

to that

到那个

function clicked(){
    this.setStyle({fillOpacity: 0.2});
 }

回答by Pavel Kharibin

map.invalidateSize();

map._onResize()- it's a hack, and there is no guarantee that it won't be removed in future versions.

map._onResize()- 这是一个 hack,不能保证它不会在未来的版本中被删除。

回答by justDev7a3

area.fitBounds(area.getBounds());

area.fitBounds(area.getBounds());