如何在传单中显示和居中显示单个国家/地区的多边形? [英] How to show and center a single country polygon in leaflet?

问题描述

当我使用传单加载页面时，我试图自动缩放到特定的国家/地区名称.当我发布页面时，我可以得到一个像这样的变量:

I am trying to auto zoom to a specific country name when I load the page using leaflet. When I post my page, i can get a variable like:

var $myCountry = "France";

现在，我像这样加载json:

Now I load my json like:

$json = file_get_contents("/world.json");
$data = json_decode($json, true);

这是我的geoJson结构:

This is my geoJson structure:

{
  "type":"Feature",
  "id":"AFG",
  "properties":{"name":"France"},
  "geometry":{
    "type":"Polygon",
    "coordinates":[
      [
        [61.210817,35.650072],
        [62.230651,35.270664]
      ]
  }
},

基本上，我想检查我的变量名是否等于geoJson中的名称，如果是，我想获取它的坐标，类似这些东西.

Basically I want to check if my variable name is equal to a name within the geoJson and if so I want to get the coordinates of it, something along those lines.

var $myCoordinates = $myCountry.coordinates

我要这样做是为了根据变量中找到的国家/地区名称放大地图，我还检查了其他

I want to do this in order to zoom in to a map based on the country name found in the variable, I have also checked this other SO question but I didn't get it.

更新

这几乎可行，变量与专有名称之间的比较不可行，但是变量字符串是正确的，并且我们确实拥有一个具有相同字符串名称的json

This almost works, the comparison between the variable and the propriety name isn't tho, yet the variable string is correct and wihtin the json we do have a name with the same string

var $country = "<?php echo $region; ?>";

$.ajax({ 
    type: 'GET',
    url: '/world.json', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
    $.each(data, function(index, element) { 
        if (element.properties.name == $country) {
            alert("ciao");
        }
    });
    }
});

推荐答案

我认为您最初显示代码和数据结构以及帖子标题的方式误导了我们.

I think we were misled by how you initially showed your code and data structure, and your post title.

实际上，您并不是要扫描数组或简单的JSON对象，而是要扫描具有FeatureCollection和许多功能的GeoJSON对象.

Actually you are not trying to scan an array or a simple JSON object, but a GeoJSON object with a FeatureCollection and lots of Features.

因此，您必须遍历该FeatureCollection的功能，并扫描每个功能的properties.name.

So you have to loop through that FeatureCollection's Feature, and scan each Feature's properties.name.

但是即使如此，您仍将无法实现缩放到相应的Leaflet图层的目标:GeoJSON对象未链接到Leaflet图层，而反之则相反.

But even with that, you will still not be able to perform your objective of zooming onto the corresponding Leaflet layer: the GeoJSON object is not linked to your Leaflet layers, whereas the reverse is.

因此，您应该从GeoJSON中构建 Leaflet GeoJSON组数据，然后扫描该组(例如，使用 eachLayer() )用properties.name === "France"查找表示要素的图层.

So you should instead build the Leaflet GeoJSON group out of your GeoJSON data, and then scan that group (e.g. using eachLayer()) to find the layer that is the representation of a Feature with properties.name === "France".

符合以下条件的东西

$.getJSON('/world.json', function (geoJSONdata) {
    var geoJSONgroup = L.geoJSON(geoJSONdata).addTo(map);

    geoJSONgroup.eachLayer(function (layer) {
      if (layer.feature.properties.name === "France") {
        // Zoom to that layer.
        map.fitBounds(layer.getBounds());
      }
    });
});

演示: https://plnkr.co/edit/SVJfLf8gR0VysrFVkwsS?p=preview

这篇关于如何在传单中显示和居中显示单个国家/地区的多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！