提交 4e29ef02aca512a6261f91595724e32f0f42532c
1 个父辈
6f49c854
change to dist version , add readme content
正在显示
7 个修改的文件
包含
169 行增加
和
37 行删除
1 | -Hello | ||
1 | +Leaflet地图扩展 | ||
2 | + | ||
3 | +ECharts使用Leaflet地图扩展,以Leaflet地图为底图展示点、线等可视化。可替换Echarts的地图。 | ||
4 | + | ||
5 | +引入 | ||
6 | +再引入Leaflet和Echarts的基础上直接引入leaflet-echarts3.js文件 | ||
7 | + | ||
8 | +<script src="../libs/echarts/dist/echarts.min.js"></script> | ||
9 | +<script src="../libs/leaflet/dist/leaflet.js"></script> | ||
10 | +<script src="../dist/leaflet-echarts3.min.js"></script> | ||
11 | + | ||
12 | +使用 | ||
13 | +方法一: | ||
14 | +系统使用lmap模型来绘制地图,可将原来的geo模型替换为lmap | ||
15 | +option = { | ||
16 | + lmap: { | ||
17 | + mapOptions : function() { | ||
18 | + return { | ||
19 | + //Leaflet Map 的地图配置 | ||
20 | + }; | ||
21 | + } | ||
22 | + } | ||
23 | +} | ||
24 | + | ||
25 | +var myChart = LeafletEcharts.initEcharts(document.getElementById("chart")); | ||
26 | +myChart.setOption(option); | ||
27 | +var map = myChart.getMap(); //获得Leaflet 地图对象 | ||
28 | +方法二: | ||
29 | +var le = LeafletEcharts.initMap('map'); | ||
30 | +var map = le.getMap(); //获得Leaflet 地图对象; | ||
31 | +.... //使用map进行常规的Map操作, 如添加控件,图层 | ||
32 | +var myChart = le.getEcharts(); //获得Echarts实例 | ||
33 | +... // 使用mychart 进行常规的echarts操作, 如setOptions(); | ||
34 | + | ||
35 | +var myEchartLayer = le.getEchartLayer(); //获得Echart所在的Leaflet图层, 注意该方法必须再setOption之后调用 | ||
36 | + |
@@ -15,10 +15,18 @@ | @@ -15,10 +15,18 @@ | ||
15 | }(this, function(L, echarts) { | 15 | }(this, function(L, echarts) { |
16 | var LeafletMap; //Leaflet Map | 16 | var LeafletMap; //Leaflet Map |
17 | var EchartInstance; //Echart Instance | 17 | var EchartInstance; //Echart Instance |
18 | + var maps = {}; | ||
19 | + var MAP_ATTRIBUTE_KEY = '_lmap_'; | ||
20 | + var mapidBase = new Date() - 0; | ||
18 | 21 | ||
19 | //define LMapModel | 22 | //define LMapModel |
20 | var LMapModel = echarts.extendComponentModel({ | 23 | var LMapModel = echarts.extendComponentModel({ |
21 | type: 'lmap', | 24 | type: 'lmap', |
25 | + | ||
26 | + getLMap : function() { | ||
27 | + return this.__lmap; | ||
28 | + }, | ||
29 | + | ||
22 | 30 | ||
23 | defaultOption: { | 31 | defaultOption: { |
24 | mapOptions : { | 32 | mapOptions : { |
@@ -41,19 +49,23 @@ | @@ -41,19 +49,23 @@ | ||
41 | includes:[L.Mixin.Events], | 49 | includes:[L.Mixin.Events], |
42 | _echartsContainer:null, | 50 | _echartsContainer:null, |
43 | _map:null, | 51 | _map:null, |
44 | - _ec:null, | 52 | + _api:null, |
45 | _ecModel:null, | 53 | _ecModel:null, |
46 | _resizing:false, | 54 | _resizing:false, |
47 | 55 | ||
48 | - initialize:function(ec, root) { | ||
49 | - this._ec = ec; | ||
50 | - this._echartsContainer= root ? root: ec.getDom(); | 56 | + initialize:function(api, root) { |
57 | + this._api = api; | ||
58 | + this._echartsContainer= root ? root: api.getDom(); | ||
51 | }, | 59 | }, |
52 | 60 | ||
53 | getMap: function() { | 61 | getMap: function() { |
54 | return this._map; | 62 | return this._map; |
55 | }, | 63 | }, |
56 | 64 | ||
65 | + getOverLayer : function() { | ||
66 | + return this.__overlayer; | ||
67 | + }, | ||
68 | + | ||
57 | setModel:function(ecModel) { | 69 | setModel:function(ecModel) { |
58 | this._ecModel = ecModel; | 70 | this._ecModel = ecModel; |
59 | }, | 71 | }, |
@@ -89,9 +101,10 @@ | @@ -89,9 +101,10 @@ | ||
89 | if (this._resizing == true) | 101 | if (this._resizing == true) |
90 | { | 102 | { |
91 | this._resizing = false; | 103 | this._resizing = false; |
92 | - this._ec.resize(); | 104 | + var ec = echarts.getInstanceByDom(this._api.getDom()); |
105 | + ec.resize(); | ||
93 | } else { | 106 | } else { |
94 | - this._ec.dispatchAction({ | 107 | + this._api.dispatchAction({ |
95 | type: 'mapMoveEnd' | 108 | type: 'mapMoveEnd' |
96 | }); | 109 | }); |
97 | } | 110 | } |
@@ -154,7 +167,6 @@ | @@ -154,7 +167,6 @@ | ||
154 | // For deciding which dimensions to use when creating list data | 167 | // For deciding which dimensions to use when creating list data |
155 | LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions; | 168 | LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions; |
156 | 169 | ||
157 | - var OverLayer; | ||
158 | LMapCoordSys.create = function (ecModel, api) { | 170 | LMapCoordSys.create = function (ecModel, api) { |
159 | var lmapCoordSys; | 171 | var lmapCoordSys; |
160 | 172 | ||
@@ -163,15 +175,18 @@ | @@ -163,15 +175,18 @@ | ||
163 | throw new Error('Only one lmap component can exist'); | 175 | throw new Error('Only one lmap component can exist'); |
164 | } | 176 | } |
165 | 177 | ||
178 | + var root = api.getDom(); | ||
179 | + var key = root.getAttribute(MAP_ATTRIBUTE_KEY); | ||
166 | var viewportRoot; | 180 | var viewportRoot; |
167 | - if (!LeafletMap) { | ||
168 | - var root = api.getDom(); | 181 | + |
182 | + if (!key) { | ||
183 | + | ||
169 | viewportRoot = api.getZr().painter.getViewportRoot(); | 184 | viewportRoot = api.getZr().painter.getViewportRoot(); |
170 | if (typeof L === 'undefined') { | 185 | if (typeof L === 'undefined') { |
171 | throw new Error('LMap api is not loaded'); | 186 | throw new Error('LMap api is not loaded'); |
172 | } | 187 | } |
173 | - var root = api.getDom(); | ||
174 | - // Not support IE8 | 188 | + |
189 | + // Not support IE8 | ||
175 | var lmapRoot = root.querySelector('.ec-extension-lmap'); | 190 | var lmapRoot = root.querySelector('.ec-extension-lmap'); |
176 | if (lmapRoot) { | 191 | if (lmapRoot) { |
177 | // Reset viewport left and top, which will be changed | 192 | // Reset viewport left and top, which will be changed |
@@ -186,33 +201,48 @@ | @@ -186,33 +201,48 @@ | ||
186 | lmapRoot.classList.add('ec-extension-lmap'); | 201 | lmapRoot.classList.add('ec-extension-lmap'); |
187 | root.appendChild(lmapRoot); | 202 | root.appendChild(lmapRoot); |
188 | var opts = lmapModel.get('mapOptions'); | 203 | var opts = lmapModel.get('mapOptions'); |
189 | - LeafletMap = lmapModel.__lmap = new L.map(lmapRoot, opts); | 204 | + if (typeof opts == "function") |
205 | + opts = opts(); | ||
206 | + var lmap = lmapModel.__lmap = new L.map(lmapRoot, opts); | ||
207 | + | ||
208 | + var mapid = 'map_' + mapidBase++; | ||
209 | + maps[mapid] = lmap; | ||
210 | + root.setAttribute && root.setAttribute(MAP_ATTRIBUTE_KEY, mapid); | ||
211 | + } else { | ||
212 | + lmapModel.__lmap = maps[key]; | ||
190 | } | 213 | } |
191 | 214 | ||
192 | - if (!OverLayer) | 215 | + |
216 | + if (!lmapModel.__overlayer) | ||
193 | { | 217 | { |
194 | - var overlayer = OverLayer = new L.EchartLayer(EchartInstance, viewportRoot); | ||
195 | - LeafletMap.addLayer(overlayer); | 218 | + var overlayer = lmapModel.__overlayer = new L.EchartLayer(api, viewportRoot); |
219 | + lmapModel.__lmap.addLayer(overlayer); | ||
220 | + lmapModel.__overlayer.setModel(lmapModel); | ||
196 | } | 221 | } |
197 | - OverLayer.setModel(lmapModel); | ||
198 | 222 | ||
199 | - lmapCoordSys = new LMapCoordSys(LeafletMap, api); | 223 | + lmapCoordSys = new LMapCoordSys(lmapModel.__lmap, api); |
200 | lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]); | 224 | lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]); |
201 | lmapModel.coordinateSystem = lmapCoordSys; | 225 | lmapModel.coordinateSystem = lmapCoordSys; |
202 | }); | 226 | }); |
203 | 227 | ||
204 | ecModel.eachComponent('geo', function (geoModel) { | 228 | ecModel.eachComponent('geo', function (geoModel) { |
229 | + var root = api.getDom(); | ||
230 | + var key = root.getAttribute(MAP_ATTRIBUTE_KEY); | ||
231 | + if (!key) | ||
232 | + throw new Error('Must Init LeafletMap First!'); | ||
233 | + | ||
234 | + var leafletMap = geoModel.__lmap = maps[key]; | ||
205 | if (!lmapCoordSys) { | 235 | if (!lmapCoordSys) { |
206 | - lmapCoordSys = new LMapCoordSys(LeafletMap, api); | 236 | + lmapCoordSys = new LMapCoordSys(leafletMap, api); |
207 | lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]); | 237 | lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]); |
208 | } | 238 | } |
209 | 239 | ||
210 | - if (!OverLayer) | 240 | + if (!geoModel.__overlayer) |
211 | { | 241 | { |
212 | - var overlayer = OverLayer = new L.EchartLayer(EchartInstance); | ||
213 | - LeafletMap.addLayer(overlayer); | 242 | + var overlayer = geoModel.__overlayer = new L.EchartLayer(api); |
243 | + leafletMap.addLayer(overlayer); | ||
244 | + overlayer.setModel(geoModel); | ||
214 | } | 245 | } |
215 | - OverLayer.setModel(geoModel); | ||
216 | }); | 246 | }); |
217 | 247 | ||
218 | ecModel.eachSeries(function (seriesModel) { | 248 | ecModel.eachSeries(function (seriesModel) { |
@@ -240,35 +270,102 @@ | @@ -240,35 +270,102 @@ | ||
240 | }); | 270 | }); |
241 | }); | 271 | }); |
242 | 272 | ||
243 | - return { | 273 | + function LEResult(ec, dom, map) |
274 | + { | ||
275 | + this._ec = ec; | ||
276 | + this._dom = dom; | ||
277 | + this._map = map; | ||
278 | + } | ||
279 | + | ||
280 | + LEResult.prototype.getMap = function() { | ||
281 | + if (this._map) | ||
282 | + return this._map; | ||
283 | + var mapid = this._dom.getAttribute(MAP_ATTRIBUTE_KEY); | ||
284 | + return maps[mapid]; | ||
285 | + } | ||
286 | + | ||
287 | + LEResult.prototype.getEcharts = function() { | ||
288 | + return this._ec; | ||
289 | + } | ||
290 | + | ||
291 | + LEResult.prototype.getEchartLayer = function() { | ||
292 | + var ec = this.getEcharts(); | ||
293 | + var mapModel = ec.getModel().getComponent('lmap'); | ||
294 | + if (!mapModel) | ||
295 | + mapModel = ec.getModel().getComponent('geo'); | ||
296 | + return mapModel.__overlayer; | ||
297 | + } | ||
298 | + | ||
299 | + LEResult.prototype.setOption = function(option, notMerge, lazyUpdate) { | ||
300 | + this._ec.setOption(option,notMerge, lazyUpdate); | ||
301 | + } | ||
302 | + | ||
303 | + /* | ||
304 | + L.LeafletEcharts = L.Class.extend({ | ||
244 | //init leaflet map, return map | 305 | //init leaflet map, return map |
245 | initMap : function(id, options) { | 306 | initMap : function(id, options) { |
246 | - var map = LeafletMap = L.map(id, options); | ||
247 | - var div = document.createElement('div'); | ||
248 | - var size = map.getSize(); | 307 | + this.map = LeafletMap = L.map(id, options); |
308 | + var mapid = 'map_' + mapidBase++; | ||
309 | + maps[mapid] = this.map; | ||
310 | + var div = this.echartDom = document.createElement('div'); | ||
311 | + var size = this.map.getSize(); | ||
249 | div.style.position = "absolute"; | 312 | div.style.position = "absolute"; |
250 | div.style.height = size.y + 'px'; | 313 | div.style.height = size.y + 'px'; |
251 | div.style.width = size.x + 'px'; | 314 | div.style.width = size.x + 'px'; |
252 | div.style.top = 0; | 315 | div.style.top = 0; |
253 | div.style.left = 0; | 316 | div.style.left = 0; |
254 | var ec = EchartInstance = echarts.init(div); | 317 | var ec = EchartInstance = echarts.init(div); |
255 | - return map; | 318 | + div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid); |
319 | + return this.map; | ||
256 | }, | 320 | }, |
257 | //get echart instance | 321 | //get echart instance |
258 | getEcharts:function() { | 322 | getEcharts:function() { |
259 | - return EchartInstance; | 323 | + if (this.echartDom) |
324 | + return echarts.getInstanceByDom(this.echartDom); //EchartInstance; | ||
325 | + else | ||
326 | + return null; | ||
260 | }, | 327 | }, |
261 | //get leaflet Layer for echart | 328 | //get leaflet Layer for echart |
262 | getEchartLayer:function() { | 329 | getEchartLayer:function() { |
263 | - return OverLayer; | 330 | + var ec = this.getEcharts(); |
331 | + var mapModel = ec.getModel().getComponent('lmap'); | ||
332 | + if (!mapModel) | ||
333 | + mapModel = ec.getModel().getComponent('geo'); | ||
334 | + return mapModel.__overlayer; | ||
264 | }, | 335 | }, |
265 | getLMap:function() { | 336 | getLMap:function() { |
266 | - return LeafletMap; | 337 | + if (this.map) |
338 | + return this.map; | ||
339 | + var mapid = this.echartDom.getAttribute(MAP_ATTRIBUTE_KEY); | ||
340 | + return maps[mapid]; | ||
267 | }, | 341 | }, |
268 | initEcharts:function(dom) { | 342 | initEcharts:function(dom) { |
343 | + this.echartDom = dom; | ||
269 | var ec = EchartInstance = echarts.init(dom); | 344 | var ec = EchartInstance = echarts.init(dom); |
270 | return ec; | 345 | return ec; |
271 | } | 346 | } |
272 | - }; | 347 | + }); */ |
348 | + return { | ||
349 | + initMap : function(id, options) { | ||
350 | + var map = L.map(id, options); | ||
351 | + var mapid = 'map_' + mapidBase++; | ||
352 | + maps[mapid] = map; | ||
353 | + var div = document.createElement('div'); | ||
354 | + var size = map.getSize(); | ||
355 | + div.style.position = "absolute"; | ||
356 | + div.style.height = size.y + 'px'; | ||
357 | + div.style.width = size.x + 'px'; | ||
358 | + div.style.top = 0; | ||
359 | + div.style.left = 0; | ||
360 | + var ec = echarts.init(div); | ||
361 | + div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid); | ||
362 | + return new LEResult(ec, div, map); | ||
363 | + }, | ||
364 | + initEcharts:function(dom) { | ||
365 | + var ec = echarts.init(dom); | ||
366 | + return new LEResult(ec, dom); | ||
367 | + }, | ||
368 | + version: "1.0.0" | ||
369 | + }; | ||
273 | 370 | ||
274 | })); | 371 | })); |
1 | -!function(e,t){"function"==typeof define&&define.amd?define(["leaflet"],t):"object"==typeof module&&module.exports?module.exports=t(require("leaflet"),require("echarts")):"undefined"!=typeof e&&e.L&&e.echarts&&(LeafletEcharts=t(L,echarts))}(this,function(e,t){function n(e,t){this._lmap=e,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=t}var i,a;t.extendComponentModel({type:"lmap",defaultOption:{mapOptions:{center:[37.550339,104.114129],zoom:5}}}),t.extendComponentView({type:"lmap",render:function(e,t,n){}});e.EchartLayer=e.Class.extend({includes:[e.Mixin.Events],_echartsContainer:null,_map:null,_ec:null,_ecModel:null,_resizing:!1,initialize:function(e,t){this._ec=e,this._echartsContainer=t?t:e.getDom()},getMap:function(){return this._map},setModel:function(e){this._ecModel=e},onAdd:function(e){this._map=e;e.getSize();e.getPanes().overlayPane.appendChild(this._echartsContainer),e.on("moveend",this._moveend,this),e.on("resize",this._resize,this)},_resize:function(){var e=this._map._getMapPanePos();this._mapOffset=[-parseInt(e.x)||0,-parseInt(e.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px";var t=this._map.getSize();this._echartsContainer.style.height=t.y+"px",this._echartsContainer.style.width=t.x+"px",this._resizing=!0},_moveend:function(){var e=this._map._getMapPanePos();this._mapOffset=[-parseInt(e.x)||0,-parseInt(e.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px",1==this._resizing?(this._resizing=!1,this._ec.resize()):this._ec.dispatchAction({type:"mapMoveEnd"})},onRemove:function(e){e.getPanes().overlayPane.removeChild(this._root),e.off("viewreset",this._viewreset,this),e.off("resize",this._resize,this)}}),n.prototype.dimensions=["lng","lat"],n.prototype.setMapOffset=function(e){this._mapOffset=e},n.prototype.getLMap=function(){return this._lmap},n.prototype.dataToPoint=function(t){var n=new e.latLng(t[1],t[0]),i=this._lmap.latLngToContainerPoint(n),a=this._mapOffset;return[i.x-a[0],i.y-a[1]]},n.prototype.pointToData=function(e){var t=this._mapOffset,e=this._lmap.containerPointToLatLng({x:e[0]+t[0],y:e[1]+t[1]});return[e.lat,e.lng]},n.prototype.getViewRect=function(){var e=this._api;return new t.graphic.BoundingRect(0,0,e.getWidth(),e.getHeight())},n.prototype.getRoamTransform=function(){return t.matrix.create()},n.dimensions=n.prototype.dimensions;var o;return n.create=function(t,s){var r;t.eachComponent("lmap",function(t){if(r)throw new Error("Only one lmap component can exist");var p;if(!i){var h=s.getDom();if(p=s.getZr().painter.getViewportRoot(),"undefined"==typeof e)throw new Error("LMap api is not loaded");var h=s.getDom(),f=h.querySelector(".ec-extension-lmap");f&&(p.style.left="0px",p.style.top="0px",h.removeChild(f)),f=document.createElement("div"),f.style.cssText="width:100%;height:100%",f.classList.add("ec-extension-lmap"),h.appendChild(f);var c=t.get("mapOptions");i=t.__lmap=new e.map(f,c)}if(!o){var l=o=new e.EchartLayer(a,p);i.addLayer(l)}o.setModel(t),r=new n(i,s),r.setMapOffset(t.__mapOffset||[0,0]),t.coordinateSystem=r}),t.eachComponent("geo",function(t){if(r||(r=new n(i,s),r.setMapOffset(t.__mapOffset||[0,0])),!o){var p=o=new e.EchartLayer(a);i.addLayer(p)}o.setModel(t)}),t.eachSeries(function(e){var t=e.get("coordinateSystem");"geo"!==t&&"lmap"!==t||(e.coordinateSystem=r)})},t.registerCoordinateSystem("lmap",n),t.registerAction({type:"mapMoveEnd",event:"mapMoveEnd",update:"updateLayout"},function(e,t){t.eachComponent("lmap",function(e){})}),{initMap:function(n,o){var s=i=e.map(n,o),r=document.createElement("div"),p=s.getSize();r.style.position="absolute",r.style.height=p.y+"px",r.style.width=p.x+"px",r.style.top=0,r.style.left=0;a=t.init(r);return s},getEcharts:function(){return a},getEchartLayer:function(){return o},getLMap:function(){return i},initEcharts:function(e){var n=a=t.init(e);return n}}}); | ||
1 | +!function(t,e){"function"==typeof define&&define.amd?define(["leaflet"],e):"object"==typeof module&&module.exports?module.exports=e(require("leaflet"),require("echarts")):"undefined"!=typeof t&&t.L&&t.echarts&&(LeafletEcharts=e(L,echarts))}(this,function(t,e){function n(t,e){this._lmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e}function i(t,e,n){this._ec=t,this._dom=e,this._map=n}var a={},o="_lmap_",r=new Date-0;e.extendComponentModel({type:"lmap",getLMap:function(){return this.__lmap},defaultOption:{mapOptions:{center:[37.550339,104.114129],zoom:5}}}),e.extendComponentView({type:"lmap",render:function(t,e,n){}});return t.EchartLayer=t.Class.extend({includes:[t.Mixin.Events],_echartsContainer:null,_map:null,_api:null,_ecModel:null,_resizing:!1,initialize:function(t,e){this._api=t,this._echartsContainer=e?e:t.getDom()},getMap:function(){return this._map},getOverLayer:function(){return this.__overlayer},setModel:function(t){this._ecModel=t},onAdd:function(t){this._map=t;t.getSize();t.getPanes().overlayPane.appendChild(this._echartsContainer),t.on("moveend",this._moveend,this),t.on("resize",this._resize,this)},_resize:function(){var t=this._map._getMapPanePos();this._mapOffset=[-parseInt(t.x)||0,-parseInt(t.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px";var e=this._map.getSize();this._echartsContainer.style.height=e.y+"px",this._echartsContainer.style.width=e.x+"px",this._resizing=!0},_moveend:function(){var t=this._map._getMapPanePos();if(this._mapOffset=[-parseInt(t.x)||0,-parseInt(t.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px",1==this._resizing){this._resizing=!1;var n=e.getInstanceByDom(this._api.getDom());n.resize()}else this._api.dispatchAction({type:"mapMoveEnd"})},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._root),t.off("viewreset",this._viewreset,this),t.off("resize",this._resize,this)}}),n.prototype.dimensions=["lng","lat"],n.prototype.setMapOffset=function(t){this._mapOffset=t},n.prototype.getLMap=function(){return this._lmap},n.prototype.dataToPoint=function(e){var n=new t.latLng(e[1],e[0]),i=this._lmap.latLngToContainerPoint(n),a=this._mapOffset;return[i.x-a[0],i.y-a[1]]},n.prototype.pointToData=function(t){var e=this._mapOffset,t=this._lmap.containerPointToLatLng({x:t[0]+e[0],y:t[1]+e[1]});return[t.lat,t.lng]},n.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},n.prototype.getRoamTransform=function(){return e.matrix.create()},n.dimensions=n.prototype.dimensions,n.create=function(e,i){var s;e.eachComponent("lmap",function(e){if(s)throw new Error("Only one lmap component can exist");var p,h=i.getDom(),l=h.getAttribute(o);if(l)e.__lmap=a[l];else{if(p=i.getZr().painter.getViewportRoot(),"undefined"==typeof t)throw new Error("LMap api is not loaded");var f=h.querySelector(".ec-extension-lmap");f&&(p.style.left="0px",p.style.top="0px",h.removeChild(f)),f=document.createElement("div"),f.style.cssText="width:100%;height:100%",f.classList.add("ec-extension-lmap"),h.appendChild(f);var m=e.get("mapOptions");"function"==typeof m&&(m=m());var _=e.__lmap=new t.map(f,m),c="map_"+r++;a[c]=_,h.setAttribute&&h.setAttribute(o,c)}if(!e.__overlayer){var u=e.__overlayer=new t.EchartLayer(i,p);e.__lmap.addLayer(u),e.__overlayer.setModel(e)}s=new n(e.__lmap,i),s.setMapOffset(e.__mapOffset||[0,0]),e.coordinateSystem=s}),e.eachComponent("geo",function(e){var r=i.getDom(),p=r.getAttribute(o);if(!p)throw new Error("Must Init LeafletMap First!");var h=e.__lmap=a[p];if(s||(s=new n(h,i),s.setMapOffset(e.__mapOffset||[0,0])),!e.__overlayer){var l=e.__overlayer=new t.EchartLayer(i);h.addLayer(l),l.setModel(e)}}),e.eachSeries(function(t){var e=t.get("coordinateSystem");"geo"!==e&&"lmap"!==e||(t.coordinateSystem=s)})},e.registerCoordinateSystem("lmap",n),e.registerAction({type:"mapMoveEnd",event:"mapMoveEnd",update:"updateLayout"},function(t,e){e.eachComponent("lmap",function(t){})}),i.prototype.getMap=function(){if(this._map)return this._map;var t=this._dom.getAttribute(o);return a[t]},i.prototype.getEcharts=function(){return this._ec},i.prototype.getEchartLayer=function(){var t=this.getEcharts(),e=t.getModel().getComponent("lmap");return e||(e=t.getModel().getComponent("geo")),e.__overlayer},i.prototype.setOption=function(t,e,n){this._ec.setOption(t,e,n)},{initMap:function(n,s){var p=t.map(n,s),h="map_"+r++;a[h]=p;var l=document.createElement("div"),f=p.getSize();l.style.position="absolute",l.style.height=f.y+"px",l.style.width=f.x+"px",l.style.top=0,l.style.left=0;var m=e.init(l);return l.setAttribute&&l.setAttribute(o,h),new i(m,l,p)},initEcharts:function(t){var n=e.init(t);return new i(n,t)},version:"1.0.0"}}); |
@@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
19 | <script src="../libs/echarts/dist/echarts.min.js"></script> | 19 | <script src="../libs/echarts/dist/echarts.min.js"></script> |
20 | <script src="../libs/leaflet/dist/leaflet.js"></script> | 20 | <script src="../libs/leaflet/dist/leaflet.js"></script> |
21 | <script src="../libs/jquery/dist/jquery.min.js"></script> | 21 | <script src="../libs/jquery/dist/jquery.min.js"></script> |
22 | -<script src="../src/leaflet-echarts3.js"></script> | 22 | +<script src="../dist/leaflet-echarts3.min.js"></script> |
23 | <script> | 23 | <script> |
24 | 24 | ||
25 | var echarts = LeafletEcharts.initEcharts(document.getElementById("map"));//('map'); | 25 | var echarts = LeafletEcharts.initEcharts(document.getElementById("map"));//('map'); |
@@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
18 | <script src="../libs/echarts/dist/echarts.min.js"></script> | 18 | <script src="../libs/echarts/dist/echarts.min.js"></script> |
19 | <script src="../libs/leaflet/dist/leaflet.js"></script> | 19 | <script src="../libs/leaflet/dist/leaflet.js"></script> |
20 | <script src="../libs/jquery/dist/jquery.min.js"></script> | 20 | <script src="../libs/jquery/dist/jquery.min.js"></script> |
21 | -<script src="../src/leaflet-echarts3.js"></script> | 21 | +<script src="../dist/leaflet-echarts3.min.js"></script> |
22 | <script> | 22 | <script> |
23 | 23 | ||
24 | var le = LeafletEcharts.initMap('map'); | 24 | var le = LeafletEcharts.initMap('map'); |
@@ -66,7 +66,7 @@ | @@ -66,7 +66,7 @@ | ||
66 | <script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script> | 66 | <script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script> |
67 | <script src="../libs/echarts/dist/echarts.min.js"></script> | 67 | <script src="../libs/echarts/dist/echarts.min.js"></script> |
68 | <script src="../libs/leaflet/dist/leaflet.js"></script> | 68 | <script src="../libs/leaflet/dist/leaflet.js"></script> |
69 | - <script src="../src/leaflet-echarts3.js"></script> | 69 | + <script src="../dist/leaflet-echarts3.min.js"></script> |
70 | <script> | 70 | <script> |
71 | var data1 = [ | 71 | var data1 = [ |
72 | {name: '海门', value: 9}, | 72 | {name: '海门', value: 9}, |
@@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
18 | <script src="../libs/echarts/dist/echarts.min.js"></script> | 18 | <script src="../libs/echarts/dist/echarts.min.js"></script> |
19 | <script src="../libs/leaflet/dist/leaflet.js"></script> | 19 | <script src="../libs/leaflet/dist/leaflet.js"></script> |
20 | <script src="../libs/jquery/dist/jquery.min.js"></script> | 20 | <script src="../libs/jquery/dist/jquery.min.js"></script> |
21 | -<script src="../src/leaflet-echarts3.js"></script> | 21 | +<script src="../dist/leaflet-echarts3.min.js"></script> |
22 | <script> | 22 | <script> |
23 | var le = LeafletEcharts.initMap('map') | 23 | var le = LeafletEcharts.initMap('map') |
24 | var map = le.getMap(); | 24 | var map = le.getMap(); |
请
注册
或
登录
后发表评论