从LatLng获取绝对像素坐标

热拉尔多

我需要Leaflet中LatLng坐标的绝对像素坐标。为了清楚起见,这些坐标是从左上角到地图上LatLng坐标的像素距离。

从扩展的《传单指南》中阅读了“像素起源”一章,但我不明白。latLngToLayerPoint项目转换方法应该做到这一点-但我没有得到真正的像素位置:

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

乔斯基

您的投影代码不是问题,它是数据格式:Leaflet假定数组为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);
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
      position: absolute;
		}
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id='map'></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章