LatLng에서 절대 픽셀 좌표 가져 오기

Question

전단지에서 LatLng 좌표의 절대 픽셀 좌표가 필요합니다. 이 좌표는지도의 왼쪽 위 모퉁이에서 LatLng 좌표까지의 픽셀 거리입니다.

확장 전단지 자습서에서 The pixel origin 장을 읽었지만 이해하지 못합니다. latLngToLayerPoint 또는 project 변환 방법은 그것을해야 -하지만 실제 픽셀 위치하지 않습니다

여기

const pixelPoint = map.project(feature.geometry.coordinates[0], map.getZoom()); 
const pixelOrigin = map.getPixelOrigin(); 
const pixelCoord = pixelPoint.subtract(pixelOrigin); 
const layerPoint = map.latLngToLayerPoint(feature.geometry.coordinates[0]); 

내 실패한 테스트와 jsfiddle입니다.

Answer 1

당신의 투영 코드는 문제가 아닙니다. 그것은 데이터 포맷입니다 : 전단지는 latlon으로 배열을 가정하고 geojson에서는 lonlat입니다! 스와핑을 시도하거나 L.latLng 객체를 사용하십시오.

var freeBus = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
      [-105.00341892242432, 39.75383843460583], 
 
      [-105.0008225440979, 39.751891803969535] 
 
     ] 
 
     }, 
 
     "properties": { 
 
     "popupContent": "This is a free bus line that will take you across downtown.", 
 
     "underConstruction": false 
 
     }, 
 
     "id": 1 
 
    }, 
 
    { 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
      [-105.0008225440979, 39.751891803969535], 
 
      [-104.99820470809937, 39.74979664004068] 
 
     ] 
 
     }, 
 
     "properties": { 
 
     "popupContent": "This is a free bus line that will take you across downtown.", 
 
     "underConstruction": true 
 
     }, 
 
     "id": 2 
 
    }, 
 
    { 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
      [-104.99820470809937, 39.74979664004068], 
 
      [-104.98689651489258, 39.741052354709055] 
 
     ] 
 
     }, 
 
     "properties": { 
 
     "popupContent": "This is a free bus line that will take you across downtown.", 
 
     "underConstruction": false 
 
     }, 
 
     "id": 3 
 
    } 
 
    ] 
 
}; 
 

 
var map = L.map('map', { 
 
    center: [39.74739, -105], 
 
    zoom: 13 
 
}); 
 

 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
 
    maxZoom: 18, 
 
    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://mapbox.com">Mapbox</a>', 
 
    id: 'mapbox.light' 
 
}).addTo(map); 
 

 

 
function onEachFeature(feature, layer) { 
 
    layer.bindPopup(
 
    function(layer) { 
 
     // get pixel coordinates from first LatLng coordinate 
 
     const latlon = L.latLng(feature.geometry.coordinates[0][1], feature.geometry.coordinates[0][0]); 
 
     const pixelPoint = map.project(latlon, map.getZoom()); 
 
     const pixelOrigin = map.getPixelOrigin(); 
 
     const pixelCoord = pixelPoint.subtract(pixelOrigin); 
 
     const layerPoint = map.latLngToLayerPoint(latlon); 
 
     var popupContent = "<h1>Pixel coordinates</h1>"; 
 
     popupContent += "<p>Point: " + pixelPoint + "</p>"; 
 
     popupContent += "<p>Origin: " + pixelOrigin + "</p>"; 
 
     popupContent += "<p>Diff: " + pixelCoord + "</p>"; 
 
     popupContent += "<p>layerPoint: " + layerPoint + "</p>"; 
 
     return popupContent; 
 
    } 
 
); 
 
} 
 
L.geoJSON(freeBus, { 
 

 
    filter: function(feature, layer) { 
 
    if (feature.properties) { 
 
     // If the property "underConstruction" exists and is true, return false (don't render features under construction) 
 
     return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true; 
 
    } 
 
    return false; 
 
    }, 
 

 
    onEachFeature: onEachFeature 
 
}).addTo(map);

\t \t html, body { 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0; 
 
\t \t } 
 
\t \t #map { 
 
\t \t \t width: 600px; 
 
\t \t \t height: 400px; 
 
     position: absolute; 
 
\t \t }

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> 
 
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet"/> 
 
<div id='map'></div>