leaflet 相关问题

反应传单。地图未显示

我已经尝试在我的网站中创建地图部分至少一个小时了，但是反应传单或传单根本不起作用。我按照医生说的每一步去做，我看了很多

在 R studio for mac book 上，如何确保我的地图是老丁？

我在我的 macbook 上使用 Rstudio，我想运行地理分析。我有传单库以及所需的总体库。但是，当我“查看（make_a_map）”时，没有...

Leaflet 不适用于 R 中的特定底图图层

我最近在做一个项目。它的一个维度是制作具有不同底图图层的传单地图。这是到目前为止的代码； 图书馆（传单） 图书馆（传单.提供者） 传单() %>%

使用 boostrap-icons 作为传单地图标记

我想使用 Bootstrap Icons 作为 Leaflet 中的地图标记。有许多用于此目的的插件（例如 [1]、[2]、[3]），但它们未维护或无法与最新的 Bootstrap Icons 一起使用。 所以我

如何在 TWebLeafletMaps 组件中的两个坐标之间绘制一条线？

在这篇博文中，他们清楚地展示了如何在坐标之间画一条线： 过程 TForm2.WebFileUpload1GetFileAsText(Sender: TObject; AFileIndex: Integer; AText: string); 变量 ja：TJSArra...

如何删除 TMS WEB Core 中 TWebLeafletMaps 组件上的归因？

当我在表单上放置 TWebLeafletMaps 组件时，地图右下角会出现一个小的“Leaflet | OpenStreetMap 贡献者”归属线，如下所示： 通常在 JavaS 中...

“找不到模块‘react-leaflet’”

我在React Native中使用react leaflet。它在旧版本的 expo 和 React Native 中运行良好。但由于某种原因我不得不更新我的包。现在我收到错误“无法

JavaScript - 如何为红线绘制黑色轮廓（或描边） - leaflet mapbox

我尝试弄清楚如何使用填充颜色：红色和轮廓：黑色绘制线串。就像下图一样： 风格={ 填充颜色: 'rgb(255,0,0)', 大纲：'rgb(0,0,0)' 称重...

在 Leaflet.js 中实现爬行前进 (CLA) 到任务区域搜索模式转换

我需要使用 Leaflet.js 在任务区域（正方形、矩形和通用多边形）上绘制爬行线（CLA）图案。 CLA 图案包括具有较短

未捕获类型错误：L.geoJson.ajax 不是函数 Leaflet.js Heatmap.js

您好，我面临这个错误，l.geoJson.ajax 不是函数。我不明白为什么我会遇到这个错误。我在某处读到我们必须将 leaflet.ajax.min.js 文件放在根目录中...

在传单中以较低缩放级别加载多边形的低分辨率版本

Leaflet采用的是根据缩放级别加载地图瓦片的原理，即地图图像的分辨率取决于缩放级别。我们可以将相同的原理应用于多边形吗？ 我的网...

addLegend 传单中的中断

我正在努力向传单中的 addLegend 添加自定义中断。我希望值的范围为 -1 到 1，每 0.5 间隔一次。我已经尝试过 bins 参数，但它不接受我的数字 vec...

在 typescript Angular 4 中将传单地图导出为 JPG

我正在制作一个带有传单地图的 Angular4 应用程序，我需要将地图的当前视图导出到一张 JPG 图像中。 就像截屏一样，但只是带有标记和折线的地图。 所以，f...

如何将Leaflet（时间线）控件放置在归因控件下方的底部（如MerrySky）

MerrySky 在其 Leaflet 地图的最底部有一个时间线控件。当地图扩展到全屏时，时间线也会包含在内。如何制作类似的Leaflet控件？ （相似尺寸/位置...

如何在点击按钮后动态调整传单地图的大小？

我有一份传单地图包含在 此页面分为 我有一份传单地图包含在<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div> 此页面分为<ion-header>、<ion-content>和<ion-footer>。该地图包含在 <ion-content> 中。我想做的是用按钮隐藏页眉和页脚。 所以我用 L.easyButton 创建了一个按钮。代码如下： L.easyButton('click',function(){ if(self.hideLayout){ self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); }else{ self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); } 我将以下代码添加到<ion-footer>中： <ion-footer *ngIf="!this.mapService.hideFooter"> 发生的情况是地图不会调整大小，并且仍然是白色带而不是页脚 我尝试使用invalidateSize传单方法，即使使用“setInterval”但没有成功。我认为有关 html 和 css 的内容需要编辑，但我还不是专家。 再次感谢大家，我希望我说清楚了:) 根据您的代码，我将添加我的积分； constructor(private plt: Platform) { } L.easyButton('click', () => { const map = document.getElementById('map'); if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); map.style.height = '100%'; map.style.width = '100%'; } else { self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); map.style.height = (this.plt.height() - 26) + 'px'; // 26 is the status bar, it may be 20 so u update it accordingly // source: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ map.style.width = this.plt.width() + 'px'; } 如果它不起作用，那么您需要提供您的 ts 代码，因为（自己）不太清楚它是像（这个）还是您只是共享部分功能... 最后我找到了一个适合我的解决方案。我会把它发布在这里。我要感谢@Mostafa Harb 帮助我。 L.easyButton('click', function() { const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1]; if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.hideHeader = false; self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "40px"; footerAndHeader.style.marginTop = "54px"; } else { self.hideLayout = true; self.hideFooter = true; self.hideHeader = true; self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "7px"; footerAndHeader.style.marginTop = "3px"; } }) 在我的例子中，问题是带有“scroll-content”类的<div>，该类是在<ion-content>标签内自动创建的。因此，使用 getElementsByClassName，我获取了数组中的第二个元素，并调整了页眉和页脚的上边距和下边距。 这个解决方案肯定不是最优的，会有更好的方法。 CSS .mymap{ display: flex; width: 100%; height: 100%; } HTML <div id="map" data-tap-disabled="false" class="mymap"> // your code </div> 添加 display: flex 并设置 height 和 width

停止在Leaflet中传播'click'事件

在我们的一个项目中，我们使用 Leaflet 和 Leaflet.markercluster 插件。查看Leaflet的来源，我发现它将_collapse()函数附加到地图的点击事件中，所以

第二次单击标记时未打开传单弹出窗口

我正在使用 leaflet.js 在 OSM 地图上显示标记。 问题是，第一次单击标记时，弹出窗口会正常打开，但第二次单击同一标记时，弹出窗口不会打开...

大型非地理地图的传单地图渲染问题

我目前正在使用React、tailwindCSS 和react-leaflet 为我的网站开发一个非地理地图。地图呈正方形，面积相当大，每边有1000万像素。 ...

“属性‘heatLayer’在类型 [Leaflet] 上不存在”--prod build

我正在尝试使用传单的热图库构建我的 Angular 9 项目。 编译它时效果很好，但是当我尝试 --prod 构建它时，出现以下错误： heat-map-map.compo 中出现错误...

使用 printThis 时，LeafletJS 中的地图容器已初始化

我正在使用 printThis 从应用程序的页面中打印一堆元素。 我遇到以下错误： leaflet.js:5 未捕获错误：地图容器已初始化。 在 e.