1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
| '手动实现的一个小地图'
function CanvasMap(render,mapdata){
this.render = render;
this.mapdata=mapdata;
this.bound = this.returnMinXY(mapdata);
console.log(mapdata,this.bound)
var _my = this;
var x1,y1,x2,y2;
this.render.on("mousedown",function(evt){
x1 = evt.offsetX;
y1 = evt.offsetY;
});
this.render.on("mouseup",function(evt){
x2 = evt.offsetX;
y2 = evt.offsetY;
var xfactor = x2-x1;
var yfactor = y2-y1;
_my.render.clear();
_my.move(_my.mapdata,xfactor,yfactor);
for (var i=0;i<_my.mapdata.features.length;i++){
_my.addgeometry(_my.mapdata.features[i],false);
}
});
this.render.on("mousewheel",function(evt){
// console.log(evt);
var x = evt.offsetX;
var y = evt.offsetY;//距离容器
var scalefactor = 1.2;
evt.wheelDelta = evt.wheelDelta ? evt.wheelDelta : (evt.deltalY * (-40)); //获取当前鼠标的滚动情况
if (evt.wheelDelta > 0) {
scalefactor *= 2;
} else {
scalefactor /= 2;
}
console.log(evt.wheelDelta)
var sx = scalefactor*x;
var sy = scalefactor*y;
var sdisx =sx-x;
var sdisy = sy-y;
_my.sacle(_my.mapdata,scalefactor,sdisx,sdisy);
_my.render.clear();
for (var i=0;i<_my.mapdata.features.length;i++){
_my.addgeometry(_my.mapdata.features[i],false);
}
});
}
/**
*
* @param {一个geojson文件的对象} obj
*/
CanvasMap.prototype.returnMinXY=function(obj){
var factor = 20;
var features = obj.features,feature = null,coor = null;
var t = features[0].geometry.coordinates;
var minx=t[0][0][0],miny=t[0][0][1],maxx=t[0][0][0],maxy=t[0][0][1];
for (var z=0;z<features.length;z++){
feature=features[z];
coor = feature.geometry.coordinates;
for (var i=0;i<coor.length;i++){
for (var j=0;j<coor[i].length;j++){
var coo = coor[i][j];
if (minx >coo[0] ){
minx = coo[0];
}
if (maxx <coo[0]){
maxx = coo[0];
}
if (miny >coo[1]){
miny = coo[1];
}
if (maxy <coo[1]){
maxy = coo[1];
}
}
}
}
return {
minx:minx,
miny:miny,
maxx:maxx,
maxy:maxy
}
}
/**
* 坐标转换
* 函数思路是这个样子的
* 首先找出这里面的最左上角的坐标
* 之后minx maxy
* 之后算出点坐标与 左上角点的距离也就是曼哈顿距离 dx dy
* 之后把距离扩大扩大的factor为宽度的比
* @param {*} geometry
* @param {*} bound
*/
CanvasMap.prototype.changecoordinate = function(geometry,bound){
// 获取外界矩形
var factor = 400/(bound.maxy-bound.miny);//获取外边界
var minx=bound.minx,miny=bound.miny,maxx=bound.maxx,maxy=bound.maxy;
// //获得了外接矩形
var coor = geometry.coordinates;
var disx = 0,disy = 0;
for (var i=0;i<coor.length;i++){
for (var j=0;j<coor[i].length;j++){
var coo = coor[i][j];
disx = coo[0]-minx;
disy = maxy - coo[1];
coor[i][j][0]=disx*factor;
coor[i][j][1]=disy*factor;
}
}
}
CanvasMap.prototype.addgeometry = function(data,change){
var bound = this.bound;
var geometry = [];
if (change!=false){
this.changecoordinate(data.geometry,bound);
}
var polygon = new zrender.Polygon({
shape: {
points:data.geometry.coordinates[0]
},
style: {
fill: 'none',
stroke: '#c93756'
}
});
this.render.add(polygon);
};
/**
*
* @param {*} data
* @param {*} xfactor
* @param {*} yfactor
*/
CanvasMap.prototype.move=function(data,xfactor,yfactor){
console.log("move !!!!!!")
for (var i=0;i<data.features.length;i++){
var feature = data.features[i];
movesingle(feature.geometry,xfactor,yfactor);
}
function movesingle (geometry,xfactor,yfactor){
var coor = geometry.coordinates;
var disx = 0,disy = 0;
for (var i=0;i<coor.length;i++){
for (var j=0;j<coor[i].length;j++){
coor[i][j][0]=coor[i][j][0]+xfactor;
coor[i][j][1]=coor[i][j][1]+yfactor;
}
}
}
};
/**
* 放大
*/
CanvasMap.prototype.sacle = function(data,scalefactor,sdisx,sdisy){
for (var i=0;i<data.features.length;i++){
var feature = data.features[i];
scalesingle(feature.geometry,scalefactor,sdisx,sdisy);
}
function scalesingle (geometry,scalefactor){
var coor = geometry.coordinates;
var disx = 0,disy = 0;
for (var i=0;i<coor.length;i++){
for (var j=0;j<coor[i].length;j++){
coor[i][j][0]=coor[i][j][0]*scalefactor-sdisx;
coor[i][j][1]=coor[i][j][1]*scalefactor-sdisy;
}
}
}
}
|
