Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
d1789948
I
incubator-echarts
项目概览
x649585723
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
d1789948
编写于
12月 13, 2013
作者:
K
kener
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
【地图升级】支持缩放和拖拽漫游
上级
2bf50aee
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
249 addition
and
19 deletion
+249
-19
doc/asset/js/echartsExample.js
doc/asset/js/echartsExample.js
+4
-0
doc/example/map4.html
doc/example/map4.html
+1
-0
src/chart/map.js
src/chart/map.js
+244
-19
未找到文件。
doc/asset/js/echartsExample.js
浏览文件 @
d1789948
...
...
@@ -47,6 +47,10 @@ function refresh(isBtnRefresh){
return
;
}
needRefresh
=
false
;
if
(
myChart
&&
myChart
.
dispose
)
{
myChart
.
dispose
();
}
myChart
=
echarts
.
init
(
domMain
);
(
new
Function
(
editor
.
doc
.
getValue
()))();
myChart
.
setOption
(
option
,
true
);
domMessage
.
innerHTML
=
''
;
...
...
doc/example/map4.html
浏览文件 @
d1789948
...
...
@@ -81,6 +81,7 @@ option = {
name: '世界地图',
type: 'map',mapLocation:{width:2000},
mapType: 'world',
roam: true,
selectedMode : 'single',
itemStyle:{
normal:{label:{show:false}},
...
...
src/chart/map.js
浏览文件 @
d1789948
...
...
@@ -24,7 +24,10 @@ define(function(require) {
var
ecConfig
=
require
(
'
../config
'
);
var
ecData
=
require
(
'
../util/ecData
'
);
var
zrConfig
=
require
(
'
zrender/config
'
);
var
zrUtil
=
require
(
'
zrender/tool/util
'
);
var
zrArea
=
require
(
'
zrender/tool/area
'
);
var
zrEvent
=
require
(
'
zrender/tool/event
'
);
var
self
=
this
;
self
.
type
=
ecConfig
.
CHART_TYPE_MAP
;
...
...
@@ -35,14 +38,23 @@ define(function(require) {
var
_selectedMode
;
// 选择模式
var
_selected
=
{};
// 地图选择状态
var
_mapTypeMap
=
{};
// 图例类型索引
var
_
transformMap
=
{};
// 根据地图类型索引transform
var
_
mapDataMap
=
{};
// 根据地图类型索引bbox,transform,path
var
_nameMap
=
{};
// 个性化地名
var
_refreshDelayTicket
;
// 滚轮缩放时让refresh飞一会
var
_mapDataRequireCounter
;
var
_mapParams
=
require
(
'
../util/mapData/params
'
);
var
_textFixed
=
require
(
'
../util/mapData/textFixed
'
);
var
_geoCoord
=
require
(
'
../util/mapData/geoCoord
'
);
// 漫游相关信息
var
_roamMap
=
{};
var
_mx
;
var
_my
;
var
_mousedown
;
var
_justMove
;
// 避免移动响应点击
var
_curMapType
;
// 当前移动的地图类型
function
_buildShape
()
{
self
.
selectedMap
=
{};
...
...
@@ -61,6 +73,7 @@ define(function(require) {
mapType
=
series
[
i
].
mapType
;
mapSeries
[
mapType
]
=
mapSeries
[
mapType
]
||
{};
mapSeries
[
mapType
][
i
]
=
true
;
_roamMap
[
mapType
]
=
series
[
i
].
roam
;
_nameMap
[
mapType
]
=
series
[
i
].
nameMap
||
_nameMap
[
mapType
]
||
{};
...
...
@@ -114,6 +127,9 @@ define(function(require) {
}
_mapDataRequireCounter
=
0
;
for
(
var
mt
in
valueData
)
{
_mapDataRequireCounter
++
;
}
for
(
var
mt
in
valueData
)
{
if
(
valueCalculation
[
mt
]
&&
valueCalculation
[
mt
]
==
'
average
'
)
{
for
(
var
k
in
valueData
[
mt
])
{
...
...
@@ -132,7 +148,15 @@ define(function(require) {
}
}
}
if
(
_mapParams
[
mt
].
getData
)
{
_mapDataMap
[
mt
]
=
_mapDataMap
[
mt
]
||
{};
if
(
_mapDataMap
[
mt
].
mapData
)
{
// 已经缓存了则直接用
_mapDataCallback
(
mt
,
valueData
[
mt
],
mapSeries
[
mt
])(
_mapDataMap
[
mt
].
mapData
)
}
else
if
(
_mapParams
[
mt
].
getData
)
{
_mapParams
[
mt
].
getData
(
_mapDataCallback
(
mt
,
valueData
[
mt
],
mapSeries
[
mt
])
);
...
...
@@ -146,8 +170,8 @@ define(function(require) {
* @param {Object} ms mapSeries
*/
function
_mapDataCallback
(
mt
,
vd
,
ms
)
{
_mapDataRequireCounter
++
;
return
function
(
md
)
{
_mapDataMap
[
mt
].
mapData
=
md
;
// 缓存这份数据
_buildMap
(
mt
,
// 类型
_getProjectionData
(
// 地图数据
...
...
@@ -176,18 +200,56 @@ define(function(require) {
var
single
;
var
textPosition
;
var
bbox
=
_getBbox
(
mapData
);
// bbox永远不变
var
bbox
=
_mapDataMap
[
mapType
].
bbox
||
_getBbox
(
mapData
);
//console.log(bbox)
var
transform
=
_getTransform
(
var
transform
;
//console.log(1111,transform)
console
.
log
(
'
-------------
'
)
if
(
!
_mapDataMap
[
mapType
].
hasRoam
)
{
// 第一次或者发生了resize,需要判断
transform
=
_getTransform
(
bbox
,
mapSeries
);
//console.log(1111,transform)
console
.
log
(
1
)
}
else
{
//经过用户漫游不再响应resize
transform
=
_mapDataMap
[
mapType
].
transform
;
console
.
log
(
2
)
}
var
lastTransform
=
_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
// 一般投射
var
normalProjection
=
require
(
'
../util/projection/normal
'
);
var
pathArray
=
normalProjection
.
geoJson2Path
(
mapData
,
transform
);
console
.
log
(
transform
)
pathArray
=
require
(
'
../util/projection/normal
'
).
geoJson2Path
(
mapData
,
transform
);
lastTransform
=
zrUtil
.
clone
(
transform
);
console
.
log
(
3
)
}
else
{
transform
=
_mapDataMap
[
mapType
].
transform
;
pathArray
=
_mapDataMap
[
mapType
].
pathArray
;
console
.
log
(
4
)
}
_mapDataMap
[
mapType
].
bbox
=
bbox
;
_mapDataMap
[
mapType
].
transform
=
transform
;
_mapDataMap
[
mapType
].
lastTransform
=
lastTransform
;
_mapDataMap
[
mapType
].
pathArray
=
pathArray
;
_transformMap
[
mapType
]
=
transform
;
//console.log(pathArray)
var
name
;
var
position
=
[
transform
.
left
,
transform
.
top
];
...
...
@@ -233,8 +295,6 @@ define(function(require) {
};
province
.
push
(
single
);
}
//console.log(province)
return
province
;
}
...
...
@@ -421,6 +481,7 @@ define(function(require) {
shape
:
'
circle
'
,
zlevel
:
_zlevelBase
+
1
,
position
:
style
.
position
,
_mapType
:
mapType
,
style
:
{
x
:
style
.
textX
+
3
+
j
*
7
,
y
:
style
.
textY
-
10
,
...
...
@@ -497,6 +558,7 @@ define(function(require) {
hoverable
:
tooSmall
,
clickable
:
tooSmall
,
position
:
style
.
position
,
_mapType
:
mapType
,
style
:
{
brushType
:
'
both
'
,
x
:
style
.
textX
,
...
...
@@ -619,11 +681,151 @@ define(function(require) {
function
_nameChange
(
mapType
,
name
)
{
return
_nameMap
[
mapType
][
name
]
||
name
;
}
function
_findMapTypeByPos
(
mx
,
my
)
{
var
transform
;
var
left
;
var
top
;
var
width
;
var
height
;
var
geoAndPos
;
for
(
var
mapType
in
_mapDataMap
)
{
transform
=
_mapDataMap
[
mapType
].
transform
;
if
(
!
transform
||
!
_roamMap
[
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
;
}
/**
* 滚轮缩放
*/
function
_onmousewheel
(
param
)
{
var
event
=
param
.
event
;
var
mx
=
zrEvent
.
getX
(
event
);
var
my
=
zrEvent
.
getY
(
event
);
var
delta
=
zrEvent
.
getDelta
(
event
);
//delta = delta > 0 ? (-1) : 1;
var
mapType
=
_findMapTypeByPos
(
mx
,
my
);
if
(
mapType
)
{
var
transform
=
_mapDataMap
[
mapType
].
transform
;
var
left
=
transform
.
left
;
var
top
=
transform
.
top
;
var
width
=
transform
.
width
;
var
height
=
transform
.
height
;
// 位置转经纬度
geoAndPos
=
pos2geo
(
mapType
,
[
mx
-
left
,
my
-
top
]);
if
(
delta
>
0
)
{
delta
=
1.2
;
// 放大
transform
.
scale
.
x
*=
delta
;
transform
.
scale
.
y
*=
delta
;
transform
.
width
=
width
*
delta
;
transform
.
height
=
height
*
delta
;
//transform.left = left - (transform.width - width) / 2;
//transform.top = top - (transform.height - height) / 2;
}
else
{
// 缩小
delta
=
1.2
;
transform
.
scale
.
x
/=
delta
;
transform
.
scale
.
y
/=
delta
;
transform
.
width
=
width
/
delta
;
transform
.
height
=
height
/
delta
;
//transform.left = left + (width - transform.width) / 2;
//transform.top = top + (height - transform.height) / 2;
}
_mapDataMap
[
mapType
].
hasRoam
=
true
;
_mapDataMap
[
mapType
].
transform
=
transform
;
// 经纬度转位置
geoAndPos
=
geo2pos
(
mapType
,
geoAndPos
);
// 保持视觉中心
transform
.
left
-=
geoAndPos
[
0
]
-
(
mx
-
left
);
transform
.
top
-=
geoAndPos
[
1
]
-
(
my
-
top
);
_mapDataMap
[
mapType
].
transform
=
transform
;
// 让refresh飞一会
clearTimeout
(
_refreshDelayTicket
);
_refreshDelayTicket
=
setTimeout
(
refresh
,
100
);
zrEvent
.
stop
(
event
);
}
}
function
_onmousedown
(
param
)
{
var
event
=
param
.
event
;
var
mx
=
zrEvent
.
getX
(
event
);
var
my
=
zrEvent
.
getY
(
event
);
var
mapType
=
_findMapTypeByPos
(
mx
,
my
);
if
(
mapType
)
{
_mousedown
=
true
;
_mx
=
mx
;
_my
=
my
;
_curMapType
=
mapType
;
setTimeout
(
function
(){
zr
.
on
(
zrConfig
.
EVENT
.
MOUSEMOVE
,
_onmousemove
);
zr
.
on
(
zrConfig
.
EVENT
.
MOUSEUP
,
_onmouseup
);
},
50
)
}
}
function
_onmousemove
(
param
)
{
if
(
!
_mousedown
)
{
return
;
}
var
event
=
param
.
event
;
var
mx
=
zrEvent
.
getX
(
event
);
var
my
=
zrEvent
.
getY
(
event
);
var
transform
=
_mapDataMap
[
_curMapType
].
transform
;
transform
.
hasRoam
=
true
;
transform
.
left
-=
_mx
-
mx
;
transform
.
top
-=
_my
-
my
;
_mx
=
mx
;
_my
=
my
;
_mapDataMap
[
_curMapType
].
transform
=
transform
;
var
position
=
[
transform
.
left
,
transform
.
top
];
for
(
var
i
=
0
,
l
=
self
.
shapeList
.
length
;
i
<
l
;
i
++
)
{
if
(
self
.
shapeList
[
i
].
_mapType
==
_curMapType
)
{
self
.
shapeList
[
i
].
position
=
position
;
zr
.
modShape
(
self
.
shapeList
[
i
].
id
,
self
.
shapeList
[
i
]);
}
}
zr
.
refresh
();
_justMove
=
true
;
zrEvent
.
stop
(
event
);
}
function
_onmouseup
(
param
)
{
console
.
log
(
'
up
'
)
var
event
=
param
.
event
;
_mx
=
zrEvent
.
getX
(
event
);
_my
=
zrEvent
.
getY
(
event
);
_mousedown
=
false
;
setTimeout
(
function
(){
_justMove
=
false
;
zr
.
un
(
zrConfig
.
EVENT
.
MOUSEMOVE
,
_onmousemove
);
zr
.
un
(
zrConfig
.
EVENT
.
MOUSEUP
,
_onmouseup
);
},
100
);
}
/**
* 点击响应
*/
function
onclick
(
param
)
{
if
(
!
self
.
isClick
||
!
param
.
target
)
{
console
.
log
(
'
click
'
)
if
(
!
self
.
isClick
||
!
param
.
target
||
_justMove
)
{
// 没有在当前实例上发生点击直接返回
return
;
}
...
...
@@ -688,22 +890,31 @@ define(function(require) {
component
=
newComponent
;
_selected
=
{};
_mapTypeMap
=
{};
_
transform
Map
=
{};
_
mapData
Map
=
{};
_nameMap
=
{};
_roamMap
=
{};
refresh
(
newOption
);
zr
.
on
(
zrConfig
.
EVENT
.
MOUSEWHEEL
,
_onmousewheel
);
zr
.
on
(
zrConfig
.
EVENT
.
MOUSEDOWN
,
_onmousedown
);
}
/**
* 刷新
*/
function
refresh
(
newOption
)
{
if
(
!
self
)
{
console
.
log
(
11111111111111
)
return
;
}
if
(
newOption
)
{
option
=
newOption
;
series
=
option
.
series
;
}
self
.
clear
();
_buildShape
();
zr
.
refreshHover
();
}
/**
...
...
@@ -724,7 +935,7 @@ define(function(require) {
*/
function
pos2geo
(
mapType
,
p
)
{
return
require
(
'
../util/projection/normal
'
).
pos2geo
(
_
transformMap
[
mapType
]
,
p
_
mapDataMap
[
mapType
].
transform
,
p
);
}
...
...
@@ -734,10 +945,24 @@ define(function(require) {
*/
function
geo2pos
(
mapType
,
p
)
{
return
require
(
'
../util/projection/normal
'
).
geo2pos
(
_
transformMap
[
mapType
]
,
p
_
mapDataMap
[
mapType
].
transform
,
p
);
}
/**
* 释放后实例不可用
*/
function
dispose
()
{
console
.
log
(
123123131313
)
self
.
clear
();
self
.
shapeList
=
null
;
self
=
null
;
zr
.
un
(
zrConfig
.
EVENT
.
MOUSEWHEEL
,
_onmousewheel
);
zr
.
un
(
zrConfig
.
EVENT
.
MOUSEDOWN
,
_onmousedown
);
}
// 重载基类方法
self
.
dispose
=
dispose
;
self
.
init
=
init
;
self
.
refresh
=
refresh
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录