Leaflet集成Echarts示例_leaflet-echarts资源-CSDN下载

共6个文件

js：4个

css：1个

html：1个

Leaflet

echarts

5星 · 超过95%的资源需积分: 50 123 浏览量 2018-12-08 16:06:22 上传评论 3 收藏 663KB ZIP 举报

在IT行业中，地图可视化是数据分析和展示的重要组成部分。Leaflet.js是一个轻量级的JavaScript库，专门用于创建交互式地图，而Echarts是百度开发的一个强大的数据可视化库，广泛应用于Web应用中。当我们需要在地图上展示复杂的数据时，将Echarts与Leaflet结合使用是一个高效的方法。本资源提供了Leaflet集成Echarts的示例，帮助开发者实现地图上的数据可视化。让我们深入了解一下`Leaflet`。Leaflet是一个开源的JavaScript库，它提供了一种简单、直观的方式来创建交互式的二维地图。它的设计目标是保持轻便，易于学习和使用，同时支持各种功能，如缩放、平移、图层管理等。Leaflet 1.3.4版本是这个库的一个稳定版本，包含了丰富的API和插件生态系统，允许开发者定制各种地图功能。 `Echarts`是基于百度的图表库，它支持多种图表类型，如折线图、柱状图、饼图，以及地理图表等。Echarts 4.2.0版本引入了更多的特性，如动态数据更新、高性能的渲染和更好的可访问性。Echarts的强大之处在于它的灵活性和自定义性，可以方便地进行数据绑定和交互设计。将`Echarts`集成到`Leaflet`中，我们可以创建出具有地图背景的复杂数据可视化。这种集成通常是通过扩展Leaflet的图层类来实现的，这样Echarts图表就可以作为图层添加到Leaflet地图上。这个示例中可能包含了一个散点图（scatter plot）的demo，散点图是一种常用的数据可视化工具，可以用来表示两个变量之间的关系或分布情况。散点图在地图上的应用可能涉及到地理位置数据，比如显示城市的空气质量指数或者人口密度。每个点代表一个特定的地理位置，并且可以通过颜色、大小等视觉元素来表达数据值。通过Echarts的地理坐标系，这些点可以在地图上精确地定位和渲染。在提供的资源`leaflet.echarts`中，很可能包含了以下内容： 1. 修改后的Echarts源代码：可能对Echarts进行了定制，以适应在Leaflet地图上工作。 2. Leaflet源代码：可能是为了确保与Echarts集成的兼容性，提供了特定版本的Leaflet库。 3. 基于Leaflet扩展的代码：这部分代码是关键，它实现了Echarts和Leaflet之间的接口，允许在Leaflet地图上加载和操作Echarts图表。 4. 散点图demo：一个实际的应用示例，展示了如何使用上述代码在地图上创建散点图。这个资源为开发者提供了一个起点，帮助他们将Echarts的丰富可视化能力与Leaflet的地图功能相结合，从而实现更高级的数据可视化应用。通过学习和理解这个示例，开发者可以更好地理解和实践这两种库的集成，提升他们的地图数据可视化技能。

资源推荐

资源详情

资源评论

收起资源包目录

leaflet-echarts.zip （6个子文件）

leaflet.echarts

lib

echarts.js 2.72MB

leaflet

leaflet.css 13KB

leaflet.js 137KB

leaflet-src.js 217KB

leaflet-echarts.js 4KB

data

index05.html 16KB

<!DOCTYPE html> <html> <head> <title>Echarts+Leaflet火星</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="lib/leaflet/leaflet.css"> <style> html, body, #map { height: 100%; padding: 0; margin: 0; } </style> <script src="lib/leaflet/leaflet.js"></script>   <script src="lib/echarts.js"></script> <script src="lib/leaflet/leaflet-echarts.js"></script> </head> <body> <div id="map"></div> <script> var map = L.map('map'); L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map); map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点 //Echarts相关options配置 var geoCoordMap = { "海门":[121.15,31.89], "鄂尔多斯":[109.781327,39.608266], "招远":[120.38,37.35], "舟山":[122.207216,29.985295], "齐齐哈尔":[123.97,47.33], "盐城":[120.13,33.38], "赤峰":[118.87,42.28], "青岛":[120.33,36.07], "乳山":[121.52,36.89], "金昌":[102.188043,38.520089], "泉州":[118.58,24.93], "莱西":[120.53,36.86], "日照":[119.46,35.42], "胶南":[119.97,35.88], "南通":[121.05,32.08], "拉萨":[91.11,29.97], "云浮":[112.02,22.93], "梅州":[116.1,24.55], "文登":[122.05,37.2], "上海":[121.48,31.22], "攀枝花":[101.718637,26.582347], "威海":[122.1,37.5], "承德":[117.93,40.97], "厦门":[118.1,24.46], "汕尾":[115.375279,22.786211], "潮州":[116.63,23.68], "丹东":[124.37,40.13], "太仓":[121.1,31.45], "曲靖":[103.79,25.51], "烟台":[121.39,37.52], "福州":[119.3,26.08], "瓦房店":[121.979603,39.627114], "即墨":[120.45,36.38], "抚顺":[123.97,41.97], "玉溪":[102.52,24.35], "张家口":[114.87,40.82], "阳泉":[113.57,37.85], "莱州":[119.942327,37.177017], "湖州":[120.1,30.86], "汕头":[116.69,23.39], "昆山":[120.95,31.39], "宁波":[121.56,29.86], "湛江":[110.359377,21.270708], "揭阳":[116.35,23.55], "荣成":[122.41,37.16], "连云港":[119.16,34.59], "葫芦岛":[120.836932,40.711052], "常熟":[120.74,31.64], "东莞":[113.75,23.04], "河源":[114.68,23.73], "淮安":[119.15,33.5], "泰州":[119.9,32.49], "南宁":[108.33,22.84], "营口":[122.18,40.65], "惠州":[114.4,23.09], "江阴":[120.26,31.91], "蓬莱":[120.75,37.8], "韶关":[113.62,24.84], "嘉峪关":[98.289152,39.77313], "广州":[113.23,23.16], "延安":[109.47,36.6], "太原":[112.53,37.87], "清远":[113.01,23.7], "中山":[113.38,22.52], "昆明":[102.73,25.04], "寿光":[118.73,36.86], "盘锦":[122.070714,41.119997], "长治":[113.08,36.18], "深圳":[114.07,22.62], "珠海":[113.52,22.3], "宿迁":[118.3,33.96], "咸阳":[108.72,34.36], "铜川":[109.11,35.09], "平度":[119.97,36.77], "佛山":[113.11,23.05], "海口":[110.35,20.02], "江门":[113.06,22.61], "章丘":[117.53,36.72], "肇庆":[112.44,23.05], "大连":[121.62,38.92], "临汾":[111.5,36.08], "吴江":[120.63,31.16], "石嘴山":[106.39,39.04], "沈阳":[123.38,41.8], "苏州":[120.62,31.32], "茂名":[110.88,21.68], "嘉兴":[120.76,30.77], "长春":[125.35,43.88], "胶州":[120.03336,36.264622], "银川":[106.27,38.47], "张家港":[120.555821,31.875428], "三门峡":[111.19,34.76], "锦州":[121.15,41.13], "南昌":[115.89,28.68], "柳州":[109.4,24.33], "三亚":[109.511909,18.252847], "自贡":[104.778442,29.33903], "吉林":[126.57,43.87], "阳江":[111.95,21.85], "泸州":[105.39,28.91], "西宁":[101.74,36.56], "宜宾":[104.56,29.77], "呼和浩特":[111.65,40.82], "成都":[104.06,30.67], "大同":[113.3,40.12], "镇江":[119.44,32.2], "桂林":[110.28,25.29], "张家界":[110.479191,29.117096], "宜兴":[119.82,31.36], "北海":[109.12,21.49], "西安":[108.95,34.27], "金坛":[119.56,31.74], "东营":[118.49,37.46], "牡丹江":[129.58,44.6], "遵义":[106.9,27.7], "绍兴":[120.58,30.01], "扬州":[119.42,32.39], "常州":[119.95,31.79], "潍坊":[119.1,36.62], "重庆":[106.54,29.59], "台州":[121.420757,28.656386], "南京":[118.78,32.04], "滨州":[118.03,37.36], "贵阳":[106.71,26.57], "无锡":[120.29,31.59], "本溪":[123.73,41.3], "克拉玛依":[84.77,45.59], "渭南":[109.5,34.52], "马鞍山":[118.48,31.56], "宝鸡":[107.15,34.38], "焦作":[113.21,35.24], "句容":[119.16,31.95], "北京":[116.46,39.92], "徐州":[117.2,34.26], "衡水":[115.72,37.72], "包头":[110,40.58], "绵阳":[104.73,31.48], "乌鲁木齐":[87.68,43.77], "枣庄":[117.57,34.86], "杭州":[120.19,30.26], "淄博":[118.05,36.78], "鞍山":[122.85,41.12], "溧阳":[119.48,31.43], "库尔勒":[86.06,41.68], "安阳":[114.35,36.1], "开封":[114.35,34.79], "济南":[117,36.65], "德阳":[104.37,31.13], "温州":[120.65,28.01], "九江":[115.97,29.71], "邯郸":[114.47,36.6], "临安":[119.72,30.23], "兰州":[103.73,36.03], "沧州":[116.83,38.33], "临沂":[118.35,35.05], "南充":[106.110698,30.837793], "天津":[117.2,39.13], "富阳":[119.95,30.07], "泰安":[117.13,36.18], "诸暨":[120.23,29.71], "郑州":[113.65,34.76], "哈尔滨":[126.63,45.75], "聊城":[115.97,36.45], "芜湖":[118.38,31.33], "唐山":[118.02,39.63], "平顶山":[113.29,33.75], "邢台":[114.48,37.05], "德州":[116.29,37.45], "济宁":[116.59,35.38], "荆州":[112.239741,30.335165], "宜昌":[111.3,30.7], "义乌":[120.06,29.32], "丽水":[119.92,28.45], "洛阳":[112.44,34.7], "秦皇岛":[119.57,39.95], "株洲":[113.16,27.83], "石家庄":[114.48,38.03], "莱芜":[117.67,36.19], "常德":[111.69,29.05], "保定":[115.48,38.85], "湘潭":[112.91,27.87], "金华":[119.64,29.12], "岳阳":[113.09,29.37], "长沙":[113,28.21], "衢州":[118.88,28.97], "廊坊":[116.7,39.53], "菏泽":[115.480656,35.23375], "合肥":[117.27,31.86], "武汉":[114.31,30.52], "大庆":[125.03,46.58] }; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var option = { //backgroundColor: '#404a59', title: { text: '全国主要城市空气质量', subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', x:'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ' : ' + params.value[2]; } }, legend: { orient: 'vertical', y: 'bottom', x:'right', data:['pm2.5'], textStyle: { color: '#fff' } }, visualMap: { min: 0, max: 200, calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, textStyle: { color: '#fff' } }, geo: { //map: 'china',

评论收藏

内容反馈