leaflet 相关问题

如何通过单张地图单击来更改集群缩放级别？

我有一张传单地图，缩放级别为 2-7，并使用 MarkerCluster 插件，默认情况下，我让 L.MarkerClusterGroup 禁用缩放级别为 2 的聚类（这意味着没有聚类），我很...

如何以角度方式在页面上创建多个传单地图

我已经创建了下面给出的传单开放街道地图。 .component.ts 地图 = L.map('地图').setView([12.876, 80.599], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { ...

自定义绘图和传单地图之间的突出显示

我的目标是在一个面板中的绘图图形和第二个面板中的地图之间链接突出显示。出于我的目的，我想在一个面板中选择（突出显示）数据并突出显示所选数据...

带有显示标题的标记的TimestampedGeoJson

我想制作一艘在航线上行驶的船的动画。目前，我可以使用 TimestampedGeoJson 将路线显示为一条线，将船显示为一个圆圈： # 带有以下线的圆圈 特征=[ { ...

在传单中设置 Esri 矢量切片样式

目标：在此链接中，我找到了一个 Esri 矢量切片（网址为 https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x }.pbf)，我想将它加载到 leafle...

同一页面显示3张传单地图

我遵循了许多有关在同一页面上显示两个传单地图的教程。我的最终目标是拥有一个可以传递地址的 php 文件，它会返回一个带有地图的 div ...

Wordpress 上的传单地图

所以在过去的两个小时里，我一直在尝试弄清楚如何在我制作的自定义帖子类型上使用 Leaflet Map...所以问题是我需要地图仅在该自定义帖子的 archive.php 上显示输入...

Leaflet Routing Machine：如何以 JSON / GeoJSON 导出路线详细信息和坐标？

我需要以 JSON 或 GeoJSON 格式导出/保存使用 Leaflet Routing Machine 找到的路线详细信息。 我尝试过使用 var 路由数组 = 新数组(); 路线数组 = control.getWaypoints(); 麦酒...

如何防止自定义控件缩放或单击地图

我在缩放控件下创建了一个自定义控件，当我点击它时，会触发地图上的点击，这是我不想要的，如果我双击也是如此，缩放是触发。 我...

Angular 17+ SSR 和传单、ngx-leaflet、ngx-leaflet-draw

所以我有一个用 Angular 编写的相对复杂的 Web 应用程序。最近我更新到了 Angular 18 的最新版本，以利用 Angular 17 原生 SSR 中引入的新功能（服务...

为传单地图生成随机颜色

伟大的 R 大师， 我正在努力寻找一种方法来为我的传单地图随机混合离散颜色以进行大量观察。 问题是以下命令将相似的颜色放在...

如何在leaflet.js中正确添加多边形

使用leaflet.js渲染多边形时。 以下示例有不同的结果。 实施例1 const map = L.map('地图', { 更喜欢画布：正确， 缩放控制：假， 归因控制：...

使用草坪和传单

我制作了一张传单地图，并正在尝试实施草皮。 作为一项快速测试，我只想在我的一个标记周围放置一个缓冲区。但不知何故，我仍然只能看到地图上的两个标记。我基本...

Angular 17 独立应用程序上的传单出现错误

我是最近的 Angular 用户。 我正在尝试向我的项目添加传单地图。 我发现我必须使用一项服务来避免与窗口相关的错误。 我使用了以下示例：https://github.com/NickT...

带有可点击按钮的Leaflet divIcon

我正在制作传单，我想为自定义 divIcon 中的图标添加单击事件，如下所示， 如果用户单击编辑（铅笔）图标，则应触发单击事件， 这是我正在使用的代码...

React Leaflet 地图调整大小问题

在使用react-leaflet创建地图时，我希望地图组件接管页眉和页脚之后的所有可用空间。该代码似乎有效。但是，当调整大小处理程序为

从传单标记簇中删除项目

我有两个函数可以将标记加载到我的地图中。 （这两个函数都会在 AJAX 调用成功时调用） 第一个函数是这样的： 函数loadEpsMarkers（数据）{ 对于 (var i = 0; i < data.

角度/打字稿应用程序中的传单

我将在 Angular (15.1.6)/typescript 应用程序中使用 Leaflet (1.9.4)。 所以在index.html中我添加了 我将在 Angular (15.1.6)/typescript 应用程序中使用 Leaflet (1.9.4)。 所以在 index.html 我添加了 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> 在 app.component.html <div id="map"></div> 并且 app.component.ts 看起来像 import * as L from 'leaflet'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'LeafletExp'; latlngs!: L.LatLngExpression[]; line!: L.Polyline; map!: L.Map; ngOnInit(): void { this.map = L.map('map').setView([50.505, 30.09], 13); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(this.map); this.latlngs = [ [50.509, 30.086], [50.517, 30.081], [50.519, 30.083], [50.513, 30.06], [50.512, 30.047] ]; var myMarker = L.icon({iconUrl: 'assets/myMarker.png', iconSize: [12, 12], iconAnchor: [6,6]}); for (let index = 0; index < this.latlngs.length; index++) { var node = L.marker(this.latlngs[index], {draggable: true, autoPan: true, icon: myMarker}).addTo(this.map); //@ts-ignore node.id = index; node.on('drag', this.dragHandler); } this.line = L.polyline(this.latlngs, { color: 'blue'}); this.line.addTo(this.map); } dragHandler = (e: L.LeafletEvent) => { this.latlngs[e.target.id] = e.target._latlng; this.map.removeLayer(this.line); this.line = L.polyline(this.latlngs, { color: 'blue'}); this.line.addTo(this.map); } } 出于某些原因，例如为了将线条与标记一起拖动，我需要为地图上的每个标记分配 ID。因此，正如@ghybs 在这个讨论中所解释的那样，在创建每个标记时，我为其分配了一些像这样的ID //@ts-ignore marker.id = <some id> 它可以工作，但作为打字稿/传单的初学者，我想知道使用 //@ts-ignore 这样是否正常，或者也许有更好的方法来分配 ID？ 我猜您想摆脱 @ts-ignore，一种方法是使用自定义类型的标记，其中我们使用交集运算符 (&) 来添加 index 属性，这将摆脱您的错误！ export type ExtendedMarker = L.Marker & {id: number}; ... ... for (let index = 0; index < this.latlngs.length; index++) { var node: ExtendedMarker = <ExtendedMarker>L.marker(this.latlngs[index], {draggable: true, autoPan: true, icon: myMarker}).addTo(this.map); node.id = index; node.on('drag', this.dragHandler); } ... 完整代码： import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import * as L from 'leaflet'; export type ExtendedMarker = L.Marker & {id: number}; @Component({ selector: 'app-root', standalone: true, template: ` <div id="map"></div> `, }) export class App { title = 'LeafletExp'; latlngs!: L.LatLngExpression[]; line!: L.Polyline; map!: L.Map; ngOnInit(): void { this.map = L.map('map').setView([50.505, 30.09], 13); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(this.map); this.latlngs = [ [50.509, 30.086], [50.517, 30.081], [50.519, 30.083], [50.513, 30.06], [50.512, 30.047] ]; var myMarker = L.icon({iconUrl: 'assets/myMarker.png', iconSize: [12, 12], iconAnchor: [6,6]}); for (let index = 0; index < this.latlngs.length; index++) { var node: ExtendedMarker = <ExtendedMarker>L.marker(this.latlngs[index], {draggable: true, autoPan: true, icon: myMarker}).addTo(this.map); node.id = index; node.on('drag', this.dragHandler); } this.line = L.polyline(this.latlngs, { color: 'blue'}); this.line.addTo(this.map); } dragHandler = (e: L.LeafletEvent) => { this.latlngs[e.target.id] = e.target._latlng; this.map.removeLayer(this.line); this.line = L.polyline(this.latlngs, { color: 'blue'}); this.line.addTo(this.map); } } bootstrapApplication(App); Stackblitz 演示

Geojson/ turf ：将多个多边形合并到一个保留洞的多边形中

所以我想在javascript中合并相邻的多边形，这就是我的代码实际拥有的： 我想删除内部描边但保留边框描边。 所以我想从这里开始： 对此： 我想...

R leaflet 包生成空白（灰色）地图 [Ubuntu 14.04]

我尝试了传单包文档中的示例代码： devtools::install_github("rstudio/leaflet");库(leaflet) 米 <- leaflet() %>% addTiles() %>% # 添加默认的 OpenStreetMap 地图...