我有以下设置工作正常,但是,我有一些小问题..尝试了很多方法,但我不能摆脱标记添加新标记之前..
通过以下示例,无论何时从控制器推出,都会添加标记.在添加任何新标记之前,删除现有标记的最佳方法是什么？
var module = angular.module('Map', []);
module.directive('sap', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function(scope, element, attrs) {
var map = L.map(attrs.id, {
center: [-35.123, 170.123],
zoom: 14
});
//create a CloudMade tile layer and add it to the map
L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
//add markers dynamically
var points = [];
updatePoints(points);
function updatePoints(pts) {
for (var p in pts) {
L.marker([pts[p].lat, pts[p].long]).addTo(map).bindPopup(pts[p].message);
}
}
scope.$watch(attrs.pointsource, function(value) {
updatePoints(value);
});
}
};
});
在控制器内部,添加新标记的方法是 …
我有一个lat长对列表.(或者我可以创建GeoJSON).我想在传单地图上映射它们.
如何找到我应该设置的中心和缩放级别,以便显示所有点.
所有的传单示例似乎都使用固定的中心和缩放,但我接受用户输入,所以我需要计算它们.
以下javascript代码将允许在地图上的地图上创建标记,使用node.js/socket.io实时单击本地和全局.这很好,但每个添加的标记都可见.
像这个例子:http://jsfiddle.net/brettdewoody/LK35U/
现在,当第二标记已被添加到地图,我需要删除以前的标记(第一个)自动,再加入第三标记- >删除第二标记等.任何人都可以帮我理解如何做到这一点？也许和grouplayer一起？它是如何工作的？
// generate unique user id
var userId = Math.random().toString(16).substring(2,15);
var socket = io.connect('http://localhost:4000');
var doc = $(document);
// custom marker's icon styles
var tinyIcon = L.Icon.extend({
options: {
iconSize: [25, 39],
iconAnchor: [12, 36],
shadowSize: [41, 41],
shadowAnchor: [12, 38],
popupAnchor: [0, -30]
}
});
var anyIcon = new tinyIcon({ iconUrl: "assets/img/icon.png" });
var sentData = {}
var connects = {};
var markers = {};
var active = false;
// for …我正在一张有两个要素图层的地图上工作。
var myFeatureGroup1 = L.featureGroup().addTo(map);
var myFeatureGroup2 = L.featureGroup().addTo(map);
我正在设定界限，例如：
map.fitBounds(myFeatureGroup1.getBounds());
map.fitBounds(myFeatureGroup2.getBounds());
但是出于明显的原因，myFeatureGroup2被设置为上界。这是使边界适合多个layerGroups的一种方法吗？像他们两个一样？有没有一种方法可以将它们合并到第三layerGroup中并适合其边界？
我正在AngularJS中构建一个应用程序,它使用LeafletJS与地图进行交互,提供在我称之为阶段的不同可能的交互.对于每个阶段,都有一个UIRouter状态,包括控制器和模板.
我目前正在通过服务提供传单功能.想法是该服务初始化Leaflet地图并提供对该州控制器的一些有限访问.因此,这些控制器将调用服务功能,例如setupMarkersInteractions设置回调,以便在地图上放置标记.
但是,我在通过Leaflet leaflet.map()函数初始化地图时遇到了一个问题,即:Error: Map container not found.这与Leaflet无法找到与地图相关联的HTML元素有关.
目前,我有点这样做:
function mapService() {
var map;
return {
initializeMap : initializeMap,
setupMarkersInteractions : setupMarkersInteractions
};
function initializeMap() {
map = leaflet.map('map');
}
function setupMarkersInteractions() {
map.on('click', markerPlacementCallback);
}
}
该initializeMap函数告诉leaflet.map我查找一个HTML元素id='map',该元素在状态模板上声明.
现在,对于实际问题,这是否与某种AngularJS服务无法访问HTML模板有关？我在这个问题上找不到任何东西,但我认为服务不能直接访问视图
是有意义的...... 如果是,我应该探索什么样的解决方法？我已经研究过leaflet-directive,但它似乎没有提供添加和删除自定义回调的可能性,我希望具有灵活性(例如,当我使用Leaflet-Freedraw添加免费绘制功能时,事情变得复杂).
我考虑leaflet.map直接使用HTMLElement元素的参数,但我仍然无法使它工作 - 虽然我有可能没有传递应该的东西.
我正在使用Leaflet.js在地图中显示geojson文件,我有以下代码:
// Set the map and the geojson as pointed in the tutorials
var geojsonLayer = new L.GeoJSON(null, {
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString, {
maxHeight: 200
});
}
}
});
map.addLayer(geojsonLayer);
L.control.layers({'Road': road_layer, 'Satellite': satellite_layer}, {'GeoJSON': geojsonLayer}).addTo(map);
//...
// Load file and get …在Leaflet Tutorials(http://leafletjs.com/examples/geojson/)中,他们展示了如何将标记或特征与弹出窗口相关联 - 它可以包含HTML代码.
我希望用户能够使用URL指定要加载的特定弹出窗口.在Leaflet Tutorial中,URL http://leafletjs.com/examples/geojson/example.html 加载地图和功能 - 但在用户单击功能之前,不会显示任何弹出窗口.
有没有办法将URL(例如)http://leafletjs.com/examples/geojson/example.html#Coors%40Field 与特定功能相关联 ,以便在用户指定URL时自动显示？
我已经制作了一张地图,无法tmap在一个闪亮的应用程序中使用leaflet.我大致有我想要的东西:一个基于SpatialPolygonsDataFrame的填充颜色的专题地图,当你点击地图时,弹出一个关于多边形的额外信息.我想在点击时更改弹出窗口以获得更好的布局.默认情况下,会显示数据集中的名称,但它实际上并不是用户友好的.
这是一个可重复的例子.
library(tmap)
library(leaflet)
data(Europe)
tmap_mode("view")
carte <- tm_shape(Europe) +
tm_borders(alpha = 0.5) +
tm_fill(col = "well_being",
id = "name",
popup.vars = c("life_exp","well_being"))
tmap_leaflet(carte)
我试图命名向量(popup.vars = c("Life Expectancy" = "life_exp", "Well being" = "well_being),但这不起作用.
我也尝试在调用时添加弹出窗口leaflet::addPolygons,但是我收到一条错误消息.
carte2 <- tm_shape(Europe) +
tm_borders(alpha = 0.5) +
tm_fill(col = "well_being")
nom <- Europe$name
tmap_leaflet(carte2) %>%
addPolygons(layerId = nom,
popup = paste0("<b>",~name,"</b><br/>Life Expectancy : ",
~life_exp," <br/>Well being : ", ~well_being))
derivePolygons(data,lng,lat,missing(lng),missing(lat),"addPolygons")出错:找不到多边形数据; 请为addPolygons提供数据和/或lng/lat参数
谢谢
我是一个Shiny App，我希望用户能够选择进入Awesome Marker的Font Awesome图标。
这是一个简单的应用程序，可让用户选择标记颜色，图标颜色和图标（名称）。
library(shiny)
library(leaflet)
icon_names <- c("home", "map-pin")
marker_colours <- list(Standard = c('red', 'orange', 'beige', 'green', 'blue', 'purple',
'pink', 'cadetblue', 'white', 'grey', 'black'),
Shades = c('darkred', 'lightred', 'darkgreen', 'lightgreen',
'darkblue', 'lightblue', 'darkpurple', 'lightgray'))
server <- function(input, output) {
output$map <- renderLeaflet({
icons <- awesomeIcons(
icon = input$icon,
iconColor = input$icon_colour,
library = 'fa',
markerColor = input$marker_colour
)
leaflet() %>%
addTiles() %>%
addAwesomeMarkers(lng = 4.9,
lat = 52.38,
icon = icons
)
})
}
ui <- fluidPage(
sidebarLayout( …我想知道传单地图的使用政策。Leaflet基于OSM，但是有关Leaflet使用策略的文档在Leaflet和OSM中均不清楚。谢谢您的帮助！