You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1643 lines
64 KiB
1643 lines
64 KiB
/**
|
|
* echarts图表类：地图
|
|
*
|
|
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
|
|
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
|
|
*
|
|
*/
|
|
define(function (require) {
|
|
var ChartBase = require('./base');
|
|
|
|
// 图形依赖
|
|
var TextShape = require('zrender/shape/Text');
|
|
var PathShape = require('zrender/shape/Path');
|
|
var CircleShape = require('zrender/shape/Circle');
|
|
var RectangleShape = require('zrender/shape/Rectangle');
|
|
var LineShape = require('zrender/shape/Line');
|
|
var PolygonShape = require('zrender/shape/Polygon');
|
|
var EllipseShape = require('zrender/shape/Ellipse');
|
|
// 组件依赖
|
|
require('../component/dataRange');
|
|
require('../component/roamController');
|
|
|
|
var ecConfig = require('../config');
|
|
// 地图默认参数
|
|
ecConfig.map = {
|
|
zlevel: 0, // 一级层叠
|
|
z: 2, // 二级层叠
|
|
mapType: 'china', // 各省的mapType暂时都用中文
|
|
//mapLocation: {
|
|
// x: 'center' | 'left' | 'right' | 'x%' | {number},
|
|
// y: 'center' | 'top' | 'bottom' | 'x%' | {number}
|
|
// width // 自适应
|
|
// height // 自适应
|
|
//},
|
|
// mapValueCalculation: 'sum', // 数值合并方式，默认加和，可选为：
|
|
// 'sum' | 'average' | 'max' | 'min'
|
|
mapValuePrecision: 0, // 地图数值计算结果小数精度
|
|
showLegendSymbol: true, // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
|
|
// selectedMode: false, // 选择模式，默认关闭，可选single，multiple
|
|
dataRangeHoverLink: true,
|
|
hoverable: true,
|
|
clickable: true,
|
|
// roam: false, // 是否开启缩放及漫游模式
|
|
// scaleLimit: null,
|
|
itemStyle: {
|
|
normal: {
|
|
// color: 各异,
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
borderWidth: 1,
|
|
areaStyle: {
|
|
color: '#ccc'
|
|
},
|
|
label: {
|
|
show: false,
|
|
textStyle: {
|
|
color: 'rgb(139,69,19)'
|
|
}
|
|
}
|
|
},
|
|
emphasis: { // 也是选中样式
|
|
// color: 各异,
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
borderWidth: 1,
|
|
areaStyle: {
|
|
color: 'rgba(255,215,0,0.8)'
|
|
},
|
|
label: {
|
|
show: false,
|
|
textStyle: {
|
|
color: 'rgb(100,0,0)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var ecData = require('../util/ecData');
|
|
var zrUtil = require('zrender/tool/util');
|
|
var zrConfig = require('zrender/config');
|
|
var zrEvent = require('zrender/tool/event');
|
|
|
|
var _mapParams = require('../util/mapData/params').params;
|
|
var _textFixed = require('../util/mapData/textFixed');
|
|
var _geoCoord = require('../util/mapData/geoCoord');
|
|
|
|
/**
|
|
* 构造函数
|
|
* @param {Object} messageCenter echart消息中心
|
|
* @param {ZRender} zr zrender实例
|
|
* @param {Object} series 数据
|
|
* @param {Object} component 组件
|
|
*/
|
|
function Map(ecTheme, messageCenter, zr, option, myChart){
|
|
// 图表基类
|
|
ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart);
|
|
|
|
var self = this;
|
|
self._onmousewheel = function(params) {
|
|
return self.__onmousewheel(params);
|
|
};
|
|
self._onmousedown = function(params) {
|
|
return self.__onmousedown(params);
|
|
};
|
|
self._onmousemove = function(params) {
|
|
return self.__onmousemove(params);
|
|
};
|
|
self._onmouseup = function(params) {
|
|
return self.__onmouseup(params);
|
|
};
|
|
self._onroamcontroller = function(params) {
|
|
return self.__onroamcontroller(params);
|
|
};
|
|
self._ondrhoverlink = function(params) {
|
|
return self.__ondrhoverlink(params);
|
|
};
|
|
|
|
this._isAlive = true; // 活着标记
|
|
this._selectedMode = {}; // 选择模式
|
|
this._activeMapType = {}; // 当前活跃的地图类型
|
|
this._clickable = {}; // 悬浮高亮模式，索引到图表
|
|
this._hoverable = {}; // 悬浮高亮模式，索引到图表
|
|
this._showLegendSymbol = {}; // 显示图例颜色标识
|
|
this._selected = {}; // 地图选择状态
|
|
this._mapTypeMap = {}; // 图例类型索引
|
|
this._mapDataMap = {}; // 根据地图类型索引bbox,transform,path
|
|
this._nameMap = {}; // 个性化地名
|
|
this._specialArea = {}; // 特殊
|
|
this._refreshDelayTicket; // 滚轮缩放时让refresh飞一会
|
|
this._mapDataRequireCounter; // 异步回调计数器
|
|
this._markAnimation = false;
|
|
this._hoverLinkMap = {};
|
|
|
|
// 漫游相关信息
|
|
this._roamMap = {};
|
|
this._scaleLimitMap = {};
|
|
this._mx;
|
|
this._my;
|
|
this._mousedown;
|
|
this._justMove; // 避免移动响应点击
|
|
this._curMapType; // 当前移动的地图类型
|
|
|
|
this.refresh(option);
|
|
|
|
this.zr.on(zrConfig.EVENT.MOUSEWHEEL, this._onmousewheel);
|
|
this.zr.on(zrConfig.EVENT.MOUSEDOWN, this._onmousedown);
|
|
messageCenter.bind(ecConfig.EVENT.ROAMCONTROLLER, this._onroamcontroller);
|
|
messageCenter.bind(ecConfig.EVENT.DATA_RANGE_HOVERLINK, this._ondrhoverlink);
|
|
}
|
|
|
|
Map.prototype = {
|
|
type : ecConfig.CHART_TYPE_MAP,
|
|
/**
|
|
* 绘制图形
|
|
*/
|
|
_buildShape : function () {
|
|
var series = this.series;
|
|
this.selectedMap = {}; // 系列
|
|
this._activeMapType = {}; // 当前活跃的地图类型
|
|
|
|
var legend = this.component.legend;
|
|
var seriesName;
|
|
var valueData = {};
|
|
var mapType;
|
|
var data;
|
|
var name;
|
|
var mapSeries = {};
|
|
var mapValuePrecision = {};
|
|
var valueCalculation = {};
|
|
for (var i = 0, l = series.length; i < l; i++) {
|
|
if (series[i].type == ecConfig.CHART_TYPE_MAP) { // map
|
|
series[i] = this.reformOption(series[i]);
|
|
mapType = series[i].mapType;
|
|
mapSeries[mapType] = mapSeries[mapType] || {};
|
|
mapSeries[mapType][i] = true;
|
|
mapValuePrecision[mapType] = mapValuePrecision[mapType]
|
|
|| series[i].mapValuePrecision;
|
|
this._scaleLimitMap[mapType] = this._scaleLimitMap[mapType] || {};
|
|
series[i].scaleLimit
|
|
&& zrUtil.merge(this._scaleLimitMap[mapType], series[i].scaleLimit, true);
|
|
|
|
this._roamMap[mapType] = series[i].roam || this._roamMap[mapType];
|
|
|
|
if (this._hoverLinkMap[mapType] == null || this._hoverLinkMap[mapType]) {
|
|
// false 1票否决
|
|
this._hoverLinkMap[mapType] = series[i].dataRangeHoverLink;
|
|
}
|
|
|
|
this._nameMap[mapType] = this._nameMap[mapType] || {};
|
|
series[i].nameMap
|
|
&& zrUtil.merge(this._nameMap[mapType], series[i].nameMap, true);
|
|
this._activeMapType[mapType] = true;
|
|
|
|
if (series[i].textFixed) {
|
|
zrUtil.merge(
|
|
_textFixed, series[i].textFixed, true
|
|
);
|
|
}
|
|
if (series[i].geoCoord) {
|
|
zrUtil.merge(
|
|
_geoCoord, series[i].geoCoord, true
|
|
);
|
|
}
|
|
|
|
this._selectedMode[mapType] = this._selectedMode[mapType]
|
|
|| series[i].selectedMode;
|
|
if (this._hoverable[mapType] == null || this._hoverable[mapType]) {
|
|
// false 1票否决
|
|
this._hoverable[mapType] = series[i].hoverable;
|
|
}
|
|
if (this._clickable[mapType] == null || this._clickable[mapType]) {
|
|
// false 1票否决
|
|
this._clickable[mapType] = series[i].clickable;
|
|
}
|
|
if (this._showLegendSymbol[mapType] == null
|
|
|| this._showLegendSymbol[mapType]
|
|
) {
|
|
// false 1票否决
|
|
this._showLegendSymbol[mapType] = series[i].showLegendSymbol;
|
|
}
|
|
|
|
valueCalculation[mapType] = valueCalculation[mapType]
|
|
|| series[i].mapValueCalculation;
|
|
|
|
seriesName = series[i].name;
|
|
this.selectedMap[seriesName] = legend
|
|
? legend.isSelected(seriesName)
|
|
: true;
|
|
if (this.selectedMap[seriesName]) {
|
|
valueData[mapType] = valueData[mapType] || {};
|
|
data = series[i].data;
|
|
for (var j = 0, k = data.length; j < k; j++) {
|
|
name = this._nameChange(mapType, data[j].name);
|
|
valueData[mapType][name] = valueData[mapType][name]
|
|
|| {
|
|
seriesIndex : [],
|
|
valueMap: {}
|
|
};
|
|
for (var key in data[j]) {
|
|
if (key != 'value') {
|
|
valueData[mapType][name][key] =
|
|
data[j][key];
|
|
}
|
|
else if (!isNaN(data[j].value)) {
|
|
// value
|
|
valueData[mapType][name].value == null
|
|
&& (valueData[mapType][name].value = 0);
|
|
|
|
valueData[mapType][name].value += (+data[j].value);
|
|
valueData[mapType][name].valueMap[i] = +data[j].value;
|
|
}
|
|
}
|
|
//索引有该区域的系列样式
|
|
valueData[mapType][name].seriesIndex.push(i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this._mapDataRequireCounter = 0;
|
|
for (var mt in valueData) {
|
|
this._mapDataRequireCounter++;
|
|
}
|
|
//清空
|
|
this._clearSelected();
|
|
if (this._mapDataRequireCounter === 0) {
|
|
this.clear();
|
|
this.zr && this.zr.delShape(this.lastShapeList);
|
|
this.lastShapeList = [];
|
|
}
|
|
for (var mt in valueData) {
|
|
if (valueCalculation[mt] && valueCalculation[mt] == 'average') {
|
|
for (var k in valueData[mt]) {
|
|
valueData[mt][k].value =
|
|
(valueData[mt][k].value / valueData[mt][k].seriesIndex.length)
|
|
.toFixed(
|
|
mapValuePrecision[mt]
|
|
) - 0;
|
|
}
|
|
}
|
|
|
|
this._mapDataMap[mt] = this._mapDataMap[mt] || {};
|
|
|
|
if (this._mapDataMap[mt].mapData) {
|
|
// 已经缓存了则直接用
|
|
this._mapDataCallback(mt, valueData[mt], mapSeries[mt])(
|
|
this._mapDataMap[mt].mapData
|
|
);
|
|
}
|
|
else if (_mapParams[mt.replace(/\|.*/, '')].getGeoJson) {
|
|
// 特殊区域
|
|
this._specialArea[mt] =
|
|
_mapParams[mt.replace(/\|.*/, '')].specialArea
|
|
|| this._specialArea[mt];
|
|
_mapParams[mt.replace(/\|.*/, '')].getGeoJson(
|
|
this._mapDataCallback(mt, valueData[mt], mapSeries[mt])
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {string} mt mapType
|
|
* @parma {Object} vd valueData
|
|
* @param {Object} ms mapSeries
|
|
*/
|
|
_mapDataCallback : function (mt, vd, ms) {
|
|
var self = this;
|
|
return function (md) {
|
|
if (!self._isAlive || self._activeMapType[mt] == null) {
|
|
// 异步地图数据回调时有可能实例已经被释放
|
|
return;
|
|
}
|
|
// 缓存这份数据
|
|
if (mt.indexOf('|') != -1) {
|
|
// 子地图，加工一份新的mapData
|
|
md = self._getSubMapData(mt, md);
|
|
}
|
|
self._mapDataMap[mt].mapData = md;
|
|
|
|
if (md.firstChild) {
|
|
self._mapDataMap[mt].rate = 1;
|
|
self._mapDataMap[mt].projection = require('../util/projection/svg');
|
|
}
|
|
else {
|
|
self._mapDataMap[mt].rate = 0.75;
|
|
self._mapDataMap[mt].projection = require('../util/projection/normal');
|
|
}
|
|
|
|
self._buildMap(
|
|
mt, // 类型
|
|
self._getProjectionData(mt, md, ms), // 地图数据
|
|
vd, // 用户数据
|
|
ms // 系列
|
|
);
|
|
self._buildMark(mt, ms);
|
|
if (--self._mapDataRequireCounter <= 0) {
|
|
self.addShapeList();
|
|
self.zr.refreshNextFrame();
|
|
}
|
|
};
|
|
},
|
|
|
|
_clearSelected : function() {
|
|
for (var k in this._selected) {
|
|
if (!this._activeMapType[this._mapTypeMap[k]]) {
|
|
delete this._selected[k];
|
|
delete this._mapTypeMap[k];
|
|
}
|
|
}
|
|
},
|
|
|
|
_getSubMapData : function (mapType, mapData) {
|
|
var subType = mapType.replace(/^.*\|/, '');
|
|
var features = mapData.features;
|
|
for (var i = 0, l = features.length; i < l; i++) {
|
|
if (features[i].properties
|
|
&& features[i].properties.name == subType
|
|
) {
|
|
features = features[i];
|
|
if (subType == 'United States of America'
|
|
&& features.geometry.coordinates.length > 1 // 未被简化
|
|
) {
|
|
features = {
|
|
geometry: {
|
|
coordinates: features.geometry
|
|
.coordinates.slice(5,6),
|
|
type: features.geometry.type
|
|
},
|
|
id: features.id,
|
|
properties: features.properties,
|
|
type: features.type
|
|
};
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return {
|
|
'type' : 'FeatureCollection',
|
|
'features':[
|
|
features
|
|
]
|
|
};
|
|
},
|
|
|
|
/**
|
|
* 按需加载相关地图
|
|
*/
|
|
_getProjectionData : function (mapType, mapData, mapSeries) {
|
|
var normalProjection = this._mapDataMap[mapType].projection;
|
|
var province = [];
|
|
|
|
// bbox永远不变
|
|
var bbox = this._mapDataMap[mapType].bbox
|
|
|| normalProjection.getBbox(
|
|
mapData, this._specialArea[mapType]
|
|
);
|
|
//console.log(bbox)
|
|
|
|
var transform;
|
|
//console.log(1111,transform)
|
|
if (!this._mapDataMap[mapType].hasRoam) {
|
|
// 第一次或者发生了resize，需要判断
|
|
transform = this._getTransform(
|
|
bbox,
|
|
mapSeries,
|
|
this._mapDataMap[mapType].rate
|
|
);
|
|
}
|
|
else {
|
|
//经过用户漫游不再响应resize
|
|
transform = this._mapDataMap[mapType].transform;
|
|
}
|
|
//console.log(bbox,transform)
|
|
var lastTransform = this._mapDataMap[mapType].lastTransform
|
|
|| {scale:{}};
|
|
|
|
var pathArray;
|
|
if (transform.left != lastTransform.left
|
|
|| transform.top != lastTransform.top
|
|
|| transform.scale.x != lastTransform.scale.x
|
|
|| transform.scale.y != lastTransform.scale.y
|
|
) {
|
|
// 发生过变化，需要重新生成pathArray
|
|
// 一般投射
|
|
//console.log(transform)
|
|
pathArray = normalProjection.geoJson2Path(
|
|
mapData, transform, this._specialArea[mapType]
|
|
);
|
|
lastTransform = zrUtil.clone(transform);
|
|
}
|
|
else {
|
|
transform = this._mapDataMap[mapType].transform;
|
|
pathArray = this._mapDataMap[mapType].pathArray;
|
|
}
|
|
|
|
this._mapDataMap[mapType].bbox = bbox;
|
|
this._mapDataMap[mapType].transform = transform;
|
|
this._mapDataMap[mapType].lastTransform = lastTransform;
|
|
this._mapDataMap[mapType].pathArray = pathArray;
|
|
|
|
//console.log(pathArray)
|
|
var position = [transform.left, transform.top];
|
|
for (var i = 0, l = pathArray.length; i < l; i++) {
|
|
/* for test
|
|
console.log(
|
|
mapData.features[i].properties.cp, // 经纬度度
|
|
pathArray[i].cp // 平面坐标
|
|
);
|
|
console.log(
|
|
this.pos2geo(mapType, pathArray[i].cp), // 平面坐标转经纬度
|
|
this.geo2pos(mapType, mapData.features[i].properties.cp)
|
|
)
|
|
*/
|
|
province.push(this._getSingleProvince(
|
|
mapType, pathArray[i], position
|
|
));
|
|
}
|
|
|
|
if (this._specialArea[mapType]) {
|
|
for (var area in this._specialArea[mapType]) {
|
|
province.push(this._getSpecialProjectionData(
|
|
mapType, mapData,
|
|
area, this._specialArea[mapType][area],
|
|
position
|
|
));
|
|
}
|
|
|
|
}
|
|
|
|
// 中国地图加入南海诸岛
|
|
if (mapType == 'china') {
|
|
var leftTop = this.geo2pos(
|
|
mapType,
|
|
_geoCoord['南海诸岛'] || _mapParams['南海诸岛'].textCoord
|
|
);
|
|
// scale.x : width = 10.51 : 64
|
|
var scale = transform.scale.x / 10.5;
|
|
var textPosition = [
|
|
32 * scale + leftTop[0],
|
|
83 * scale + leftTop[1]
|
|
];
|
|
if (_textFixed['南海诸岛']) {
|
|
textPosition[0] += _textFixed['南海诸岛'][0];
|
|
textPosition[1] += _textFixed['南海诸岛'][1];
|
|
}
|
|
province.push({
|
|
name : this._nameChange(mapType, '南海诸岛'),
|
|
path : _mapParams['南海诸岛'].getPath(leftTop, scale),
|
|
position : position,
|
|
textX : textPosition[0],
|
|
textY : textPosition[1]
|
|
});
|
|
|
|
}
|
|
//console.log(JSON.stringify(province));
|
|
//console.log(JSON.stringify(this._mapDataMap[mapType].transform));
|
|
return province;
|
|
},
|
|
|
|
/**
|
|
* 特殊地区投射数据
|
|
*/
|
|
_getSpecialProjectionData : function (mapType, mapData, areaName, mapSize, position) {
|
|
//console.log('_getSpecialProjectionData--------------')
|
|
// 构造单独的geoJson地图数据
|
|
mapData = this._getSubMapData('x|' + areaName, mapData);
|
|
|
|
// bbox
|
|
var normalProjection = require('../util/projection/normal');
|
|
var bbox = normalProjection.getBbox(mapData);
|
|
//console.log('bbox', bbox)
|
|
|
|
// transform
|
|
var leftTop = this.geo2pos(
|
|
mapType,
|
|
[mapSize.left, mapSize.top]
|
|
);
|
|
var rightBottom = this.geo2pos(
|
|
mapType,
|
|
[mapSize.left + mapSize.width, mapSize.top + mapSize.height]
|
|
);
|
|
//console.log('leftright' , leftTop, rightBottom);
|
|
var width = Math.abs(rightBottom[0] - leftTop[0]);
|
|
var height = Math.abs(rightBottom[1] - leftTop[1]);
|
|
var mapWidth = bbox.width;
|
|
var mapHeight = bbox.height;
|
|
//var minScale;
|
|
var xScale = (width / 0.75) / mapWidth;
|
|
var yScale = height / mapHeight;
|
|
if (xScale > yScale) {
|
|
xScale = yScale * 0.75;
|
|
width = mapWidth * xScale;
|
|
}
|
|
else {
|
|
yScale = xScale;
|
|
xScale = yScale * 0.75;
|
|
height = mapHeight * yScale;
|
|
}
|
|
var transform = {
|
|
OffsetLeft : leftTop[0],
|
|
OffsetTop : leftTop[1],
|
|
//width: width,
|
|
//height: height,
|
|
scale : {
|
|
x : xScale,
|
|
y : yScale
|
|
}
|
|
};
|
|
|
|
//console.log('**',areaName, transform)
|
|
var pathArray = normalProjection.geoJson2Path(
|
|
mapData, transform
|
|
);
|
|
|
|
//console.log(pathArray)
|
|
return this._getSingleProvince(
|
|
mapType, pathArray[0], position
|
|
);
|
|
},
|
|
|
|
_getSingleProvince : function (mapType, path, position) {
|
|
var textPosition;
|
|
var name = path.properties.name;
|
|
var textFixed = _textFixed[name] || [0, 0];
|
|
if (_geoCoord[name]) {
|
|
// 经纬度直接定位不加textFixed
|
|
textPosition = this.geo2pos(
|
|
mapType,
|
|
_geoCoord[name]
|
|
);
|
|
}
|
|
else if (path.cp) {
|
|
textPosition = [
|
|
path.cp[0] + textFixed[0],
|
|
path.cp[1] + textFixed[1]
|
|
];
|
|
}
|
|
else {
|
|
var bbox = this._mapDataMap[mapType].bbox;
|
|
textPosition = this.geo2pos(
|
|
mapType,
|
|
[bbox.left + bbox.width / 2, bbox.top + bbox.height / 2]
|
|
);
|
|
textPosition[0] += textFixed[0];
|
|
textPosition[1] += textFixed[1];
|
|
}
|
|
|
|
//console.log(textPosition)
|
|
path.name = this._nameChange(mapType, name);
|
|
path.position = position;
|
|
path.textX = textPosition[0];
|
|
path.textY = textPosition[1];
|
|
return path;
|
|
},
|
|
|
|
/**
|
|
* 获取缩放
|
|
*/
|
|
_getTransform : function (bbox, mapSeries, rate) {
|
|
var series = this.series;
|
|
var mapLocation;
|
|
var x;
|
|
var cusX;
|
|
var y;
|
|
var cusY;
|
|
var width;
|
|
var height;
|
|
var zrWidth = this.zr.getWidth();
|
|
var zrHeight = this.zr.getHeight();
|
|
//上下左右留空
|
|
var padding = Math.round(Math.min(zrWidth, zrHeight) * 0.02);
|
|
for (var key in mapSeries) {
|
|
mapLocation = series[key].mapLocation || {};
|
|
cusX = mapLocation.x || cusX;
|
|
cusY = mapLocation.y || cusY;
|
|
width = mapLocation.width || width;
|
|
height = mapLocation.height || height;
|
|
}
|
|
|
|
//x = isNaN(cusX) ? padding : cusX;
|
|
x = this.parsePercent(cusX, zrWidth);
|
|
x = isNaN(x) ? padding : x;
|
|
//y = isNaN(cusY) ? padding : cusY;
|
|
y = this.parsePercent(cusY, zrHeight);
|
|
y = isNaN(y) ? padding : y;
|
|
|
|
width = width == null
|
|
? (zrWidth - x - 2 * padding)
|
|
: (this.parsePercent(width, zrWidth));
|
|
height = height == null
|
|
? (zrHeight - y - 2 * padding)
|
|
: (this.parsePercent(height, zrHeight));
|
|
|
|
var mapWidth = bbox.width;
|
|
var mapHeight = bbox.height;
|
|
//var minScale;
|
|
var xScale = (width / rate) / mapWidth;
|
|
var yScale = height / mapHeight;
|
|
if (xScale > yScale) {
|
|
//minScale = yScale;
|
|
xScale = yScale * rate;
|
|
width = mapWidth * xScale;
|
|
}
|
|
else {
|
|
//minScale = xScale;
|
|
yScale = xScale;
|
|
xScale = yScale * rate;
|
|
height = mapHeight * yScale;
|
|
}
|
|
//console.log(minScale)
|
|
//width = mapWidth * minScale;
|
|
//height = mapHeight * minScale;
|
|
|
|
if (isNaN(cusX)) {
|
|
cusX = cusX || 'center';
|
|
switch (cusX + '') {
|
|
case 'center' :
|
|
x = Math.floor((zrWidth - width) / 2);
|
|
break;
|
|
case 'right' :
|
|
x = zrWidth - width;
|
|
break;
|
|
//case 'left' :
|
|
//x = padding;
|
|
}
|
|
}
|
|
//console.log(cusX,x,zrWidth,width,'kener')
|
|
if (isNaN(cusY)) {
|
|
cusY = cusY || 'center';
|
|
switch (cusY + '') {
|
|
case 'center' :
|
|
y = Math.floor((zrHeight - height) / 2);
|
|
break;
|
|
case 'bottom' :
|
|
y = zrHeight - height;
|
|
break;
|
|
//case 'top' :
|
|
//y = padding;
|
|
}
|
|
}
|
|
//console.log(x,y,width,height)
|
|
return {
|
|
left : x,
|
|
top : y,
|
|
width: width,
|
|
height: height,
|
|
//scale : minScale * 50, // wtf 50
|
|
baseScale : 1,
|
|
scale : {
|
|
x : xScale,
|
|
y : yScale
|
|
}
|
|
//translate : [x + width / 2, y + height / 2]
|
|
};
|
|
},
|
|
|
|
/**
|
|
* 构建地图
|
|
* @param {Object} mapData 图形数据
|
|
* @param {Object} valueData 用户数据
|
|
*/
|
|
_buildMap : function (mapType, mapData, valueData, mapSeries) {
|
|
var series = this.series;
|
|
var legend = this.component.legend;
|
|
var dataRange = this.component.dataRange;
|
|
var seriesName;
|
|
var name;
|
|
var data;
|
|
var value;
|
|
var queryTarget;
|
|
|
|
var color;
|
|
var font;
|
|
var style;
|
|
var highlightStyle;
|
|
|
|
var shape;
|
|
var textShape;
|
|
for (var i = 0, l = mapData.length; i < l; i++) {
|
|
style = zrUtil.clone(mapData[i]);
|
|
highlightStyle = {
|
|
name : style.name,
|
|
path : style.path,
|
|
position : zrUtil.clone(style.position)
|
|
};
|
|
name = style.name;
|
|
data = valueData[name]; // 多系列合并后的数据
|
|
if (data) {
|
|
queryTarget = [data]; // level 3
|
|
seriesName = '';
|
|
for (var j = 0, k = data.seriesIndex.length; j < k; j++) {
|
|
// level 2
|
|
queryTarget.push(series[data.seriesIndex[j]]);
|
|
seriesName += series[data.seriesIndex[j]].name + ' ';
|
|
if (legend
|
|
&& this._showLegendSymbol[mapType]
|
|
&& legend.hasColor(series[data.seriesIndex[j]].name)
|
|
) {
|
|
this.shapeList.push(new CircleShape({
|
|
zlevel : this.getZlevelBase(),
|
|
z : this.getZBase() + 1,
|
|
position : zrUtil.clone(style.position),
|
|
_mapType : mapType,
|
|
/*
|
|
_geo : this.pos2geo(
|
|
mapType, [style.textX + 3 + j * 7, style.textY - 10]
|
|
),
|
|
*/
|
|
style : {
|
|
x : style.textX + 3 + j * 7,
|
|
y : style.textY - 10,
|
|
r : 3,
|
|
color : legend.getColor(
|
|
series[data.seriesIndex[j]].name
|
|
)
|
|
},
|
|
hoverable : false
|
|
}));
|
|
}
|
|
}
|
|
value = data.value;
|
|
}
|
|
else {
|
|
data = {
|
|
name: name,
|
|
value: '-'
|
|
};
|
|
seriesName = '';
|
|
queryTarget = [];
|
|
for (var key in mapSeries) {
|
|
queryTarget.push(series[key]);
|
|
}
|
|
value = '-';
|
|
}
|
|
this.ecTheme.map && queryTarget.push(this.ecTheme.map); // level 1
|
|
queryTarget.push(ecConfig); // level 1
|
|
|
|
// 值域控件控制
|
|
color = (dataRange && !isNaN(value))
|
|
? dataRange.getColor(value)
|
|
: null;
|
|
|
|
// 常规设置
|
|
style.color = style.color
|
|
|| color
|
|
|| this.getItemStyleColor(
|
|
this.deepQuery(queryTarget, 'itemStyle.normal.color'),
|
|
data.seriesIndex, -1, data
|
|
)
|
|
|| this.deepQuery(
|
|
queryTarget, 'itemStyle.normal.areaStyle.color'
|
|
);
|
|
style.strokeColor = style.strokeColor
|
|
|| this.deepQuery(queryTarget, 'itemStyle.normal.borderColor');
|
|
style.lineWidth = style.lineWidth
|
|
|| this.deepQuery(queryTarget, 'itemStyle.normal.borderWidth');
|
|
|
|
// 高亮
|
|
highlightStyle.color = this.getItemStyleColor(
|
|
this.deepQuery(queryTarget, 'itemStyle.emphasis.color'),
|
|
data.seriesIndex, -1, data
|
|
)
|
|
|| this.deepQuery(
|
|
queryTarget, 'itemStyle.emphasis.areaStyle.color'
|
|
)
|
|
|| style.color;
|
|
highlightStyle.strokeColor = this.deepQuery(
|
|
queryTarget, 'itemStyle.emphasis.borderColor'
|
|
)
|
|
|| style.strokeColor;
|
|
highlightStyle.lineWidth = this.deepQuery(
|
|
queryTarget, 'itemStyle.emphasis.borderWidth'
|
|
)
|
|
|| style.lineWidth;
|
|
|
|
style.brushType = highlightStyle.brushType = style.brushType || 'both';
|
|
style.lineJoin = highlightStyle.lineJoin = 'round';
|
|
style._name = highlightStyle._name = name;
|
|
|
|
font = this.deepQuery(queryTarget, 'itemStyle.normal.label.textStyle');
|
|
// 文字标签避免覆盖单独一个shape
|
|
textShape = {
|
|
zlevel : this.getZlevelBase(),
|
|
z : this.getZBase() + 1,
|
|
//hoverable: this._hoverable[mapType],
|
|
//clickable: this._clickable[mapType],
|
|
position : zrUtil.clone(style.position),
|
|
_mapType : mapType,
|
|
_geo : this.pos2geo(
|
|
mapType, [style.textX, style.textY]
|
|
),
|
|
style : {
|
|
brushType : 'fill',
|
|
x : style.textX,
|
|
y : style.textY,
|
|
text : this.getLabelText(name, value, queryTarget, 'normal'),
|
|
_name : name,
|
|
textAlign : 'center',
|
|
color : this.deepQuery(queryTarget, 'itemStyle.normal.label.show')
|
|
? this.deepQuery(
|
|
queryTarget,
|
|
'itemStyle.normal.label.textStyle.color'
|
|
)
|
|
: 'rgba(0,0,0,0)',
|
|
textFont : this.getFont(font)
|
|
}
|
|
};
|
|
textShape._style = zrUtil.clone(textShape.style);
|
|
|
|
textShape.highlightStyle = zrUtil.clone(textShape.style);
|
|
if (this.deepQuery(queryTarget, 'itemStyle.emphasis.label.show')) {
|
|
textShape.highlightStyle.text = this.getLabelText(
|
|
name, value, queryTarget, 'emphasis'
|
|
);
|
|
textShape.highlightStyle.color = this.deepQuery(
|
|
queryTarget,
|
|
'itemStyle.emphasis.label.textStyle.color'
|
|
) || textShape.style.color;
|
|
font = this.deepQuery(
|
|
queryTarget,
|
|
'itemStyle.emphasis.label.textStyle'
|
|
) || font;
|
|
textShape.highlightStyle.textFont = this.getFont(font);
|
|
}
|
|
else {
|
|
textShape.highlightStyle.color = 'rgba(0,0,0,0)';
|
|
}
|
|
|
|
shape = {
|
|
zlevel : this.getZlevelBase(),
|
|
z : this.getZBase(),
|
|
//hoverable: this._hoverable[mapType],
|
|
//clickable: this._clickable[mapType],
|
|
position : zrUtil.clone(style.position),
|
|
style : style,
|
|
highlightStyle : highlightStyle,
|
|
_style: zrUtil.clone(style),
|
|
_mapType: mapType
|
|
};
|
|
if (style.scale != null) {
|
|
shape.scale = zrUtil.clone(style.scale);
|
|
}
|
|
|
|
textShape = new TextShape(textShape);
|
|
switch (shape.style.shapeType) {
|
|
case 'rectangle' :
|
|
shape = new RectangleShape(shape);
|
|
break;
|
|
case 'line' :
|
|
shape = new LineShape(shape);
|
|
break;
|
|
case 'circle' :
|
|
shape = new CircleShape(shape);
|
|
break;
|
|
case 'polygon' :
|
|
shape = new PolygonShape(shape);
|
|
break;
|
|
case 'ellipse':
|
|
shape = new EllipseShape(shape);
|
|
break;
|
|
default :
|
|
shape = new PathShape(shape);
|
|
if (shape.buildPathArray) {
|
|
shape.style.pathArray = shape.buildPathArray(shape.style.path);
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (this._selectedMode[mapType] &&
|
|
this._selected[name]
|
|
|| (data.selected && this._selected[name] !== false)
|
|
) {
|
|
textShape.style = textShape.highlightStyle;
|
|
shape.style = shape.highlightStyle;
|
|
}
|
|
|
|
textShape.clickable = shape.clickable =
|
|
this._clickable[mapType]
|
|
&& (data.clickable == null || data.clickable);
|
|
|
|
if (this._selectedMode[mapType]) {
|
|
this._selected[name] = this._selected[name] != null
|
|
? this._selected[name]
|
|
: data.selected;
|
|
this._mapTypeMap[name] = mapType;
|
|
|
|
if (data.selectable == null || data.selectable) {
|
|
shape.clickable = textShape.clickable = true;
|
|
shape.onclick = textShape.onclick = this.shapeHandler.onclick;
|
|
}
|
|
}
|
|
|
|
if (this._hoverable[mapType]
|
|
&& (data.hoverable == null || data.hoverable)
|
|
) {
|
|
textShape.hoverable = shape.hoverable = true;
|
|
shape.hoverConnect = textShape.id;
|
|
textShape.hoverConnect = shape.id;
|
|
}
|
|
else {
|
|
textShape.hoverable = shape.hoverable = false;
|
|
}
|
|
|
|
// console.log(name,shape);
|
|
ecData.pack(
|
|
textShape,
|
|
{
|
|
name: seriesName,
|
|
tooltip: this.deepQuery(queryTarget, 'tooltip')
|
|
},
|
|
0,
|
|
data, 0,
|
|
name
|
|
);
|
|
this.shapeList.push(textShape);
|
|
|
|
ecData.pack(
|
|
shape,
|
|
{
|
|
name: seriesName,
|
|
tooltip: this.deepQuery(queryTarget, 'tooltip')
|
|
},
|
|
0,
|
|
data, 0,
|
|
name
|
|
);
|
|
this.shapeList.push(shape);
|
|
}
|
|
//console.log(this._selected);
|
|
},
|
|
|
|
// 添加标注
|
|
_buildMark : function (mapType, mapSeries) {
|
|
this._seriesIndexToMapType = this._seriesIndexToMapType || {};
|
|
this.markAttachStyle = this.markAttachStyle || {};
|
|
var position = [
|
|
this._mapDataMap[mapType].transform.left,
|
|
this._mapDataMap[mapType].transform.top
|
|
];
|
|
if (mapType == 'none') {
|
|
position = [0, 0];
|
|
}
|
|
for (var sIdx in mapSeries) {
|
|
this._seriesIndexToMapType[sIdx] = mapType;
|
|
this.markAttachStyle[sIdx] = {
|
|
position : position,
|
|
_mapType : mapType
|
|
};
|
|
this.buildMark(sIdx);
|
|
}
|
|
},
|
|
|
|
// 位置转换
|
|
getMarkCoord : function (seriesIndex, mpData) {
|
|
return (mpData.geoCoord || _geoCoord[mpData.name])
|
|
? this.geo2pos(
|
|
this._seriesIndexToMapType[seriesIndex],
|
|
mpData.geoCoord || _geoCoord[mpData.name]
|
|
)
|
|
: [0, 0];
|
|
},
|
|
|
|
getMarkGeo : function(mpData) {
|
|
return mpData.geoCoord || _geoCoord[mpData.name];
|
|
},
|
|
|
|
_nameChange : function (mapType, name) {
|
|
return this._nameMap[mapType][name] || name;
|
|
},
|
|
|
|
/**
|
|
* 根据lable.format计算label text
|
|
*/
|
|
getLabelText : function (name, value, queryTarget, status) {
|
|
var formatter = this.deepQuery(
|
|
queryTarget,
|
|
'itemStyle.' + status + '.label.formatter'
|
|
);
|
|
if (formatter) {
|
|
if (typeof formatter == 'function') {
|
|
return formatter.call(
|
|
this.myChart,
|
|
name,
|
|
value
|
|
);
|
|
}
|
|
else if (typeof formatter == 'string') {
|
|
formatter = formatter.replace('{a}','{a0}')
|
|
.replace('{b}','{b0}');
|
|
formatter = formatter.replace('{a0}', name)
|
|
.replace('{b0}', value);
|
|
return formatter;
|
|
}
|
|
}
|
|
else {
|
|
return name;
|
|
}
|
|
},
|
|
|
|
_findMapTypeByPos : function (mx, my) {
|
|
var transform;
|
|
var left;
|
|
var top;
|
|
var width;
|
|
var height;
|
|
for (var mapType in this._mapDataMap) {
|
|
transform = this._mapDataMap[mapType].transform;
|
|
if (!transform || !this._roamMap[mapType] || !this._activeMapType[mapType]) {
|
|
continue;
|
|
}
|
|
|
|
left = transform.left;
|
|
top = transform.top;
|
|
width = transform.width;
|
|
height = transform.height;
|
|
if (mx >= left
|
|
&& mx <= (left + width)
|
|
&& my >= top
|
|
&& my <= (top + height)
|
|
) {
|
|
return mapType;
|
|
}
|
|
}
|
|
return;
|
|
},
|
|
|
|
/**
|
|
* 滚轮缩放
|
|
*/
|
|
__onmousewheel : function (params) {
|
|
if (this.shapeList.length <= 0) {
|
|
return;
|
|
}
|
|
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
var shape = this.shapeList[i];
|
|
// If any shape is still animating
|
|
if (shape.__animating) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
var event = params.event;
|
|
var mx = zrEvent.getX(event);
|
|
var my = zrEvent.getY(event);
|
|
var delta;
|
|
var eventDelta = zrEvent.getDelta(event);
|
|
//eventDelta = eventDelta > 0 ? (-1) : 1;
|
|
var mapType;
|
|
var mapTypeControl = params.mapTypeControl;
|
|
if (!mapTypeControl) {
|
|
mapTypeControl = {};
|
|
mapType = this._findMapTypeByPos(mx, my);
|
|
if (mapType && this._roamMap[mapType] && this._roamMap[mapType] != 'move') {
|
|
mapTypeControl[mapType] = true;
|
|
}
|
|
}
|
|
|
|
function scalePolyline(shapeStyle, delta) {
|
|
for (var i = 0; i < shapeStyle.pointList.length; i++) {
|
|
var point = shapeStyle.pointList[i];
|
|
point[0] *= delta;
|
|
point[1] *= delta;
|
|
}
|
|
//If smoothness > 0
|
|
var controlPointList = shapeStyle.controlPointList;
|
|
if (controlPointList) {
|
|
for (var i = 0; i < controlPointList.length; i++) {
|
|
var point = controlPointList[i];
|
|
point[0] *= delta;
|
|
point[1] *= delta;
|
|
}
|
|
}
|
|
}
|
|
|
|
function scaleMarkline(shapeStyle, delta) {
|
|
shapeStyle.xStart *= delta;
|
|
shapeStyle.yStart *= delta;
|
|
shapeStyle.xEnd *= delta;
|
|
shapeStyle.yEnd *= delta;
|
|
if (shapeStyle.cpX1 != null) {
|
|
shapeStyle.cpX1 *= delta;
|
|
shapeStyle.cpY1 *= delta;
|
|
}
|
|
}
|
|
|
|
var haveScale = false;
|
|
for (mapType in mapTypeControl) {
|
|
if (mapTypeControl[mapType]) {
|
|
haveScale = true;
|
|
var transform = this._mapDataMap[mapType].transform;
|
|
var left = transform.left;
|
|
var top = transform.top;
|
|
var width = transform.width;
|
|
var height = transform.height;
|
|
// 位置转经纬度
|
|
var geoAndPos = this.pos2geo(mapType, [mx - left, my - top]);
|
|
if (eventDelta > 0) {
|
|
delta = 1.2; // 放大
|
|
if (this._scaleLimitMap[mapType].max != null
|
|
&& transform.baseScale >= this._scaleLimitMap[mapType].max
|
|
) {
|
|
continue; // 缩放限制
|
|
}
|
|
}
|
|
else {
|
|
delta = 1 / 1.2; // 缩小
|
|
if (this._scaleLimitMap[mapType].min != null
|
|
&& transform.baseScale <= this._scaleLimitMap[mapType].min
|
|
) {
|
|
continue; // 缩放限制
|
|
}
|
|
}
|
|
|
|
transform.baseScale *= delta;
|
|
transform.scale.x *= delta;
|
|
transform.scale.y *= delta;
|
|
transform.width = width * delta;
|
|
transform.height = height * delta;
|
|
|
|
this._mapDataMap[mapType].hasRoam = true;
|
|
this._mapDataMap[mapType].transform = transform;
|
|
// 经纬度转位置
|
|
geoAndPos = this.geo2pos(mapType, geoAndPos);
|
|
// 保持视觉中心
|
|
transform.left -= geoAndPos[0] - (mx - left);
|
|
transform.top -= geoAndPos[1] - (my - top);
|
|
this._mapDataMap[mapType].transform = transform;
|
|
|
|
this.clearEffectShape(true);
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
var shape = this.shapeList[i];
|
|
if(shape._mapType == mapType) {
|
|
var shapeType = shape.type;
|
|
var shapeStyle = shape.style;
|
|
shape.position[0] = transform.left;
|
|
shape.position[1] = transform.top;
|
|
|
|
switch (shapeType) {
|
|
case 'path':
|
|
case 'symbol':
|
|
case 'circle':
|
|
case 'rectangle':
|
|
case 'polygon':
|
|
case 'line':
|
|
case 'ellipse':
|
|
shape.scale[0] *= delta;
|
|
shape.scale[1] *= delta;
|
|
break;
|
|
case 'mark-line':
|
|
scaleMarkline(shapeStyle, delta);
|
|
break;
|
|
case 'polyline':
|
|
scalePolyline(shapeStyle, delta);
|
|
break;
|
|
case 'shape-bundle':
|
|
for (var j = 0; j < shapeStyle.shapeList.length; j++) {
|
|
var subShape = shapeStyle.shapeList[j];
|
|
if (subShape.type == 'mark-line') {
|
|
scaleMarkline(subShape.style, delta);
|
|
}
|
|
else if (subShape.type == 'polyline') {
|
|
scalePolyline(subShape.style, delta);
|
|
}
|
|
}
|
|
break;
|
|
case 'icon':
|
|
case 'image':
|
|
geoAndPos = this.geo2pos(mapType, shape._geo);
|
|
shapeStyle.x = shapeStyle._x =
|
|
geoAndPos[0] - shapeStyle.width / 2;
|
|
shapeStyle.y = shapeStyle._y =
|
|
geoAndPos[1] - shapeStyle.height / 2;
|
|
break;
|
|
default:
|
|
geoAndPos = this.geo2pos(mapType, shape._geo);
|
|
shapeStyle.x = geoAndPos[0];
|
|
shapeStyle.y = geoAndPos[1];
|
|
if (shapeType == 'text') {
|
|
shape._style.x = shape.highlightStyle.x
|
|
= geoAndPos[0];
|
|
shape._style.y = shape.highlightStyle.y
|
|
= geoAndPos[1];
|
|
}
|
|
}
|
|
|
|
this.zr.modShape(shape.id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (haveScale) {
|
|
zrEvent.stop(event);
|
|
this.zr.refreshNextFrame();
|
|
|
|
var self = this;
|
|
clearTimeout(this._refreshDelayTicket);
|
|
this._refreshDelayTicket = setTimeout(
|
|
function(){
|
|
self && self.shapeList && self.animationEffect();
|
|
},
|
|
100
|
|
);
|
|
|
|
this.messageCenter.dispatch(
|
|
ecConfig.EVENT.MAP_ROAM,
|
|
params.event,
|
|
{type : 'scale'},
|
|
this.myChart
|
|
);
|
|
}
|
|
},
|
|
|
|
__onmousedown : function (params) {
|
|
if (this.shapeList.length <= 0) {
|
|
return;
|
|
}
|
|
var target = params.target;
|
|
if (target && target.draggable) {
|
|
return;
|
|
}
|
|
var event = params.event;
|
|
var mx = zrEvent.getX(event);
|
|
var my = zrEvent.getY(event);
|
|
var mapType = this._findMapTypeByPos(mx, my);
|
|
if (mapType && this._roamMap[mapType] && this._roamMap[mapType] != 'scale') {
|
|
this._mousedown = true;
|
|
this._mx = mx;
|
|
this._my = my;
|
|
this._curMapType = mapType;
|
|
this.zr.on(zrConfig.EVENT.MOUSEUP, this._onmouseup);
|
|
var self = this;
|
|
setTimeout(function (){
|
|
self.zr.on(zrConfig.EVENT.MOUSEMOVE, self._onmousemove);
|
|
},100);
|
|
}
|
|
|
|
},
|
|
|
|
__onmousemove : function (params) {
|
|
if (!this._mousedown || !this._isAlive) {
|
|
return;
|
|
}
|
|
var event = params.event;
|
|
var mx = zrEvent.getX(event);
|
|
var my = zrEvent.getY(event);
|
|
var transform = this._mapDataMap[this._curMapType].transform;
|
|
transform.hasRoam = true;
|
|
transform.left -= this._mx - mx;
|
|
transform.top -= this._my - my;
|
|
this._mx = mx;
|
|
this._my = my;
|
|
this._mapDataMap[this._curMapType].transform = transform;
|
|
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
if(this.shapeList[i]._mapType == this._curMapType) {
|
|
this.shapeList[i].position[0] = transform.left;
|
|
this.shapeList[i].position[1] = transform.top;
|
|
this.zr.modShape(this.shapeList[i].id);
|
|
}
|
|
}
|
|
|
|
this.messageCenter.dispatch(
|
|
ecConfig.EVENT.MAP_ROAM,
|
|
params.event,
|
|
{type : 'move'},
|
|
this.myChart
|
|
);
|
|
|
|
this.clearEffectShape(true);
|
|
this.zr.refreshNextFrame();
|
|
|
|
this._justMove = true;
|
|
zrEvent.stop(event);
|
|
},
|
|
|
|
__onmouseup : function (params) {
|
|
var event = params.event;
|
|
this._mx = zrEvent.getX(event);
|
|
this._my = zrEvent.getY(event);
|
|
this._mousedown = false;
|
|
var self = this;
|
|
setTimeout(function (){
|
|
self._justMove && self.animationEffect();
|
|
self._justMove = false;
|
|
self.zr.un(zrConfig.EVENT.MOUSEMOVE, self._onmousemove);
|
|
self.zr.un(zrConfig.EVENT.MOUSEUP, self._onmouseup);
|
|
},120);
|
|
},
|
|
|
|
/**
|
|
* 漫游组件事件响应
|
|
*/
|
|
__onroamcontroller: function(params) {
|
|
var event = params.event;
|
|
event.zrenderX = this.zr.getWidth() / 2;
|
|
event.zrenderY = this.zr.getHeight() / 2;
|
|
var mapTypeControl = params.mapTypeControl;
|
|
var top = 0;
|
|
var left = 0;
|
|
var step = params.step;
|
|
|
|
switch(params.roamType) {
|
|
case 'scaleUp':
|
|
event.zrenderDelta = 1;
|
|
this.__onmousewheel({
|
|
event: event,
|
|
mapTypeControl: mapTypeControl
|
|
});
|
|
return;
|
|
case 'scaleDown':
|
|
event.zrenderDelta = -1;
|
|
this.__onmousewheel({
|
|
event: event,
|
|
mapTypeControl: mapTypeControl
|
|
});
|
|
return;
|
|
case 'up':
|
|
top = -step;
|
|
break;
|
|
case 'down':
|
|
top = step;
|
|
break;
|
|
case 'left':
|
|
left = -step;
|
|
break;
|
|
case 'right':
|
|
left = step;
|
|
break;
|
|
}
|
|
|
|
var transform;
|
|
var curMapType;
|
|
for (curMapType in mapTypeControl) {
|
|
if (!this._mapDataMap[curMapType] || !this._activeMapType[curMapType]) {
|
|
continue;
|
|
}
|
|
transform = this._mapDataMap[curMapType].transform;
|
|
transform.hasRoam = true;
|
|
transform.left -= left;
|
|
transform.top -= top;
|
|
this._mapDataMap[curMapType].transform = transform;
|
|
}
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
curMapType = this.shapeList[i]._mapType;
|
|
if (!mapTypeControl[curMapType] || !this._activeMapType[curMapType]) {
|
|
continue;
|
|
}
|
|
transform = this._mapDataMap[curMapType].transform;
|
|
this.shapeList[i].position[0] = transform.left;
|
|
this.shapeList[i].position[1] = transform.top;
|
|
this.zr.modShape(this.shapeList[i].id);
|
|
}
|
|
|
|
this.messageCenter.dispatch(
|
|
ecConfig.EVENT.MAP_ROAM,
|
|
params.event,
|
|
{type : 'move'},
|
|
this.myChart
|
|
);
|
|
|
|
this.clearEffectShape(true);
|
|
this.zr.refreshNextFrame();
|
|
|
|
clearTimeout(this.dircetionTimer);
|
|
var self = this;
|
|
this.dircetionTimer = setTimeout(function() {
|
|
self.animationEffect();
|
|
}, 150);
|
|
},
|
|
|
|
/**
|
|
* dataRange hoverlink 事件响应
|
|
*/
|
|
__ondrhoverlink : function(param) {
|
|
var curMapType;
|
|
var value;
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
curMapType = this.shapeList[i]._mapType;
|
|
if (!this._hoverLinkMap[curMapType] || !this._activeMapType[curMapType]) {
|
|
continue;
|
|
}
|
|
value = ecData.get(this.shapeList[i], 'value');
|
|
if (value != null && value >= param.valueMin && value <= param.valueMax) {
|
|
this.zr.addHoverShape(this.shapeList[i]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 点击响应
|
|
*/
|
|
onclick : function (params) {
|
|
if (!this.isClick || !params.target || this._justMove || params.target.type == 'icon') {
|
|
// 没有在当前实例上发生点击直接返回
|
|
return;
|
|
}
|
|
this.isClick = false;
|
|
|
|
var target = params.target;
|
|
var name = target.style._name;
|
|
var len = this.shapeList.length;
|
|
var mapType = target._mapType || '';
|
|
|
|
if (this._selectedMode[mapType] == 'single') {
|
|
for (var p in this._selected) {
|
|
// 同一地图类型
|
|
if (this._selected[p] && this._mapTypeMap[p] == mapType) {
|
|
// 复位那些生效shape（包括文字）
|
|
for (var i = 0; i < len; i++) {
|
|
if (this.shapeList[i].style._name == p
|
|
&& this.shapeList[i]._mapType == mapType
|
|
) {
|
|
this.shapeList[i].style = this.shapeList[i]._style;
|
|
this.zr.modShape(this.shapeList[i].id);
|
|
}
|
|
}
|
|
p != name && (this._selected[p] = false);
|
|
}
|
|
}
|
|
}
|
|
|
|
this._selected[name] = !this._selected[name];
|
|
|
|
// 更新当前点击shape（包括文字）
|
|
for (var i = 0; i < len; i++) {
|
|
if (this.shapeList[i].style._name == name
|
|
&& this.shapeList[i]._mapType == mapType
|
|
) {
|
|
if (this._selected[name]) {
|
|
this.shapeList[i].style = this.shapeList[i].highlightStyle;
|
|
}
|
|
else {
|
|
this.shapeList[i].style = this.shapeList[i]._style;
|
|
}
|
|
this.zr.modShape(this.shapeList[i].id);
|
|
}
|
|
}
|
|
this.messageCenter.dispatch(
|
|
ecConfig.EVENT.MAP_SELECTED,
|
|
params.event,
|
|
{
|
|
selected : this._selected,
|
|
target : name
|
|
},
|
|
this.myChart
|
|
);
|
|
this.zr.refreshNextFrame();
|
|
|
|
var self = this;
|
|
setTimeout(function(){
|
|
self.zr.trigger(
|
|
zrConfig.EVENT.MOUSEMOVE,
|
|
params.event
|
|
);
|
|
},100);
|
|
},
|
|
|
|
/**
|
|
* 刷新
|
|
*/
|
|
refresh : function (newOption) {
|
|
if (newOption) {
|
|
this.option = newOption;
|
|
this.series = newOption.series;
|
|
}
|
|
|
|
if (this._mapDataRequireCounter > 0) {
|
|
this.clear();
|
|
}
|
|
else {
|
|
this.backupShapeList();
|
|
}
|
|
this._buildShape();
|
|
this.zr.refreshHover();
|
|
},
|
|
|
|
/**
|
|
* 值域响应
|
|
* @param {Object} param
|
|
* @param {Object} status
|
|
*/
|
|
ondataRange : function (param, status) {
|
|
if (this.component.dataRange) {
|
|
this.refresh();
|
|
status.needRefresh = true;
|
|
}
|
|
return;
|
|
},
|
|
|
|
/**
|
|
* 平面坐标转经纬度
|
|
*/
|
|
pos2geo : function (mapType, p) {
|
|
if (!this._mapDataMap[mapType].transform) {
|
|
return null;
|
|
}
|
|
return this._mapDataMap[mapType].projection.pos2geo(
|
|
this._mapDataMap[mapType].transform, p
|
|
);
|
|
},
|
|
|
|
/**
|
|
* 公开接口 : 平面坐标转经纬度
|
|
*/
|
|
getGeoByPos : function (mapType, p) {
|
|
if (!this._mapDataMap[mapType].transform) {
|
|
return null;
|
|
}
|
|
var position = [
|
|
this._mapDataMap[mapType].transform.left,
|
|
this._mapDataMap[mapType].transform.top
|
|
];
|
|
if (p instanceof Array) {
|
|
p[0] -= position[0];
|
|
p[1] -= position[1];
|
|
}
|
|
else {
|
|
p.x -= position[0];
|
|
p.y -= position[1];
|
|
}
|
|
return this.pos2geo(mapType, p);
|
|
},
|
|
|
|
/**
|
|
* 经纬度转平面坐标
|
|
* @param {Object} p
|
|
*/
|
|
geo2pos : function (mapType, p) {
|
|
if (!this._mapDataMap[mapType].transform) {
|
|
return null;
|
|
}
|
|
return this._mapDataMap[mapType].projection.geo2pos(
|
|
this._mapDataMap[mapType].transform, p
|
|
);
|
|
},
|
|
|
|
/**
|
|
* 公开接口 : 经纬度转平面坐标
|
|
*/
|
|
getPosByGeo : function (mapType, p) {
|
|
if (!this._mapDataMap[mapType].transform) {
|
|
return null;
|
|
}
|
|
var pos = this.geo2pos(mapType, p);
|
|
pos[0] += this._mapDataMap[mapType].transform.left;
|
|
pos[1] += this._mapDataMap[mapType].transform.top;
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* 公开接口 : 地图参考坐标
|
|
*/
|
|
getMapPosition : function (mapType) {
|
|
if (!this._mapDataMap[mapType].transform) {
|
|
return null;
|
|
}
|
|
return [
|
|
this._mapDataMap[mapType].transform.left,
|
|
this._mapDataMap[mapType].transform.top
|
|
];
|
|
},
|
|
|
|
/*
|
|
appendShape : function (mapType, shapeList) {
|
|
shapeList = shapeList instanceof Array
|
|
? shapeList : [shapeList];
|
|
for (var i = 0, l = shapeList.length; i < l; i++) {
|
|
if (typeof shapeList[i].zlevel == 'undefined') {
|
|
shapeList[i].zlevel = this.getZlevelBase();
|
|
shapeList[i].z = this.getZBase() + 1;
|
|
}
|
|
shapeList[i]._mapType = mapType;
|
|
this.shapeList.push(shapeList[i]);
|
|
this.zr.addShape(shapeList[i]);
|
|
}
|
|
this.zr.refresh();
|
|
},
|
|
*/
|
|
|
|
/**
|
|
* 释放后实例不可用
|
|
*/
|
|
onbeforDispose : function () {
|
|
this._isAlive = false;
|
|
this.zr.un(zrConfig.EVENT.MOUSEWHEEL, this._onmousewheel);
|
|
this.zr.un(zrConfig.EVENT.MOUSEDOWN, this._onmousedown);
|
|
this.messageCenter.unbind(
|
|
ecConfig.EVENT.ROAMCONTROLLER, this._onroamcontroller
|
|
);
|
|
this.messageCenter.unbind(
|
|
ecConfig.EVENT.DATA_RANGE_HOVERLINK, this._ondrhoverlink
|
|
);
|
|
}
|
|
};
|
|
|
|
zrUtil.inherits(Map, ChartBase);
|
|
|
|
// 图表注册
|
|
require('../chart').define('map', Map);
|
|
|
|
return Map;
|
|
});
|