chinadci / leaflet-echart · 提交

提交 3e3e4073de65325692466dfe00816be8235bb53d

作者 HT 黄涛
0 个父辈

init commit

内嵌 并排对比
正在显示 9 个修改的文件 包含 884 行增加 和 0 行删除
  1 +{
  2 + "directory": "libs"
  3 +}
  1 +# Logs
  2 +logs
  3 +*.log
  4 +
  5 +# Dependency directory
  6 +node_modules
  7 +libs
  1 +{
  2 + "version": "0.2.0",
  3 + "configurations": [
  4 + {
  5 + "name": "启动",
  6 + "type": "node",
  7 + "request": "launch",
  8 + "program": "${workspaceRoot}/app.js",
  9 + "stopOnEntry": false,
  10 + "args": [],
  11 + "cwd": "${workspaceRoot}",
  12 + "preLaunchTask": null,
  13 + "runtimeExecutable": null,
  14 + "runtimeArgs": [
  15 + "--nolazy"
  16 + ],
  17 + "env": {
  18 + "NODE_ENV": "development"
  19 + },
  20 + "externalConsole": false,
  21 + "sourceMaps": false,
  22 + "outDir": null
  23 + },
  24 + {
  25 + "name": "附加",
  26 + "type": "node",
  27 + "request": "attach",
  28 + "port": 5858,
  29 + "address": "localhost",
  30 + "restart": false,
  31 + "sourceMaps": false,
  32 + "outDir": null,
  33 + "localRoot": "${workspaceRoot}",
  34 + "remoteRoot": null
  35 + },
  36 + {
  37 + "name": "Attach to Process",
  38 + "type": "node",
  39 + "request": "attach",
  40 + "processId": "${command.PickProcess}",
  41 + "port": 5858,
  42 + "sourceMaps": false,
  43 + "outDir": null
  44 + }
  45 + ]
  46 +}
  1 +{
  2 + "name": "webapplication",
  3 + "private": true,
  4 + "dependencies": {
  5 + "bootstrap": "3.3.6",
  6 + "jquery": "2.2.3",
  7 + "leaflet": "0.7.7",
  8 + "echarts": "3.2.2"
  9 + }
  10 +}
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Leaflet 加载 Echarts3</title>
  6 + <link rel="stylesheet" href="../libs/leaflet/dist/leaflet.css">
  7 + <style>
  8 + html, body, #map {
  9 + height: 100%;
  10 + padding: 0;
  11 + margin: 0;
  12 + }
  13 + </style>
  14 +</head>
  15 +<body>
  16 +<div id="map"></div>
  17 +
  18 +<script src="../libs/echarts/dist/echarts.min.js"></script>
  19 +<script src="../libs/leaflet/dist/leaflet.js"></script>
  20 +<script src="../libs/jquery/dist/jquery.min.js"></script>
  21 +<script src="../src/leaflet-echarts3.js"></script>
  22 +<script>
  23 + var map = LeafletEcharts.initMap('map');
  24 + var baseLayers = {
  25 + "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
  26 + subdomains: "1234"
  27 + }),
  28 + '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
  29 + subdomains: "1234"
  30 + }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
  31 + subdomains: "1234"
  32 + })]),
  33 + "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
  34 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  35 + key: 'BC9A493B41014CAABB98F0471D759707',
  36 + styleId: 22677
  37 + }),
  38 + "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  39 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  40 + key: 'BC9A493B41014CAABB98F0471D759707',
  41 + styleId: 22677
  42 + }),
  43 + 'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
  44 + };
  45 + L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  46 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  47 + key: 'BC9A493B41014CAABB98F0471D759707',
  48 + styleId: 22677
  49 + });
  50 + var layercontrol = L.control.layers(baseLayers,{}, {
  51 + position: "topleft"
  52 + }).addTo(map);
  53 + map.setView(L.latLng(37.550339, 104.114129), 4);
  54 +
  55 + var myChart = LeafletEcharts.getEcharts();
  56 +
  57 + var data = [
  58 + {name: '海门', value: 9},
  59 + {name: '鄂尔多斯', value: 12},
  60 + {name: '招远', value: 12},
  61 + {name: '舟山', value: 12},
  62 + {name: '齐齐哈尔', value: 14},
  63 + {name: '盐城', value: 15},
  64 + {name: '赤峰', value: 16},
  65 + {name: '青岛', value: 18},
  66 + {name: '乳山', value: 18},
  67 + {name: '金昌', value: 19},
  68 + {name: '泉州', value: 21},
  69 + {name: '莱西', value: 21},
  70 + {name: '日照', value: 21},
  71 + {name: '胶南', value: 22},
  72 + {name: '南通', value: 23},
  73 + {name: '拉萨', value: 24},
  74 + {name: '云浮', value: 24},
  75 + {name: '梅州', value: 25},
  76 + {name: '文登', value: 25},
  77 + {name: '上海', value: 25},
  78 + {name: '攀枝花', value: 25},
  79 + {name: '威海', value: 25},
  80 + {name: '承德', value: 25},
  81 + {name: '厦门', value: 26},
  82 + {name: '汕尾', value: 26},
  83 + {name: '潮州', value: 26},
  84 + {name: '丹东', value: 27},
  85 + {name: '太仓', value: 27},
  86 + {name: '曲靖', value: 27},
  87 + {name: '烟台', value: 28},
  88 + {name: '福州', value: 29},
  89 + {name: '瓦房店', value: 30},
  90 + {name: '即墨', value: 30},
  91 + {name: '抚顺', value: 31},
  92 + {name: '玉溪', value: 31},
  93 + {name: '张家口', value: 31},
  94 + {name: '阳泉', value: 31},
  95 + {name: '莱州', value: 32},
  96 + {name: '湖州', value: 32},
  97 + {name: '汕头', value: 32},
  98 + {name: '昆山', value: 33},
  99 + {name: '宁波', value: 33},
  100 + {name: '湛江', value: 33},
  101 + {name: '揭阳', value: 34},
  102 + {name: '荣成', value: 34},
  103 + {name: '连云港', value: 35},
  104 + {name: '葫芦岛', value: 35},
  105 + {name: '常熟', value: 36},
  106 + {name: '东莞', value: 36},
  107 + {name: '河源', value: 36},
  108 + {name: '淮安', value: 36},
  109 + {name: '泰州', value: 36},
  110 + {name: '南宁', value: 37},
  111 + {name: '营口', value: 37},
  112 + {name: '惠州', value: 37},
  113 + {name: '江阴', value: 37},
  114 + {name: '蓬莱', value: 37},
  115 + {name: '韶关', value: 38},
  116 + {name: '嘉峪关', value: 38},
  117 + {name: '广州', value: 38},
  118 + {name: '延安', value: 38},
  119 + {name: '太原', value: 39},
  120 + {name: '清远', value: 39},
  121 + {name: '中山', value: 39},
  122 + {name: '昆明', value: 39},
  123 + {name: '寿光', value: 40},
  124 + {name: '盘锦', value: 40},
  125 + {name: '长治', value: 41},
  126 + {name: '深圳', value: 41},
  127 + {name: '珠海', value: 42},
  128 + {name: '宿迁', value: 43},
  129 + {name: '咸阳', value: 43},
  130 + {name: '铜川', value: 44},
  131 + {name: '平度', value: 44},
  132 + {name: '佛山', value: 44},
  133 + {name: '海口', value: 44},
  134 + {name: '江门', value: 45},
  135 + {name: '章丘', value: 45},
  136 + {name: '肇庆', value: 46},
  137 + {name: '大连', value: 47},
  138 + {name: '临汾', value: 47},
  139 + {name: '吴江', value: 47},
  140 + {name: '石嘴山', value: 49},
  141 + {name: '沈阳', value: 50},
  142 + {name: '苏州', value: 50},
  143 + {name: '茂名', value: 50},
  144 + {name: '嘉兴', value: 51},
  145 + {name: '长春', value: 51},
  146 + {name: '胶州', value: 52},
  147 + {name: '银川', value: 52},
  148 + {name: '张家港', value: 52},
  149 + {name: '三门峡', value: 53},
  150 + {name: '锦州', value: 54},
  151 + {name: '南昌', value: 54},
  152 + {name: '柳州', value: 54},
  153 + {name: '三亚', value: 54},
  154 + {name: '自贡', value: 56},
  155 + {name: '吉林', value: 56},
  156 + {name: '阳江', value: 57},
  157 + {name: '泸州', value: 57},
  158 + {name: '西宁', value: 57},
  159 + {name: '宜宾', value: 58},
  160 + {name: '呼和浩特', value: 58},
  161 + {name: '成都', value: 58},
  162 + {name: '大同', value: 58},
  163 + {name: '镇江', value: 59},
  164 + {name: '桂林', value: 59},
  165 + {name: '张家界', value: 59},
  166 + {name: '宜兴', value: 59},
  167 + {name: '北海', value: 60},
  168 + {name: '西安', value: 61},
  169 + {name: '金坛', value: 62},
  170 + {name: '东营', value: 62},
  171 + {name: '牡丹江', value: 63},
  172 + {name: '遵义', value: 63},
  173 + {name: '绍兴', value: 63},
  174 + {name: '扬州', value: 64},
  175 + {name: '常州', value: 64},
  176 + {name: '潍坊', value: 65},
  177 + {name: '重庆', value: 66},
  178 + {name: '台州', value: 67},
  179 + {name: '南京', value: 67},
  180 + {name: '滨州', value: 70},
  181 + {name: '贵阳', value: 71},
  182 + {name: '无锡', value: 71},
  183 + {name: '本溪', value: 71},
  184 + {name: '克拉玛依', value: 72},
  185 + {name: '渭南', value: 72},
  186 + {name: '马鞍山', value: 72},
  187 + {name: '宝鸡', value: 72},
  188 + {name: '焦作', value: 75},
  189 + {name: '句容', value: 75},
  190 + {name: '北京', value: 79},
  191 + {name: '徐州', value: 79},
  192 + {name: '衡水', value: 80},
  193 + {name: '包头', value: 80},
  194 + {name: '绵阳', value: 80},
  195 + {name: '乌鲁木齐', value: 84},
  196 + {name: '枣庄', value: 84},
  197 + {name: '杭州', value: 84},
  198 + {name: '淄博', value: 85},
  199 + {name: '鞍山', value: 86},
  200 + {name: '溧阳', value: 86},
  201 + {name: '库尔勒', value: 86},
  202 + {name: '安阳', value: 90},
  203 + {name: '开封', value: 90},
  204 + {name: '济南', value: 92},
  205 + {name: '德阳', value: 93},
  206 + {name: '温州', value: 95},
  207 + {name: '九江', value: 96},
  208 + {name: '邯郸', value: 98},
  209 + {name: '临安', value: 99},
  210 + {name: '兰州', value: 99},
  211 + {name: '沧州', value: 100},
  212 + {name: '临沂', value: 103},
  213 + {name: '南充', value: 104},
  214 + {name: '天津', value: 105},
  215 + {name: '富阳', value: 106},
  216 + {name: '泰安', value: 112},
  217 + {name: '诸暨', value: 112},
  218 + {name: '郑州', value: 113},
  219 + {name: '哈尔滨', value: 114},
  220 + {name: '聊城', value: 116},
  221 + {name: '芜湖', value: 117},
  222 + {name: '唐山', value: 119},
  223 + {name: '平顶山', value: 119},
  224 + {name: '邢台', value: 119},
  225 + {name: '德州', value: 120},
  226 + {name: '济宁', value: 120},
  227 + {name: '荆州', value: 127},
  228 + {name: '宜昌', value: 130},
  229 + {name: '义乌', value: 132},
  230 + {name: '丽水', value: 133},
  231 + {name: '洛阳', value: 134},
  232 + {name: '秦皇岛', value: 136},
  233 + {name: '株洲', value: 143},
  234 + {name: '石家庄', value: 147},
  235 + {name: '莱芜', value: 148},
  236 + {name: '常德', value: 152},
  237 + {name: '保定', value: 153},
  238 + {name: '湘潭', value: 154},
  239 + {name: '金华', value: 157},
  240 + {name: '岳阳', value: 169},
  241 + {name: '长沙', value: 175},
  242 + {name: '衢州', value: 177},
  243 + {name: '廊坊', value: 193},
  244 + {name: '菏泽', value: 194},
  245 + {name: '合肥', value: 229},
  246 + {name: '武汉', value: 273},
  247 + {name: '大庆', value: 279}
  248 +];
  249 +var geoCoordMap = {
  250 + '海门':[121.15,31.89],
  251 + '鄂尔多斯':[109.781327,39.608266],
  252 + '招远':[120.38,37.35],
  253 + '舟山':[122.207216,29.985295],
  254 + '齐齐哈尔':[123.97,47.33],
  255 + '盐城':[120.13,33.38],
  256 + '赤峰':[118.87,42.28],
  257 + '青岛':[120.33,36.07],
  258 + '乳山':[121.52,36.89],
  259 + '金昌':[102.188043,38.520089],
  260 + '泉州':[118.58,24.93],
  261 + '莱西':[120.53,36.86],
  262 + '日照':[119.46,35.42],
  263 + '胶南':[119.97,35.88],
  264 + '南通':[121.05,32.08],
  265 + '拉萨':[91.11,29.97],
  266 + '云浮':[112.02,22.93],
  267 + '梅州':[116.1,24.55],
  268 + '文登':[122.05,37.2],
  269 + '上海':[121.48,31.22],
  270 + '攀枝花':[101.718637,26.582347],
  271 + '威海':[122.1,37.5],
  272 + '承德':[117.93,40.97],
  273 + '厦门':[118.1,24.46],
  274 + '汕尾':[115.375279,22.786211],
  275 + '潮州':[116.63,23.68],
  276 + '丹东':[124.37,40.13],
  277 + '太仓':[121.1,31.45],
  278 + '曲靖':[103.79,25.51],
  279 + '烟台':[121.39,37.52],
  280 + '福州':[119.3,26.08],
  281 + '瓦房店':[121.979603,39.627114],
  282 + '即墨':[120.45,36.38],
  283 + '抚顺':[123.97,41.97],
  284 + '玉溪':[102.52,24.35],
  285 + '张家口':[114.87,40.82],
  286 + '阳泉':[113.57,37.85],
  287 + '莱州':[119.942327,37.177017],
  288 + '湖州':[120.1,30.86],
  289 + '汕头':[116.69,23.39],
  290 + '昆山':[120.95,31.39],
  291 + '宁波':[121.56,29.86],
  292 + '湛江':[110.359377,21.270708],
  293 + '揭阳':[116.35,23.55],
  294 + '荣成':[122.41,37.16],
  295 + '连云港':[119.16,34.59],
  296 + '葫芦岛':[120.836932,40.711052],
  297 + '常熟':[120.74,31.64],
  298 + '东莞':[113.75,23.04],
  299 + '河源':[114.68,23.73],
  300 + '淮安':[119.15,33.5],
  301 + '泰州':[119.9,32.49],
  302 + '南宁':[108.33,22.84],
  303 + '营口':[122.18,40.65],
  304 + '惠州':[114.4,23.09],
  305 + '江阴':[120.26,31.91],
  306 + '蓬莱':[120.75,37.8],
  307 + '韶关':[113.62,24.84],
  308 + '嘉峪关':[98.289152,39.77313],
  309 + '广州':[113.23,23.16],
  310 + '延安':[109.47,36.6],
  311 + '太原':[112.53,37.87],
  312 + '清远':[113.01,23.7],
  313 + '中山':[113.38,22.52],
  314 + '昆明':[102.73,25.04],
  315 + '寿光':[118.73,36.86],
  316 + '盘锦':[122.070714,41.119997],
  317 + '长治':[113.08,36.18],
  318 + '深圳':[114.07,22.62],
  319 + '珠海':[113.52,22.3],
  320 + '宿迁':[118.3,33.96],
  321 + '咸阳':[108.72,34.36],
  322 + '铜川':[109.11,35.09],
  323 + '平度':[119.97,36.77],
  324 + '佛山':[113.11,23.05],
  325 + '海口':[110.35,20.02],
  326 + '江门':[113.06,22.61],
  327 + '章丘':[117.53,36.72],
  328 + '肇庆':[112.44,23.05],
  329 + '大连':[121.62,38.92],
  330 + '临汾':[111.5,36.08],
  331 + '吴江':[120.63,31.16],
  332 + '石嘴山':[106.39,39.04],
  333 + '沈阳':[123.38,41.8],
  334 + '苏州':[120.62,31.32],
  335 + '茂名':[110.88,21.68],
  336 + '嘉兴':[120.76,30.77],
  337 + '长春':[125.35,43.88],
  338 + '胶州':[120.03336,36.264622],
  339 + '银川':[106.27,38.47],
  340 + '张家港':[120.555821,31.875428],
  341 + '三门峡':[111.19,34.76],
  342 + '锦州':[121.15,41.13],
  343 + '南昌':[115.89,28.68],
  344 + '柳州':[109.4,24.33],
  345 + '三亚':[109.511909,18.252847],
  346 + '自贡':[104.778442,29.33903],
  347 + '吉林':[126.57,43.87],
  348 + '阳江':[111.95,21.85],
  349 + '泸州':[105.39,28.91],
  350 + '西宁':[101.74,36.56],
  351 + '宜宾':[104.56,29.77],
  352 + '呼和浩特':[111.65,40.82],
  353 + '成都':[104.06,30.67],
  354 + '大同':[113.3,40.12],
  355 + '镇江':[119.44,32.2],
  356 + '桂林':[110.28,25.29],
  357 + '张家界':[110.479191,29.117096],
  358 + '宜兴':[119.82,31.36],
  359 + '北海':[109.12,21.49],
  360 + '西安':[108.95,34.27],
  361 + '金坛':[119.56,31.74],
  362 + '东营':[118.49,37.46],
  363 + '牡丹江':[129.58,44.6],
  364 + '遵义':[106.9,27.7],
  365 + '绍兴':[120.58,30.01],
  366 + '扬州':[119.42,32.39],
  367 + '常州':[119.95,31.79],
  368 + '潍坊':[119.1,36.62],
  369 + '重庆':[106.54,29.59],
  370 + '台州':[121.420757,28.656386],
  371 + '南京':[118.78,32.04],
  372 + '滨州':[118.03,37.36],
  373 + '贵阳':[106.71,26.57],
  374 + '无锡':[120.29,31.59],
  375 + '本溪':[123.73,41.3],
  376 + '克拉玛依':[84.77,45.59],
  377 + '渭南':[109.5,34.52],
  378 + '马鞍山':[118.48,31.56],
  379 + '宝鸡':[107.15,34.38],
  380 + '焦作':[113.21,35.24],
  381 + '句容':[119.16,31.95],
  382 + '北京':[116.46,39.92],
  383 + '徐州':[117.2,34.26],
  384 + '衡水':[115.72,37.72],
  385 + '包头':[110,40.58],
  386 + '绵阳':[104.73,31.48],
  387 + '乌鲁木齐':[87.68,43.77],
  388 + '枣庄':[117.57,34.86],
  389 + '杭州':[120.19,30.26],
  390 + '淄博':[118.05,36.78],
  391 + '鞍山':[122.85,41.12],
  392 + '溧阳':[119.48,31.43],
  393 + '库尔勒':[86.06,41.68],
  394 + '安阳':[114.35,36.1],
  395 + '开封':[114.35,34.79],
  396 + '济南':[117,36.65],
  397 + '德阳':[104.37,31.13],
  398 + '温州':[120.65,28.01],
  399 + '九江':[115.97,29.71],
  400 + '邯郸':[114.47,36.6],
  401 + '临安':[119.72,30.23],
  402 + '兰州':[103.73,36.03],
  403 + '沧州':[116.83,38.33],
  404 + '临沂':[118.35,35.05],
  405 + '南充':[106.110698,30.837793],
  406 + '天津':[117.2,39.13],
  407 + '富阳':[119.95,30.07],
  408 + '泰安':[117.13,36.18],
  409 + '诸暨':[120.23,29.71],
  410 + '郑州':[113.65,34.76],
  411 + '哈尔滨':[126.63,45.75],
  412 + '聊城':[115.97,36.45],
  413 + '芜湖':[118.38,31.33],
  414 + '唐山':[118.02,39.63],
  415 + '平顶山':[113.29,33.75],
  416 + '邢台':[114.48,37.05],
  417 + '德州':[116.29,37.45],
  418 + '济宁':[116.59,35.38],
  419 + '荆州':[112.239741,30.335165],
  420 + '宜昌':[111.3,30.7],
  421 + '义乌':[120.06,29.32],
  422 + '丽水':[119.92,28.45],
  423 + '洛阳':[112.44,34.7],
  424 + '秦皇岛':[119.57,39.95],
  425 + '株洲':[113.16,27.83],
  426 + '石家庄':[114.48,38.03],
  427 + '莱芜':[117.67,36.19],
  428 + '常德':[111.69,29.05],
  429 + '保定':[115.48,38.85],
  430 + '湘潭':[112.91,27.87],
  431 + '金华':[119.64,29.12],
  432 + '岳阳':[113.09,29.37],
  433 + '长沙':[113,28.21],
  434 + '衢州':[118.88,28.97],
  435 + '廊坊':[116.7,39.53],
  436 + '菏泽':[115.480656,35.23375],
  437 + '合肥':[117.27,31.86],
  438 + '武汉':[114.31,30.52],
  439 + '大庆':[125.03,46.58]
  440 +};
  441 +
  442 +var convertData = function (data) {
  443 + var res = [];
  444 + for (var i = 0; i < data.length; i++) {
  445 + var geoCoord = geoCoordMap[data[i].name];
  446 + if (geoCoord) {
  447 + res.push({
  448 + name: data[i].name,
  449 + value: geoCoord.concat(data[i].value)
  450 + });
  451 + }
  452 + }
  453 + return res;
  454 +};
  455 +
  456 +option = {
  457 + // backgroundColor: '#404a59',
  458 + title: {
  459 + text: 'Leaflet扩展Echarts3之全国主要城市空气质量',
  460 + subtext: 'Data from PM25.in, Develop By HuangTao',
  461 + sublink: 'http://www.pm25.in',
  462 + left: 'center',
  463 + textStyle: {
  464 + color: '#fff'
  465 + }
  466 + },
  467 + tooltip : {
  468 + trigger: 'item'
  469 + },
  470 + legend: {
  471 + orient: 'vertical',
  472 + y: 'bottom',
  473 + x:'right',
  474 + data:['pm2.5'],
  475 + textStyle: {
  476 + color: '#fff'
  477 + }
  478 + },
  479 + lmap: {
  480 +
  481 + },
  482 + series : [
  483 + {
  484 + name: 'pm2.5',
  485 + type: 'scatter',
  486 + coordinateSystem: 'geo',
  487 + data: convertData(data),
  488 + symbolSize: function (val) {
  489 + return val[2] / 10;
  490 + },
  491 + label: {
  492 + normal: {
  493 + formatter: '{b}',
  494 + position: 'right',
  495 + show: false
  496 + },
  497 + emphasis: {
  498 + show: true
  499 + }
  500 + },
  501 + itemStyle: {
  502 + normal: {
  503 + color: '#ddb926'
  504 + }
  505 + }
  506 + },
  507 + {
  508 + name: 'Top 5',
  509 + type: 'effectScatter',
  510 + coordinateSystem: 'geo',
  511 + data: convertData(data.sort(function (a, b) {
  512 + return b.value - a.value;
  513 + }).slice(0, 6)),
  514 + symbolSize: function (val) {
  515 + return val[2] / 10;
  516 + },
  517 + showEffectOn: 'render',
  518 + rippleEffect: {
  519 + brushType: 'stroke'
  520 + },
  521 + hoverAnimation: true,
  522 + label: {
  523 + normal: {
  524 + formatter: '{b}',
  525 + position: 'right',
  526 + show: true
  527 + }
  528 + },
  529 + itemStyle: {
  530 + normal: {
  531 + color: '#f4e925',
  532 + shadowBlur: 10,
  533 + shadowColor: '#333'
  534 + }
  535 + },
  536 + zlevel: 1
  537 + }
  538 + ]
  539 +};
  540 + // 使用刚指定的配置项和数据显示图表。
  541 + myChart.setOption(option);
  542 +</script>
  543 +</body>
  544 +</html>
  1 +//LeafletEcharts Created by HuangTao.
  2 +(function(root, factory) {
  3 + if (typeof define === 'function' && define.amd) {
  4 + // AMD. Register as an anonymous module.
  5 + define(['leaflet'], factory);
  6 + } else if (typeof module === 'object' && module.exports) {
  7 + // Node. Does not work with strict CommonJS, but
  8 + // only CommonJS-like environments that support module.exports,
  9 + // like Node.
  10 + module.exports = factory(require('leaflet'), require('echarts'));
  11 + } else if (typeof root !== 'undefined' && root.L && root.echarts) {
  12 + // Browser globals (root is window)
  13 + LeafletEcharts = factory(L, echarts);
  14 + }
  15 +}(this, function(L, echarts) {
  16 + var LeafletMap; //Leaflet Map
  17 + var EchartInstance; //Echart Instance
  18 +
  19 + //define LMapModel
  20 + var LMapModel = echarts.extendComponentModel({
  21 + type: 'lmap',
  22 +
  23 + defaultOption: {
  24 + mapOptions : {
  25 + center: [37.550339,104.114129],
  26 + zoom: 5
  27 + }
  28 + }
  29 + });
  30 +
  31 + //define LMapView
  32 + var LMapView = echarts.extendComponentView({
  33 + type: 'lmap',
  34 +
  35 + render: function (lMapModel, ecModel, api) {
  36 + }
  37 + });
  38 +
  39 + //define EchartLayer
  40 + L.EchartLayer = L.Class.extend({
  41 + includes:[L.Mixin.Events],
  42 + _echartsContainer:null,
  43 + _map:null,
  44 + _ec:null,
  45 + _ecModel:null,
  46 + _resizing:false,
  47 +
  48 + initialize:function(ec, root) {
  49 + this._ec = ec;
  50 + this._echartsContainer= root ? root: ec.getDom();
  51 + },
  52 +
  53 + getMap: function() {
  54 + return this._map;
  55 + },
  56 +
  57 + setModel:function(ecModel) {
  58 + this._ecModel = ecModel;
  59 + },
  60 +
  61 + onAdd: function (map) {
  62 + this._map = map;
  63 + var size = map.getSize();
  64 +
  65 + map.getPanes().overlayPane.appendChild(this._echartsContainer);
  66 +
  67 + map.on('moveend', this._moveend, this);
  68 + map.on('resize', this._resize, this);
  69 + },
  70 +
  71 + _resize:function() {
  72 + var domPosition = this._map._getMapPanePos();
  73 + this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
  74 + this._echartsContainer.style.left = this._mapOffset[0] + 'px';
  75 + this._echartsContainer.style.top = this._mapOffset[1] + 'px';
  76 + var size = this._map.getSize();
  77 + this._echartsContainer.style.height = size.y + 'px';
  78 + this._echartsContainer.style.width = size.x + 'px';
  79 + //resize over will moveend;
  80 + this._resizing=true;
  81 + },
  82 +
  83 +
  84 + _moveend : function() {
  85 + var domPosition = this._map._getMapPanePos();
  86 + this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
  87 + this._echartsContainer.style.left = this._mapOffset[0] + 'px';
  88 + this._echartsContainer.style.top = this._mapOffset[1] + 'px';
  89 + if (this._resizing == true)
  90 + {
  91 + this._resizing = false;
  92 + this._ec.resize();
  93 + } else {
  94 + this._ec.dispatchAction({
  95 + type: 'mapMoveEnd'
  96 + });
  97 + }
  98 + },
  99 +
  100 + onRemove: function (map) {
  101 + // remove layer's DOM elements and listeners
  102 + map.getPanes().overlayPane.removeChild(this._root);
  103 + map.off('viewreset', this._viewreset, this);
  104 + map.off('resize', this._resize, this);
  105 + }
  106 +
  107 + });
  108 +
  109 +
  110 + function LMapCoordSys(lmap, api) {
  111 + this._lmap = lmap;
  112 + this.dimensions = ['lng', 'lat'];
  113 + this._mapOffset = [0, 0];
  114 +
  115 + this._api = api;
  116 + }
  117 +
  118 + LMapCoordSys.prototype.dimensions = ['lng', 'lat'];
  119 +
  120 + LMapCoordSys.prototype.setMapOffset = function (mapOffset) {
  121 + this._mapOffset = mapOffset;
  122 + };
  123 +
  124 + LMapCoordSys.prototype.getLMap = function () {
  125 + return this._lmap;
  126 + };
  127 +
  128 + LMapCoordSys.prototype.dataToPoint = function (data) {
  129 + var point = new L.latLng(data[1], data[0]);
  130 + // TODO pointToOverlayPixel is toooooooo slow, cache the transform
  131 + var px = this._lmap.latLngToContainerPoint(point);
  132 + var mapOffset = this._mapOffset;
  133 + return [px.x - mapOffset[0], px.y - mapOffset[1]];
  134 + };
  135 +
  136 + LMapCoordSys.prototype.pointToData = function (pt) {
  137 + var mapOffset = this._mapOffset;
  138 + var pt = this._lmap.containerPointToLatLng({
  139 + x: pt[0] + mapOffset[0],
  140 + y: pt[1] + mapOffset[1]
  141 + });
  142 + return [pt.lat, pt.lng];
  143 + };
  144 +
  145 + LMapCoordSys.prototype.getViewRect = function () {
  146 + var api = this._api;
  147 + return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
  148 + };
  149 +
  150 + LMapCoordSys.prototype.getRoamTransform = function () {
  151 + return echarts.matrix.create();
  152 + };
  153 +
  154 + // For deciding which dimensions to use when creating list data
  155 + LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions;
  156 +
  157 + var OverLayer;
  158 + LMapCoordSys.create = function (ecModel, api) {
  159 + var lmapCoordSys;
  160 +
  161 + ecModel.eachComponent('lmap', function (lmapModel) {
  162 + if (lmapCoordSys) {
  163 + throw new Error('Only one lmap component can exist');
  164 + }
  165 +
  166 + var viewportRoot;
  167 + if (!LeafletMap) {
  168 + var root = api.getDom();
  169 + viewportRoot = api.getZr().painter.getViewportRoot();
  170 + if (typeof L === 'undefined') {
  171 + throw new Error('LMap api is not loaded');
  172 + }
  173 + var root = api.getDom();
  174 + // Not support IE8
  175 + var lmapRoot = root.querySelector('.ec-extension-lmap');
  176 + if (lmapRoot) {
  177 + // Reset viewport left and top, which will be changed
  178 + // in moving handler in BMapView
  179 + viewportRoot.style.left = '0px';
  180 + viewportRoot.style.top = '0px';
  181 + root.removeChild(lmapRoot);
  182 + }
  183 + lmapRoot = document.createElement('div');
  184 + lmapRoot.style.cssText = 'width:100%;height:100%';
  185 + // Not support IE8
  186 + lmapRoot.classList.add('ec-extension-lmap');
  187 + root.appendChild(lmapRoot);
  188 + var opts = lmapModel.get('mapOptions');
  189 + LeafletMap = lmapModel.__lmap = new L.map(lmapRoot, opts);
  190 + }
  191 +
  192 + if (!OverLayer)
  193 + {
  194 + var overlayer = OverLayer = new L.EchartLayer(EchartInstance, viewportRoot);
  195 + LeafletMap.addLayer(overlayer);
  196 + }
  197 + OverLayer.setModel(lmapModel);
  198 +
  199 + lmapCoordSys = new LMapCoordSys(LeafletMap, api);
  200 + lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]);
  201 + lmapModel.coordinateSystem = lmapCoordSys;
  202 + });
  203 +
  204 + ecModel.eachComponent('geo', function (geoModel) {
  205 + if (!lmapCoordSys) {
  206 + lmapCoordSys = new LMapCoordSys(LeafletMap, api);
  207 + lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]);
  208 + }
  209 +
  210 + if (!OverLayer)
  211 + {
  212 + var overlayer = OverLayer = new L.EchartLayer(EchartInstance);
  213 + LeafletMap.addLayer(overlayer);
  214 + }
  215 + OverLayer.setModel(geoModel);
  216 + });
  217 +
  218 + ecModel.eachSeries(function (seriesModel) {
  219 + var coordSys = seriesModel.get('coordinateSystem');
  220 + //series Lines only support geo coordSys;
  221 + if (coordSys === 'geo' || coordSys === 'lmap') {
  222 + seriesModel.coordinateSystem = lmapCoordSys;
  223 + }
  224 + });
  225 +
  226 + };
  227 +
  228 + //register lmap coordinateSystem
  229 + echarts.registerCoordinateSystem(
  230 + 'lmap', LMapCoordSys
  231 + );
  232 +
  233 + //register map moveend Action to UpdateLayout
  234 + echarts.registerAction({
  235 + type: 'mapMoveEnd',
  236 + event: 'mapMoveEnd',
  237 + update: 'updateLayout'
  238 + }, function (payload, ecModel) {
  239 + ecModel.eachComponent('lmap', function (lmapModel) {
  240 + });
  241 + });
  242 +
  243 + return {
  244 + //init leaflet map, return map
  245 + initMap : function(id, options) {
  246 + var map = LeafletMap = L.map(id, options);
  247 + var div = document.createElement('div');
  248 + var size = map.getSize();
  249 + div.style.position = "absolute";
  250 + div.style.height = size.y + 'px';
  251 + div.style.width = size.x + 'px';
  252 + div.style.top = 0;
  253 + div.style.left = 0;
  254 + var ec = EchartInstance = echarts.init(div);
  255 + return map;
  256 + },
  257 + //get echart instance
  258 + getEcharts:function() {
  259 + return EchartInstance;
  260 + },
  261 + //get leaflet Layer for echart
  262 + getEchartLayer:function() {
  263 + return OverLayer;
  264 + },
  265 + getLMap:function() {
  266 + return LeafletMap;
  267 + },
  268 + initEcharts:function(dom) {
  269 + var ec = EchartInstance = echarts.init(dom);
  270 + return ec;
  271 + }
  272 + };
  273 +
  274 +}));
请 注册 或 登录 后发表评论