简体   繁体   English

制作 Leaflet 地图时,如何将 GeoJSON 坐标拉取并转换为 latLng?

[英]When making a Leaflet map,how can pull and convert the GeoJSON coordinates to a latLng?

I'm making a map using Leaflet , and populating the map with data from a GeoJSON file.我正在使用Leaflet制作地图,并使用 GeoJSON 文件中的数据填充地图。 I want to use the distanceTo function, but it requires a latLng object.我想使用distanceTo函数,但它需要一个latLng对象。 Is there a way to convert the GeoJSON's properties.geometry.coordinates into latLng ?有没有办法convert GeoJSON 的properties.geometry.coordinates转换为latLng

I have an array of 31 coordinates, from using the push() method on the onEachLayer :我有一个包含 31 个坐标的数组,通过在onEachLayer上使用push()方法:

var coords = [];

onEachFeature : function(feature,layer) {
 coords.push(feature.geometry.coordinates)
 //console.log(coords)...

After running that, the coords array is populated with the array for each coordinate.运行之后,coords 数组将填充每个坐标的数组。 Is there a way to 'convert' this array of arrays to a latLng object so ditanceTo can be used?有没有办法将这个数组数组“转换”为latLng对象,以便可以使用ditanceTo

End goal is to run the latLng objects through a loop using distanceTo , so that each popup displays the distance from the center point.最终目标是使用distanceTo通过循环运行latLng对象,以便每个弹出窗口显示距中心点的距离。

     var low = L.geoJson(hosp, {    
     pointToLayer: function(feature,latlng) {
      return L.circleMarker(latlng, {
            color: 'yellow',
             weight: 2,
             fillColor: 'green',
             fillOpacity: .7,
             radius:9

         });
     },

     filter: function (feature, layer) {
         if(feature.properties.DAILY_PAT <= '600'){
             return feature;}
     },


   onEachFeature : function(feature,layer) {
     coords.push(feature.geometry.coordinates)
     //console.log(coords)

     layer.on('click',function(){

       layer.bindPopup("<b>Low Enrollement </b><br>"+"<b>School Name: </b>" 
           + feature.properties.FACILITY_N+"<br><b># of Students: </b>"
           + feature.properties.DAILY_PAT).openPopup()
       });  
     }
    }).addTo(map); 

Why don't you create the coordinates array with Leaflet's LatLng object?为什么不使用 Leaflet 的LatLng对象创建坐标数组?

var coords = [];

onEachFeature : function(feature,layer) {
  var coordinates = feature.geometry.coordinates;
  coords.push(L.LatLng(coordinates[1], coordinates[0])); // paramter's depending on your object
}

Then, use somewhat like:然后,使用有点像:

// suppose, centerCoordinates is LatLng object as well
centerCoordinates.distanceTo(coords[0]); 

link to LngLat object on Leaflet: https://leafletjs.com/reference-1.4.0.html#latlng链接到 Leaflet 上的LngLat对象: https ://leafletjs.com/reference-1.4.0.html#latlng
link to distanceTo method on LngLat : https://leafletjs.com/reference-1.4.0.html#latlng链接到LngLat上的distanceTo方法: https ://leafletjs.com/reference-1.4.0.html#latlng

Since you're spawning L.CircleMarker s, and L.CircleMarker s have a getLatLng() method , you can forego handling the coordinates yourself.由于您正在L.CircleMarker s,并且L.CircleMarker s 具有getLatLng()方法,因此您可以放弃自己处理坐标。 Simply refer to the CircleMarker instance when calculating the distance, eg:计算距离时直接引用CircleMarker实例即可,eg:

onEachFeature : function(feature,layer) {
  var distance = layer.getLatLng().distanceTo(centerPoint);
  layer.on('click',function(){
    layer.bindPopup("Distance to center: " + distance);
  });
}

Note that, in this case, the distance variable exists in a scope unique for each feature, so there's no need for closures .请注意,在这种情况下, distance变量存在于每个特征的唯一范围内,因此不需要闭包 The calls to the onEachFeature() callback act as a closure here.onEachFeature()回调的调用在这里充当闭包。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM