本篇的重点内容是利用openlayers实现迁徙图功能,效果图如下:
实现思路
- 迁徙图界面设计
//迁徙图 "<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" + "<span style='margin-left:5px;font-size: 13px;color:white;'>迁徙图</span>" + "</div>" + '<div id="moveEchartsLayer" style="padding:5px;float: left;">' + '<input type="checkbox" name="moveechartslayer" id="moveechartslayer1" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' + '<label style="font-weight: normal;vertical-align: middle;margin: auto;">迁徙图</label>' + '</div>'
- 迁徙图点击事件
//迁徙图 $("#moveEchartsLayer input").bind("click", function () { if (this.checked) { if(!bxmap.olEchartsLayer.isLoad){ bxmap.olEchartsLayer.Init(bmap); }else{ bxmap.olEchartsLayer.loadEchartsLayer(); } } else { bxmap.olEchartsLayer.removeEchartsLayer(); } })
- 迁徙图模拟数据源
var move_option = { color: ["gold","aqua","lime"], tooltip : { trigger: "item", formatter: "{b}" }, toolbox: { show : false, orient : "vertical", x: "right", y: "center", feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, dataRange: { show : false, min : 0, max : 100, calculable : true, color: ["#ff3333"], textStyle:{ color:"#fff" } }, series : [ { name: "嘉善县", type: "map", roam: true, hoverable: false, mapType: "none", itemStyle:{ normal:{ borderColor:"rgba(100,149,237,1)", borderWidth:0.5, areaStyle:{ color: "#1b1b1b" } } }, data:[], markLine : { smooth:true, symbol: ["circle", "circle"], symbolSize : 1, itemStyle : { normal: { color:"#fff", borderWidth:1, borderColor:"rgba(30,144,255,0.5)" } }, data : [ [{name:"海宁市"},{name:"嘉善县"}], [{name:"南湖区"},{name:"嘉善县"}], [{name:"秀洲区"},{name:"嘉善县"}], [{name:"海盐县"},{name:"嘉善县"}], [{name:"平湖市"},{name:"嘉善县"}], [{name:"嘉善县"},{name:"嘉善县"}] ], }, geoCoord: { "海宁市": [120.492, 30.4186], "南湖区": [120.84, 30.8224], "秀洲区": [120.805, 30.9241], "海盐县": [121.043, 30.7042], "平湖市": [120.835, 30.529], "桐乡市": [120.476, 30.6122], "嘉善县":[120.994, 30.8826] } }, { name: "粤港澳 Top10", type: "map", mapType: "none", data:[], markLine : { smooth:true, effect : { show: true, scaleSize: 1, period: 30, color: "#fff", shadowBlur: 10 }, itemStyle : { normal: { borderWidth:1, lineStyle: { type: "solid", shadowBlur: 10 } } }, data : [ [{name:"南湖区"}, {name:"嘉善县"}], [{name:"秀洲区"}, {name:"嘉善县"}], [{name:"海盐县"}, {name:"嘉善县"}], [{name:"平湖市"}, {name:"嘉善县"}], [{name:"海宁市"}, {name:"嘉善县"}], [{name:"桐乡市"}, {name:"嘉善县"}] ] }, markPoint : { symbol:"emptyCircle", symbolSize : function (v){ return 10 + v/10 }, effect : { show: true, shadowBlur : 0 }, itemStyle:{ normal:{ label:{show:false}, color: '#f4e925', shadowBlur: 10, shadowColor: '#333' }, emphasis: { label:{position:"top"} } }, data : [ {name:"海宁市",value:25}, {name:"南湖区",value:60}, {name:"秀洲区",value:95}, {name:"海盐县",value:120}, {name:"平湖市",value:105}, {name:"桐乡市",value:70} ] } } ] };
- 迁徙图初始化以及核心代码实现
var bxmap = bxmap || {};
bxmap.olEchartsLayer = { map:null, isLoad:false, olMapExt:null, Init:function(bmap){ this.map = bmap.getMap(); this.isLoad = true; //加载移动流向图效果 this.loadEchartsLayer(); }, hideEchartsLayer:function(){ $("#markline_EchartMap").hide(); }, showEchartsLayer:function(){ $("#markline_EchartMap").show(); //地图跳转范围 this.map.getView().setCenter([12849981.699040852, 2498879.3286656872]); this.map.getView().setZoom(6); }, removeEchartsLayer:function(){ if(this.olMapExt) this.olMapExt.clear(); }, loadEchartsLayer:function(){ //加载移动流向图效果 var olMapExt = this.olMapExt = new OpenLayer3Ext(this.map, echarts2); var container = olMapExt.getEchartsContainer(); var myChart = olMapExt.initECharts(container); window.onresize = myChart.resize; olMapExt.setOption(move_option, true); //地图跳转范围 this.map.getView().setCenter([13442168.534000002,3599400.8270378476]); this.map.getView().setZoom(10); }
}
/** * echarts 百度地图扩展,必须在echarts初始化前使用 * * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。 */ /** * 构造函数 * * @param {String|HTMLElement|ol.Map} obj * @param {echarts} ec * @constructor */ function OpenLayer3Ext(map,ec) { this._map=map; var size = map.getSize(); var div = this._echartsContainer = document.createElement('div'); div.style.position = 'absolute'; div.style.height = size[1] + 'px'; div.style.width = size[0] + 'px'; div.id = 'markline_EchartMap'; div.style.top = 0; div.style.left = 0; map.getViewport().appendChild(div); this._init(map,ec); }; /** * echarts 容器元素 * * @type {HTMLElement} * @private */ OpenLayer3Ext.prototype._echartsContainer = null; /** * ol地图实例 * * @type {BMap.Map} * @private */ OpenLayer3Ext.prototype._map = null; /** * 使用的echarts实例 * * @type {ECharts} * @private */ OpenLayer3Ext.prototype._ec = null; /** * geoCoord * * @type {Object} * @private */ OpenLayer3Ext.prototype._geoCoord = []; /** * 记录地图的便宜量 * * @type {Array.<number>} * @private */ OpenLayer3Ext.prototype._mapOffset = [0, 0]; /** * 初始化方法 * * @param {String|HTMLElement|ol.Map} obj * @param {BMap} BMap * @param {echarts} ec * @private */ OpenLayer3Ext.prototype._init = function (map,ec) { var self = this; self._map = map; /** * 获取echarts容器 * * @return {HTMLElement} * @public */ self.getEchartsContainer = function () { return self._echartsContainer; }; /** * 获取map实例 * * @return {BMap.Map} * @public */ self.getMap = function () { return self._map; } /** * 经纬度转换为屏幕像素 * * @param {Array.<number>} geoCoord 经纬度 * @return {Array.<number>} * @public */ self.geoCoord2Pixel = function (geoCoord) { return self._map.getPixelFromCoordinate(ol.proj.fromLonLat(geoCoord)); }; /** * 屏幕像素转换为经纬度 * * @param {Array.<number>} pixel 像素坐标 * @return {Array.<number>} * @public */ self.pixel2GeoCoord = function (pixel) { return self._map.getCoordinateFromPixel(pixel); }; /** * 初始化echarts实例 * * @return {ECharts} * @public */ self.initECharts = function () { self._ec = ec.init.apply(self, arguments); self._bindEvent(); self._addMarkWrap(); return self._ec; }; // addMark wrap for get position from baidu map by geo location // by kener at 2015.01.08 self._addMarkWrap = function () { function _addMark(seriesIdx, markData, markType) { var data; if (markType == 'markPoint') { var data = markData.data; if (data && data.length) { for (var k = 0, len = data.length; k < len; k++) { self._AddPos(data[k]); } } } else { data = markData.data; if (data && data.length) { for (var k = 0, len = data.length; k < len; k++) { self._AddPos(data[k][0]); self._AddPos(data[k][1]); } } } self._ec._addMarkOri(seriesIdx, markData, markType); } self._ec._addMarkOri = self._ec._addMark; self._ec._addMark = _addMark; }; /** * 获取ECharts实例 * * @return {ECharts} * @public */ self.getECharts = function () { return self._ec; }; /** * 获取地图的偏移量 * * @return {Array.<number>} * @public */ self.getMapOffset = function () { return self._mapOffset; }; /** * 对echarts的setOption加一次处理 * 用来为markPoint、markLine中添加x、y坐标,需要name与geoCoord对应 * * @param {Object} * @public */ self.setOption = function (option, notMerge) { var series = option.series || {}; // 记录所有的geoCoord for (var i = 0, item; item = series[i++];) { var geoCoord = item.geoCoord; if (geoCoord) { for (var k in geoCoord) { self._geoCoord[k] = geoCoord[k]; } } } // 添加x、y for (var i = 0, item; item = series[i++];) { var markPoint = item.markPoint || {}; var markLine = item.markLine || {}; var data = markPoint.data; if (data && data.length) { for (var k = 0, len = data.length; k < len; k++) { self._AddPos(data[k]); } } data = markLine.data; if (data && data.length) { for (var k = 0, len = data.length; k < len; k++) { self._AddPos(data[k][0]); self._AddPos(data[k][1]); } } } self._ec.setOption(option, notMerge); } /** * 增加x、y坐标 * * @param {Object} obj markPoint、markLine data中的项,必须有name * @param {Object} geoCoord */ self._AddPos = function (obj) { var coord = this._geoCoord[obj.name] var pos = this.geoCoord2Pixel(coord); obj.x = pos[0] ;//- self._mapOffset[0]; obj.y = pos[1] ;//- self._mapOffset[1]; }; /** * 绑定地图事件的处理方法 * * @private */ self._bindEvent = function () { //self._map.getView().on('change:resolution', _zoomChangeHandler('zoom')); self._viewChangeCenter = self._map.getView().on('change:center', _moveHandler('moving')); self._mapMoveend = self._map.on('moveend', _moveHandler('moveend')); self._ec.getZrender().on('dragstart', _dragZrenderHandler(true)); self._ec.getZrender().on('dragend', _dragZrenderHandler(false)); //新增部分 self._ec.getZrender().on('mousewheel', self.refresh); self._ec.getZrender().on('dblclick', self.refresh); } self.clear = function () { ol.Observable.unByKey(self._viewChangeCenter); ol.Observable.unByKey(self._mapMoveend); $("#markline_EchartMap").empty(); $("#markline_EchartMap").remove(); }; /** * 地图缩放触发事件 * * @private */ function _zoomChangeHandler(type) { _fireEvent(type); } /** * 地图移动、如拖拽触发事件 * * @param {string} type moving | moveend 移动中|移动结束 * @return {Function} * @private */ function _moveHandler(type) { return function (e) { // 记录偏移量 var offsetEle = self._echartsContainer.parentNode.parentNode.parentNode; self._mapOffset = [ -parseInt(offsetEle.style.left) || 0, -parseInt(offsetEle.style.top) || 0 ]; self._echartsContainer.style.left = self._mapOffset[0] + 'px'; self._echartsContainer.style.top = self._mapOffset[1] + 'px'; _fireEvent(type); } } /** * Zrender拖拽触发事件 * * @param {boolean} isStart * @return {Function} * @private */ function _dragZrenderHandler(isStart) { return function () { self._map.dragging = isStart; } } /** * 触发事件 * * @param {stirng} type 事件类型 * @private */ function _fireEvent(type) { var func = self['on' + type]; if (func) { func(); } else { self.refresh(); } } /** * 刷新页面 * * @public */ self.refresh = function () { if (self._ec) { var option = self._ec.getOption(); var component = self._ec.component || {}; var legend = component.legend; var dataRange = component.dataRange; if (legend) { option.legend.selected = legend.getSelectedMap(); } if (dataRange) { option.dataRange.range = dataRange._range; } self._ec.clear(); self.setOption(option); } }; return OpenLayer3Ext; }