leaflet+D3

前言：

虽然Leaflet提供了强大的画图工具，不过它的速度不是很尽人意，当数据量较大的时候，需要较长的渲染时间，交互好感度会降低。因此我们可以考虑使用D3，在leaflet的地图上蒙上一个svg，在svg上画图会加快一些速度，获得更好的交互体验。

D3官网上有Leaflet+D3的相关介绍https://bost.ocks.org/mike/leaflet/

效果图如下：

实现效果代码：

<!DOCTYPE html>
<html><head><script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no""><link rel=" stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="crossorigin="" /><script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="crossorigin=""></script><style>body {padding: 0;margin: 0;}html,body,#mapid {height: 100%;width: 100%;}</style></head><body><script src="http://d3js.org/d3.v3.min.js"></script><div id="mapid"></div><script>var mymap = L.map('mapid').setView([30.555684, 114.295488], 12);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {maxZoom: 18,id: 'mapbox.streets'}).addTo(mymap);//加载SVG//The data for our linevar lines = new Array();var circleData = [{"lat": "30.653658","lng": "114.296638"},{"lat": "30.529309","lng": "114.428294"},{"lat": "30.520847","lng": "114.171307"},{"lat": "30.475042","lng": "114.306412"},{"lat": "30.596726","lng": "114.546726"},{"lat": "30.618608","lng": "114.428294"},{"lat": "30.624575","lng": "114.258119"},{"lat": "30.777598","lng": "114.219025"},{"lat": "30.512509","lng": "114.405872"},{"lat": "30.560225","lng": "114.347626"}];//加载SVGvar svg = d3.select(mymap.getPanes().overlayPane).append("svg").attr("class", "leaflet-zoom-hide"),g = svg.append("g");var jsonCircles = new Array();function drawCircle() {circleData.forEach(function(d) {console.log(d);jsonCircles.push({"x_axis": d.lat,"y_axis": d.lng,"radius": 12,"color": "green"});});console.log("drawCircle");console.log(jsonCircles);var t = svg.selectAll("circle").data(jsonCircles);var circleAttributes =t.enter().append("circle").attr("cx", function(d) {console.log(mymap.latLngToLayerPoint(L.latLng(d.x_axis, d.y_axis)));return mymap.latLngToLayerPoint(L.latLng(d.x_axis, d.y_axis)).x;}).attr("cy", function(d) {return mymap.latLngToLayerPoint(L.latLng(d.x_axis, d.y_axis)).y;}).attr("r", function(d) {return d.radius;}).style("fill", function(d) {return d.color;});}//调整圆的大小，在onMapZoom中调用function adjustCircle() {console.log("draw");d3.selectAll("circle").attr('cx', o => mymap.latLngToLayerPoint([o.x_axis, o.y_axis]).x).attr('cy', o => mymap.latLngToLayerPoint([o.x_axis, o.y_axis]).y);}//鼠标缩放操作function onMapZoom() {//adjustSVG();adjustCircle();}function initial() {svg.attr("width", 1500).attr("height", 800);drawCircle();}//初始化画图的函数initial();//事件响应mymap.on('zoom', onMapZoom);</script></body>
</html>

leaflet+D3相关推荐

1897个D3 例子
1.113th U.S. Congressional Districts 2.The Story of the Season 3.20000 points in random motion ...
leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
Leaflet渲染TopoJSON数据demo
非常简单,就是做一下topoJSON数据的渲染,用的是leaflet. 代码如下: Html: <html><head><title>leaflet TopoJSO ...
从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探与我的计划书
缘起哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...
【D3】transition API
摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
交互式数据可视化－D3.js（一）
在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics),是用于描述二维矢量图形的一种图形格式,是由W3C制订的开放标准.SVG使用XM ...
gatsby_如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序
gatsby Get ready for the summer by building your own road trip mapping app with this step-by-step gu ...
r语言编辑 d3.js_d3.js的语言介绍
r语言编辑 d3.js by Matt Oxley 由马特·奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一 ...

leaflet+D3

前言：

效果图如下：

实现效果代码：

leaflet+D3相关推荐

最新文章

热门文章