标签: leaflet

在Leaflet的"覆盖窗格"上添加一个新的SVG元素,如Bostock所示:http://bost.ocks.org/mike/leaflet/
实现一个自定义矢量切片图层,该图层挂钩到Leaflets本机切片层生态系统,如Nelson Minar所示:http://bl.ocks.org/NelsonMinar/5624141

第一种方法通过附加传单类来避免Leaflets基于缩放的缩放,以便在缩放发生时隐藏任何d3元素.当缩放动画结束时,重新计算元素坐标并重新绘制,然后删除隐藏类以再次暴露元素.这有效,但与Leaflet的原生GeoJSON图层相比,放大/缩小的体验不那么干净,因为后者支持动画缩放.

第二种方法不包含任何特定于实现的代码来解决缩放行为,但无论如何都以某种方式工作!d3元素在动画缩放期间缩放,然后用下一个缩放级别向量整齐地替换.

我想要实现的是两者的结合.我想绘制基于Geo/TopoJSON的非基于图块的矢量,这些矢量在放大/缩小期间被动画化.我已经摆弄了使用不同的传单css类,不同的事件钩子,以及以多种方式附加和/或重用SVG元素,但还没有实现类似于使用Leaflet的原生GeoJSON向量时所经历的行为的行为层.我不想使用本机层的原因是我想要使用大量其他d3功能,而不是Leaflet实现的一部分.

问题:使用非基于图块的向量组合Leaflet和d3时,是否有人实现了动画缩放？如果是这样 - 怎么样？

d3.js leaflet

ave*_*ras

lucky-day

20
推荐指数

1
解决办法

8144
查看次数

传单地图显示灰色

我正在使用快速入门启动leaflet.js,但我的地图显示为灰色...是否有我遗漏的东西？

的script.js:

var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

Run Code Online (Sandbox Code Playgroud)

style.css中:

#leafletMap {
height: 200px;
width: 200px;
}

Run Code Online (Sandbox Code Playgroud)

index.html的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script> …

Run Code Online (Sandbox Code Playgroud)

javascript openstreetmap leaflet

Con*_*ech

2014 01-29

20
推荐指数

3
解决办法

2万
查看次数

Leaflet Awesome-Markers(添加数字)

我现在用的是Leaflet.Awesome标志物与插件LeafletJS.

我已经正确实现了它,但是现在我希望能够使用0到9之间的数字来表示标记.

这是一个JS Fiddle实现,用于展示插件的行为方式.

http://jsfiddle.net/fulvio/VPzu4/200/

该插件允许使用字体 - 真棒图标和字形图标(当然,不提供任何0 - 9数字作为图标.唉!)

文档提到了使用的能力extraClasses,我想知道是否有人能指出我正确的方向,如何利用这个来显示数字而不是图标或是否只是另一种方法来实现这一点.

在此先感谢您的帮助.

更新:

感谢@Can的评论.

awesome-markers的作者得到了另一棵树,在那里他准确地添加了你正在寻找的数字/字母的真棒标记,一定要抓住未经证实的JS.

javascript dictionary markers leaflet font-awesome

fuz*_*uzz

2015 06-29

20
推荐指数

3
解决办法

2万
查看次数

如何保存已完成的多边形指向leaflet.draw到mysql表

我想使用leaflet.draw来创建区域的轮廓.我设法让这个工作正常:https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

现在我想将每个多边形的数据保存到mysql表中.我有点坚持我将如何导出数据和我应该做的格式.

如果可能的话,我希望将来将数据拉回到地图框/传单地图中,所以猜想像geojson这样的东西会很好.

mysql leaflet mapbox

use*_*511

2014 11-22

20
推荐指数

2
解决办法

2万
查看次数

如何在传单中的dragend事件后获取latlng？

我正在尝试在移动标记后更新标记的lat/lng值.提供的示例使用弹出窗口显示lat/lng.

我有一个标记的"dragend"事件监听器,但当我提醒e.latlng的值时,它返回undefined.

JavaScript的:

function markerDrag(e){
    alert("You dragged to: " + e.latlng);
}

function initialize() {
    // Initialize the map
    var map = L.map('map').setView([38.487, -75.641], 8);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);

    // Event Handlers
    map.on('click', function(e){
        var marker = new L.Marker(e.latlng, {draggable:true});
        marker.bindPopup("<strong>"+e.latlng+"</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
}


$(document).ready(initialize());

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/rhewitt/Msrpq/4/

event-handling leaflet

Roy*_*Roy

2013 08-22

19
推荐指数

4
解决办法

2万
查看次数