leaflet篇目录（leaflet实战、leaflet示例、leaflet Demo）

地图之家总目录（建议先查看该内容）

1.（leaflet篇）leaflet接入天地图

2.（leaflet篇）leaflet接入百度地图

3.（leaflet篇）leaflet接入高德、openstreetmap、google地图

4.（leaflet篇）leaflet接入腾讯矢量、腾讯影像地图

5.（leaflet篇）leaflet点采集与点编辑

6.（leaflet篇）leaflet线采集与线编辑

7.（leaflet篇）leaflet面采集与面编辑

8.（leaflet篇）leaflet圆采集与圆编辑

9.（leaflet篇）leaflet矩形采集与矩形编辑

10.（leaflet篇）leaflet暗色系地图样式地图（滤镜实现，反色滤镜）

11.（leaflet篇）leaflet聚合图

12.（leaflet篇）leaflet叠加热力图

13.（leaflet篇）leaflet散点图

14.（leaflet篇）leaflet波纹点

15.（leaflet篇）leaflet蜂巢图

16.（leaflet篇）leaflet动态热力图

17.（leaflet篇）leaflet动态热力图（大数据版）

18.（leaflet篇）leaflet自定义地图样式地图（插件实现)

19.（leaflet篇）leaflet聚合图（大数据版）

20.（leaflet篇）leaflet图标闪烁

21.（leaflet篇）leaflet监听地图（移动一段距离后发起请求）

22.（leaflet篇）leaflet区域聚合点（点击后散开并进行合理定位）

23.（leaflet篇）leaflet叠加html（leaflet叠加div元素）

24.（leaflet篇）leaflet接入天地图（经纬度投影256）

25.（leaflet篇）leaflet删除所有图层（不含地图）

26.（leaflet篇）leaflet聚合图（自定义样式版）

数据分析之大数据可视化之初级篇--零编程工具

Tableau

Tableau 是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形，表格和地图。 它不仅提供了PC桌面版，还提供了服务器解决方案，可以在线生成可视化报告。服务器解决方案可以提供了云托管服务。

Infogram

Infogram的最大优势在于，让可视化信息图表与实时大数据相链接。只须三个简单步骤，可以选择在众多图表，地图，甚至是视频可视化模板中进行选择，支持团队账号。

ChartBlocks

ChartBlocks是一个易于使用在线工具，它无需编码，便能从电子表格，数据库中构建可视化图表。整个过程可以在图表向导的指导下完成。图表是响应式的，并且可以和任何的屏幕尺寸及设备兼容。

Datawrapper

Datawrapper是一款专注于新闻和出版的可视化工具。 Datawrapper非常容易使用，不需要任何编程基础。你只需要上传你的数据，便能轻松地创建和发布图表，甚至是地图。Datawrapper提供了 众多的自定义布局及地图模板。

Plotly

Plotly帮助你在短短几分钟内，从简单的电子表格中开始创建漂亮的图表。如果希望为JavaScript和Python等编程语言提供一个API接口的 话，Plotly是一款非常人性化的工具。

RAW

RAW弥补了很多工具在电子表格和矢量图形(SVG)之间的缺失环节。你的大数据可以来自MicrosoftExcel中，谷歌文档或是一个简单的逗号分 隔的列表。它最厉害的功能是可以很容易地导出可视化结果，因为它和Adobe Illustrator，Sketch 和Inkscape是相容的。

Visual.ly

Visual.ly是一个可视化的内容服务。它提供专门的大数据可视化的服务。如果你想完 全外包可视化文件给第三方。你可以使用非常简化的在线流程：你只需描述你的项目，服务团队将在项目的整个持续时间内和你在一起。

数据可视化之开发展篇--JavaScript库

D3.js

D3.js是最好的数据可视化工具库。D3.js运行在JavaScript上，并使用HTML，CSS和SVG。 D3.js是开源工具，使用数据驱动的方式创建漂亮的网页。 D3.js可实现实时交互。这个库非常强大和前沿，所以它带有没有预置图表也不支持IE9。

Ember Charts

Ember Charts – 顾名思义是一种基于Ember.js框架和使用d3.js的可视化工具。Ember Charts以绘制时间序列图，柱状图，饼图和散点图为主。它非常优易于扩展，有极强的错误处理能力，当你遇到坏数据时，系统也不会崩溃。

NVD3

NVD3运行在d3.js之上, 它可建立可重用的图表组件。该项目的目标是保持所有的图表整洁和可定制性。 NVD3是d3.js之上的简单的接口，保持了d3.js的所有强大功能。 NVD3由Novus Partners前端工程师开发和使其保持了图表技术洞察力。

Google Charts

Google Charts 以HTML5和SVG为基础，充分考虑了跨浏览器的兼容性，并通过VML支持旧版本的IE浏览器。所有您将创建的图表是交互式的，有的还可缩放。 Google Charts非常人性化，有全面的模板库，你可以从中找到所需模板。

FusionCharts

FusionCharts是最全面的JavaScript图表库，包括90个图表和900种地图。FusionCharts可以轻松集成像jQuery库，Angularjs和React框架以及ASP.NET和PHP语言。 FusionCharts支持JSON和XML数据，并提供许多格式图表：PNG，JPEG，SVG和PDF。

Highcharts

Highcharts是一个JavaScript API与jQuery的集成，全球最大的100家公司中有61家正在使用它。图表使用SVG格式，并使用VML支持旧版浏览器。它提供了两个专门的图表类 型：Highstock和Highmaps，并且还配备了一系列的插件。

Chart.js 

对于一个小项目的图表，chart.js是一个很好的选择。开源，只有11KB大小，这使得它快速且易于使用，它支持多种图表类型: 饼图，线性图和雷达图等。

Leaflet

Leafleft 基于Open Street Map数据，使用HTML5 / CSS3绘制互动式可视化图。可以使用他们的扩展插件库添加热点图(heatmaps)和动画标记。 Leaflet 是开源和只有33 KB大小。

Chartist.js

Chartist.js的开发社区一直致力于打败所有其他JavaScript图表库。它使用了Sass的个性化风格，它的SVG输出是响应式的。

N3-charts

N3-charts是一种基于AngularJS框架的工具。它建立在D3.js之上，帮助您创建简单的互动图表。 N3-charts是一种小型化的图表工具，不适用于大型项目。

Sigma JS

Sigma JS 是交互式可视化工具库。由于使用了WebGL技术，可以使用鼠标和触摸的方式来更新和变换图表，同时支持JSON和GEXF两种数据格式。这为它提供了大量的可用互动式插件。Sigma JS 专注于网页格式的网络图可视化，在大数据网络可视化中非常有用。

Polymaps

Polymaps是一款地图可视化一个JavaScript工具库。 Polymaps使用SVG实现从国家到街道一级地理数据的可视化。可以使用CSS格式来修改你的样式。它是创建heatmap热点图的最好的工具之一，创建的所有地图都可以变成动态图。

Processing.js

Processing.js是一个基于可视化编程语言的JavaScript库。作为一种面向Web的JavaScript 库，Processing.js是能够有效进行网页格式图表处理。这使得它成为了一种非常好交换式可视化工具。 Processing.js需要一个兼容HTML5的浏览器来实现这一功能。

首先引入leaflet相关js和css

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

然后构建地图，并添加openStreetMap

// create a map in the "map" div, set the view to a given place and zoom

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

// add an OpenStreetMap tile layer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map)

// add a marker in the given location, attach some popup content to it and open the popup

L.marker([51.5, -0.09]).addTo(map)

.bindPopup('A pretty CSS3 popup.

Easily customizable.')

.openPopup()

运行效果如下：

结合Qunee拓扑图

Leaflet地图上可以添加点线面基本图形，如果需要展示更复杂的图形或者链接关系，显得力不足，可以结合Qunee组件使用，下面我们让地图和拓扑图叠加起来，在地图上显示拓扑元素，并整合两者的交互

图层叠加

在地图的DIV容器中添加一个孩子div，作为拓扑图的画布，并设置相应的css，然后调用超类的构造函数，取消默认的双击和滚轮 *** 作，已被后面地图与拓扑图的交互同步var MapGraph = function (map) {

var container = map._container

var canvas = document.createElement("div")

canvas.style.width = "100%"

canvas.style.height = "100%"

container.appendChild(canvas)

Q.doSuperConstructor(this, MapGraph, [canvas])

this.enableWheelZoom = false

this.enableDoubleClickToOverview = false

this.originAtCenter = false

this.setMap(map)

...

}

关联地图

下面实现拓扑图与地图的绑定，在#setMap(map)函数中，监听了地图的zoomstart和zoomend事件，根据经纬度动态的调整图元的屏幕位置，同样在节点被拖动后，也需要设置新的经纬度MapGraph.prototype = {

map: null,

mapShowing: true,

enableInertia: false,

createNodeByLonLat: function (name, lon, lat) {

var l = this.toLonLat(lon, lat)

var p = this.getPixelFromLonLat(l)

var node = graph.createNode(name, p.x, p.y)

node.lonLat = l

return node

},

toLonLat: function (lon, lat) {

return new L.latLng(lat, lon)

},

getPixelFromLonLat: function (lonLat) {

return this.map.latLngToContainerPoint(lonLat, this.map._zoom)

},

getLonLatFromPixel: function (x, y) {

return this.map.containerPointToLatLng([x, y])

},

setMap: function (map) {

this.map = map

this.map.on("zoomstart", this.hideGraph, this)

this.map.on("zoomend", this.updateNodes, this)

this.html.ondblclick = createEventFunction(this, function (evt) {

if (this.getElementByMouseEvent(evt)) {

Q.stopEvent(evt)

}

})

this.interactionDispatcher.addListener(function (evt) {

if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {

var datas = evt.datas

Q.forEach(datas, function (data) {

var pixel = this.toCanvas(data.location.x, data.location.y)

data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y)

}, this)

}

}, this)

},

hideGraph: function(){

this.html.style.visibility = "hidden"

},

showGraph: function(){

this.html.style.visibility = ""

},

translate: function (tx, ty) {

Q.doSuper(this, MapGraph, "translate", arguments)

this.map.panBy([-tx, -ty], {animate: false})

},

resetVisibility: function () {

this.forEach(function (e) {

if (e.invalidateVisibility) {

e.invalidateVisibility(true)

}

})

},

updateNodes: function () {

this.translateTo(0, 0, 1, true)

this.resetVisibility()

this.forEach(function (d) {

if (d instanceof Q.Node) {

var l = d.lonLat

var p = this.getPixelFromLonLat(l)

d.location = p

}

}, this)

this.showGraph()

}

}

Q.extend(MapGraph, Q.Graph)

此外还可以通过可见过滤器实现，不同比例尺显示不同的节点

---