从 LatLng 获取绝对像素坐标

2024-03-05

我需要传单中 LatLng 坐标的绝对像素坐标。需要明确的是,这些坐标是从左上角到地图上的 LatLng 坐标的像素距离。

我读了像素原点 http://leafletjs.com/examples/extending/extending-2-layers.html#the-pixel-origin扩展传单教程中的章节,但我不明白。经纬度到图层点 http://leafletjs.com/reference-1.2.0.html#map-latlngtolayerpoint or project http://map.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 https://jsfiddle.net/geraldo/x221qu8L/和我失败的测试。


您的投影代码不是问题,而是数据格式: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] /cdn-cgi/l/email-protection/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" rel="stylesheet"/>
<div id='map'></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 LatLng 获取绝对像素坐标 的相关文章

  • R - 过滤器坐标

    我是 R 新手 我有一个简单的问题 据我看来 但到目前为止我还没有找到解决方案 我有一组 长 2D x y 坐标 只是 2D 空间中的点 如下所示 ID x y 1 1758 56 1179 26 2 775 67 1197 14 3 29
  • 使用 leaflet.js 在点周围添加设定大小的正方形多边形

    有点奇怪 希望有人能帮忙 在传单中 一旦用户输入了纬度 经度并向地图添加了一个点 我希望能够在该点周围添加一个 10 公里的正方形 我尝试四处寻找计算方法来找到 x 公里外的正方形角点 但没有挖出任何东西 但肯定有更简单的方法 有人有想法吗
  • 矩阵向量变换

    我正在编写一个代码来制作软件蒙皮器 骨骼 皮肤动画 并且我正处于 优化 阶段 蒙皮器工作得很好 并且在 Core 上 1 09 毫秒内对 4900 个三角形网格与 22 个骨骼进行蒙皮Duo 2 Ghz 笔记本 我需要知道的是 1 有人可以
  • 如何使用 LeafLe 创建商店地图

    我希望创建一个可以交互的地图 我发现的最好的选择是传单 问题是我没有找到任何资源来解释如何创建自己的地图 我希望创建一个商场地图 用户可以在其中看到所有商店 喷泉 我怎样才能做到这一点 最好的起点是传单示例页面 http leafletjs
  • 传单圆圈绘制/编辑问题

    我第一次制作传单 并面临绘制圆圈和编辑 更改圆圈位置 的问题 我面临的问题是 编辑 移动 圆从一个位置到另一位置会改变其半径 Note 请尝试在给定的小提琴中在地图顶部创建圆圈 然后通过单击编辑按钮将其移动到底部 如果我在地图的顶部创建圆圈
  • 将 MSSQL 中用于 Web 制图的投影(Leaflet、Openlayer、OpenStreetMaps、GoogleAPI...)更改为 WSG48 或任何其他格式

    我在 MSSQL 服务器中有一些像这样的 WKT WKB 数据 并希望借助 leaflet Openlayer OpenStreetMaps 或 GoogleAPI 将它们显示在地图上 我的数据如下所示 POLYGON 1736946 09
  • 验证纬度和经度

    我想验证纬度和经度 现在 我只是检查该值是否不为空 但我想要进行验证以检查它是否是有效的纬度或经度 我怎么做 我的财产是这样的 public string Lat get return this lat set base Validatio
  • python:查找围绕某个 GPS 位置的圆的 GPS 坐标的优雅方法

    我有一组以十进制表示的 GPS 坐标 并且我正在寻找一种方法来查找每个位置周围半径可变的圆中的坐标 这是一个例子 http green and energy com downloads test circle html我需要什么 这是一个圆
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何将旋转的 NetCDF 转换回正常的纬度/经度网格?

    我有一个带有旋转坐标的 NetCDF 文件 我需要将其转换为正常的纬度 经度坐标 经度为 180到180 纬度为 90到90 library ncdf4 nc open dat nf 对于尺寸 它显示 1 5 variables exclu
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • 如何使传单圆圈标记可拖动?

    使用传单 我创建了一个L circleMarker我希望它是可拖动的 var marker L circleMarker new L LatLng 48 94603 2 25912 draggable true bindPopup Circ
  • 显示带有跨越 180 条经线的传单的 GeoJSON

    我正在尝试显示跨越第 180 条子午线的 geoJSON 对象 在本例中为俄罗斯的轮廓 目前 该国家 地区的一部分显示在地图的左侧 一部分显示在右侧 看看传单 似乎有一个解决方案 但这似乎不起作用 https github com Leaf
  • 如何在 Tensorflow 对象检测 API 中查找边界框坐标

    我正在使用 Tensorflow 对象检测 API 代码 我训练了我的模型并获得了很高的检测百分比 我一直在尝试获取边界框坐标 但它不断打印出 100 个奇怪数组的列表 经过在线广泛搜索后 我发现数组中的数字意味着什么 边界框坐标相对于底层
  • 调整传单地图大小时如何保持地图居中?

    我在用着leaftlet http leafletjs com reference html在网页上创建地图 地图的左侧是一个滑出的面板 当面板滑出时 地图会调整大小以填充页面上的剩余空间 当面板向左滑出时 地图调整大小 中心点向左移动 理
  • 传单 - 导入 Geojson - Angular 6

    我尝试将 GeoJson 文件导入到 Angular 的应用程序 6 中的传单中 通过这个解决方案 我的 geojson 是在 leafletmap 中绘制的 但我有这个错误 我无法构建我的应用程序 有人知道一种解决方案吗 错误 TS234
  • 根据传单中的属性更改标记颜色

    我的目标是让我的标记根据它们的不同而采用三种不同的颜色rating财产 我看过类似的帖子 其中使用对象来定义颜色 每个标记都有一个rating属性在 1 到 5 之间 我正在考虑使用 else if 语句 例如 if rating lt 3
  • 如何强制传单更新地图?

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国
  • 在shiny中过滤传单地图数据

    我在用传单地图设置这个闪亮的东西时遇到了麻烦 我的原帖 https stackoverflow com questions 50111566 applying leaflet map bounds to filter data within
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G

随机推荐