我正在尝试在我的传单地图上显示来自巴西的形状文件，该形状文件位于 .zip 中，其中包含：.dbf、.prj、.sbn、.sbx、.shp 和 .shx 文件。为此，我正在使用：https : //github.com/calvinmetcalf/leaflet.shapefile
我的本地计算机上有 .zip 文件，所以我只是做了：
HTML
<button ng-click="addShape()"> Brasil Shape File </button>
JS
var mymap = L.map('mapid').setView([-12.85, -50.09], 4);
$scope.addShape = function () {
var shpfile = new L.Shapefile('scripts/ShapeFiles/Brasil.zip');
shpfile.addTo(mymap);
}
现在我想让用户上传 .zip 以将其显示在地图上，就像这里发生的事情一样：http : //leaflet.calvinmetcalf.com/#3/32.69/10.55
但我想不通……我在互联网上找到的只是将 .zip 文件发布到一个 url。我需要在用户将其“上传”到浏览器后立即使用该文件。
在下面的代码中，用户可以上传一些文件并发布它，我尝试在发送之前对包含 .zip 文件的假定对象进行 console.log 记录，但我在对象中找不到它：
HTML
<body ng-controller="FileUploadCtrl">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" />
</div>
<input type="button" ng-click="uploadFile()" value="Upload" />
</body>
JS …
根据许多国家/地区代码列表，我正在尝试向传单世界地图添加多个多边形。我试图使用 R 循环来添加多边形。这是我从列表 1 中手动添加多边形的代码：
library(sp)
library(raster)
library(leaflet)
library(maps)
library(tidyverse)
countries_1 <- c('PAK','TUR','BGR')
adm1 <- getData('GADM', country='PAK', level=0)
adm2 <- getData('GADM', country= 'TUR', level=0)
adm3 <- getData('GADM', country= 'BGR', level=0)
leaflet() %>%
addTiles() %>%
addPolygons(data=adm1, weight = 3, fillColor = 'purple', color = 'purple') %>%
addPolygons(data=adm2, weight = 3, fillColor = 'purple', color = 'purple') %>%
addPolygons(data=adm3, weight = 3, fillColor = 'purple', color = 'purple')
我正在考虑使用循环添加多个多边形图层，以便为 list_n：
countries_n <- ('ctry1','ctry2','ctry3',...'ctryn')
for (i in country_n) {
countries <- basemap %>% …使用leafletinshiny制作交互式地图。从 CSV 中提取弹出窗口的数据：
Row on CSV:
Name lat lng
Tufts 42.349598 -71.063541
R 上的标记代码：
m %>% addMarkers(~lng, ~lat, icon = custommarker1 popup = ~htmlEscape(Name))
这会在正确的位置返回标记，弹出窗口显示 ' tufts'
不知道是否有一个超链接直接在CSV编码成弹出的方式？OOR把纯文本作为一个新的CSV列，有R/Shiny然后把它变成一个超链接。
对shiny/非常陌生leaflet，希望得到任何帮助！
我正在从事一个大学项目，我对 JS 编码很陌生，我遇到了一个问题，我正在使用 w3 库实现我的应用程序，并且当用户单击按钮时会显示一个模态窗口，并且该模态包含一个传单地图，它没有正确渲染，所以我在 Stackoverflow 上找到了这个问题的解决方案： Leaflet 地图没有在 bootstrap 3.0 模式中正确显示，所以我在该线程中尝试了建议的解决方案并将其放入我的 JS 代码中：
$('#comparator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 400);
});
但我遇到了另一个问题，我找不到解决办法。我的地图仍然渲染得很糟糕，但是当我调整浏览器窗口的大小时，它似乎工作正常（重新渲染整个地图，并正确显示地图），所以我认为这个问题可能与时间有关，因为模式可能需要很长时间来加载和map invalidateSize() 在加载模态之前执行，我尝试使用不同的超时（4、40、400、4000），但这并不能解决任何问题，所以我在这里有点迷失了，任何想法将不胜感激，这里的人是我的模态体：
<div id="comparator_modal" class=" w3-modal">
<div class="w3-modal-content w3-animate-left w3-card-4">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('comparator_modal').style.display='none'"
class="w3-btn w3-red w3-round w3-display-topright" style="font-size:16px; text-shadow:2px 1px 0 #444;">×</span>
<h3 class="w3-center" style="text-shadow:2px 1px 0 #444;">Comparator</h3>
</header>
<body>
<div id="comparator_modal_body">
<div class=w3-row">
<div id="map01_comparator"></div>
<!--<div id=map01_comparator class="w3-half w3-text-black">Map#1</div>
<div id=map02_comparator class="w3-half w3-text-black">Map#2</div>-->
<div class="w3-row">
<div class="w3-half w3-center w3-text-black">
<div id="time_stamp1">Time_stamp</div>
</div>
<div …我找不到在标记单击时获取弹出内容的方法？
> //An extract of address points from the LINZ bulk extract:
> http://www.linz.govt.nz/survey-titles/landonline-data/landonline-bde
> //Should be this data set:
> http://data.linz.govt.nz/#/layer/779-nz-street-address-electoral/ var
> addressPoints = [ [-37.793167, 175.211862,"the one"], [-37.8210922667,
> 175.2209316333, "2"], [-37.8210819833, 175.2213903167, "3"], [-37.8210881833, 175.2215004833, "3A"], [-37.8211946833,
> 175.2213655333, "1"], [-37.8209458667, 175.2214051333, "5"], [-37.8208292333, 175.2214374833, "7"], [-37.8325816, 175.2238798667,
> "537"], [-37.8315855167, 175.2279767, "454"], [-37.8096336833,
> 175.2223743833, "176"], [-37.80970685, 175.2221815833, "178"], [-37.8102146667, 175.2211562833, "190"], [-37.8088037167, 175.2242227,
> "156"], [-37.8112330167, 175.2193425667, "210"], [-37.8116368667,
> 175.2193005167, "212"], [-37.80812645, …我正在尝试使用http://leafletjs.com/reference-1.2.0.html#polyline 中的演示
// create a red polyline from an array of LatLng points
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());
但是，它给我一个错误：
[ts]
Argument of type 'number[][]' is not assignable to parameter of type 'LatLngExpression[]'.
Type 'number[]' is not assignable to type 'LatLngExpression'.
Type 'number[]' is not assignable to type '[number, number]'.
Property '0' is missing in type 'number[]'.
使用带有 Angular/TypeScript …
我能够显示集群标记的内容，但无法显示单个标记的内容。
请找到以下代码，其中 else 语句将处理单个标记。
map.eachLayer(function(marker) {
if (marker.getChildCount) { // to get cluster marker details
console.log('cluster length ' + marker.getAllChildMarkers().length);
} else {
// how to display the contents of a single marker ??
alert(marker.options.title); // doesn't work
}
谢谢。
我想将地图放在传单中的特定 wms 图层上。为此，我尝试获取 wms 图层的边界框，然后使用 map.fitBounds(bbox) 方法。但我不知道如何获得图层的边界框！有人可以给我一个解决方案吗？谢谢
我正在使用 Leaflet 创建一个地图游戏（非常基本）。
基本上我想<div>在地图上添加一个输入，这样当用户输入一个位置时，它就会平移到地图上的坐标。
我尝试创建元素并附加到地图中，<div>其中包含以下变体：
var d1 = document.getElementsByClassName('leaflet-control-container')[0];
d1.insertAdjacentHTML('afterbegin', '<div id="two">two</div>');
但是<div>显示在地图后面并且图像覆盖了它。
我怎样才能让它像缩放控制一样显示？