标签: leaflet
Leaflet js虚构地图
我是 Leaflet 的新手，我想知道如何创建一个完全交互式的虚构地图。我有一个图像，我想将其转换为传单地图。该图像基本上像图形一样具有许多连接和点。
我想首先将该图像转换为地图，能够将鼠标悬停在点上，突出显示它们并显示有关它们的信息，并且还可以在某个点创建动画，但不能立即使用连接创建动画。还需要在每个点旁边显示永久标签。
这在传单中可能吗？
2
推荐指数
推荐指数
1
解决办法
解决办法
2081
查看次数
查看次数
如何使用传单编辑加载的 geoJson
我想从数据库中检索多边形数据，然后对其进行编辑。我可以检索多边形（存储为 geojson），但不能使它们可编辑。我怎样才能做到这一点？
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created',function(e) {
e.layer.addTo(drawnItems);
});
L.control.layers(baseLayers).addTo(map);
var oldPolygon = null;
function showOnMap(rowid){
if(oldPolygon != null){
map.removeLayer(oldPolygon);
}
$.get("testdbextract.php?show="+rowid,function(data){
var newPolygon = L.geoJson(data);
newPolygon.addTo(drawnItems); // or drawnItems.addLayer(newPolygon);
oldPolygon = newPolygon;
});
}
2
推荐指数
推荐指数
1
解决办法
解决办法
4090
查看次数
查看次数
传单地图未加载图块
我的代码：
<!DOCTYPE html>
<html>
<head>
<title>OpenTTD Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1600px; height: 900px"></div>
<script>
var tile_url = 'http://dev.ruun.nl/zelf/openttd/tiles/map_{x}_{y}.png';
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
//65409x32839
var southWest = map.unproject([0, 32839], map.getMaxZoom());
var northEast = map.unproject([65409, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer(tile_url, {
attribution: 'Map data © Ieuan\'s OpenTTD World',
continuousWorld: true,
tileSize: 256
}).addTo(map);
</script>
</body>
</html> …2
推荐指数
推荐指数
1
解决办法
解决办法
5429
查看次数
查看次数
传单：通过 id 删除图层不起作用
我正在尝试从地图中删除元素：工作代码：
var x = L.imageOverlay(fullURL, xbounds).addTo(Window.map);
Window.map.removeLayer(x);
不工作：
var x = L.imageOverlay(fullURL, xbounds).addTo(Window.map);
Window.map.removeLayer(1);
根据文档，它有通过 ID 删除元素的方法
2
推荐指数
推荐指数
1
解决办法
解决办法
3031
查看次数
查看次数
Leaflet.js：设置每层的最大缩放级别？
我正在使用带有两个地图基础层的 CartoDB.js（3.15.9，基于 Leaflet.js），一个来自 CartoDB 的街道层和一个来自 MapQuest 的卫星层：
var options = {
center: [53.2, -2.0],
zoom: 6
};
var map = new L.Map('map', options);
var streetLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
}).addTo(map);
L.control.layers({
'Map': streetLayer,
'Satellite': MQ.satelliteLayer()
}, null, {'collapsed': false, 'position': 'bottomleft'}).addTo(map);
我可以设置每层最大缩放级别吗？我希望街道层的最大缩放为 18，卫星层为 21（这是因为它们具有不同的最大缩放级别）。
我尝试maxZoom: 18在streetLayer对象上设置，但这似乎没有任何作用。options设置全局最大缩放的相同选项，但这显然不是我想要的。
2
推荐指数
推荐指数
1
解决办法
解决办法
4030
查看次数
查看次数
Heroku 上缺少 GDAL
运行的 Django 应用程序通过django-geojson将 GeoJSON 数据存储在其中一个模型中。在管理界面中，此字段可通过django-leaflet 进行编辑。当我使用 本地运行应用程序时./manage.py runserver，界面工作正常，页面如下所示。
但是，当我部署到构建良好的 Heroku 并在管理界面中打开相同的 Location 实例时，蓝色标记不在地图上的任何位置，地图正常加载，并且我收到此错误消息：
Error creating geometry from value '{
"coordinates":[
"-105.2449000",
"40.0474000"
],
"type":"Point"
}' (Initializing geometry from JSON input requires GDAL.)
我只是在我的 models.py
from djgeojson.fields import PointField
from django.db import models
class Location(models.Model):
"""
A model subclass for recording geographic data.
"""
service_id = models.CharField(max_length=255, blank=True, null=True)
name = models.CharField(max_length=255, blank=True, null=True)
geom = PointField() # GeoJSON (remember, coordinates: [long, lat])
def __str__(self): …2
推荐指数
推荐指数
2
解决办法
解决办法
2088
查看次数
查看次数
在传单上将点转换为 LatLng
我正在尝试将我的点在地图上的正确位置设为 Latlng：
let point = L.point(0,0) // x=0,y=0
let latlng = map.unproject(point)
但latlng价值不是真实的位置！
我错过了什么？
2
推荐指数
推荐指数
1
解决办法
解决办法
4685
查看次数
查看次数
如何使用 React-Leaflet 获取标记集合的边界
如何获取标记集合的边界，以便这些边界可用于在react-leaflet地图上显示所有标记？这是我的渲染功能：
render() {
const position = [51.505, 4.12];
return (
<Map center={position} zoom={3} style={{width: '100%', height: '600px'}} >
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{this.state.markers || null}
</Map>
);
}
标记添加到this.state.markers：
this.state.markers.push(
<Marker position={position}>
<Popup>
<span>Hello</span>
</Popup>
</Marker>
);
this.setState({markers: this.state.markers});
标记正在显示，但我希望调整地图的边界和中心，以便标记在具有一定填充量的地图视口内很好地适应。
关于如何做到这一点的任何想法？
编辑：这是我的导入语句：import {Map, Marker, Popup, TileLayer} from 'react-leaflet';
2
推荐指数
推荐指数
1
解决办法
解决办法
5093
查看次数
查看次数
Shiny - 在传单地图中控制小部件
我有一个简单的闪亮应用程序，只有一个下拉列表阿富汗地区和一张相同的传单地图。
可以通过此链接访问形状文件- 使用来自http://www.gadm.org/download 的AFG_adm2.shp
这是应用程序代码：
library(shiny)
library(leaflet)
library(rgdal)
library(sp)
afg <- readOGR(dsn = "data", layer ="AFG_adm2", verbose = FALSE, stringsAsFactors = FALSE)
ui <- fluidPage(
titlePanel("Test App"),
selectInput("yours", choices = c("",afg$NAME_2), label = "Select Country:"),
actionButton("zoomer","reset zoom"),
leafletOutput("mymap")
)
server <- function(input, output){
initial_lat = 33.93
initial_lng = 67.71
initial_zoom = 5
output$mymap <- renderLeaflet({
leaflet(afg) %>% #addTiles() %>%
addPolylines(stroke=TRUE, color = "#00000", weight = 1)
})
proxy <- leafletProxy("mymap")
observe({
if(input$yours!=""){
#get the selected polygon …2
推荐指数
推荐指数
1
解决办法
解决办法
2547
查看次数
查看次数
使传单地图移动响应
我在 R 中构建了一个带有传单包的传单。这里是使用的代码的简化版本
图书馆（传单）
# dumb data
Points <- data.frame(lon = c(41.889, 41.882, 41.891), lat = c(12.455, 12.446, 12.459))
# web map
wland <-
leaflet(data = Points) %>%
addTiles() %>%
addCircleMarkers(col = "red",
fillOpacity = 1,
radius = 5,
stroke = TRUE,
clusterOptions = markerClusterOptions(
maxClusterRadius=35, disableClusteringAtZoom=14
))
saveWidget(wland, "To:/Your/Path/map.html", selfcontained = FALSE)
我在这里上传了 html 和所有 javascript 。它在桌面上看起来不错，但在移动设备上却没有很好的响应：标记仍然太小等等。您知道如何使传单移动响应吗？我应该在 R-leaflet 创建的 javascript 中修改一些东西吗？
谢谢，雅各布
2
推荐指数
推荐指数
1
解决办法
解决办法
8883
查看次数
查看次数