说明 :
项目环境是用 vue-cli 搭建的vue项目;在项目中使用vue 配合 arcgis开发;加载的地图为天地图
1.项目环境搭建 :
- 1.1 这里不在废话,如果会用vue;就会用
vue-cli;直接用命令vue init webpack生成就好了. - 1.2 安装
esri-loader;这个也是arcgis官方开发的,用命令npm install --save esri-loader安装就行了;详细文档参考这里open in new window
- 1.3 在vue的script标签中用import的方式引入esri-loader :
import esriLoader from 'esri-loader';
1
- 1.4 然后加载 css js 等资源:
esriLoader.loadScript ({ // 加载js
url: 'http://jsapi.thinkgis.cn/dojo/dojo.js'
});
// 加载css
esriLoader.loadCss ('http://jsapi.thinkgis.cn/esri/css/esri.css');
// 加载模块
esriLoader.loadModules ([
'esri/map',
'esri/layers/TiledMapServiceLayer',
'esri/SpatialReference',
'esri/geometry/Extent',
'esri/layers/TileInfo',
'esri/geometry/Point',
'esri/symbols/PictureMarkerSymbol',
'esri/layers/FeatureLayer',
'esri/tasks/LengthsParameters',
'esri/tasks/AreasAndLengthsParameters',
'esri/tasks/GeometryService',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/graphic',
'esri/layers/GraphicsLayer'
])
.then (this.loading)
.then (obj => {
this.initMap (obj);
})
.catch ((err) => {
console.log (err.message);
});
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
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
esri-loader支持Promise;所以可以直接使用then方法;这里使用了Promise的链式调用;模块加载完了,就要加载天地图了,官方的地图不是天地图;所以只能自己加载: 就是上面this.loading方法:
loading ([
Map,
TiledMapServiceLayer,
SpatialReference,
Extent,
TileInfo,
Point,
PictureMarkerSymbol,
FeatureLayer,
LengthsParameters,
AreasAndLengthsParameters,
GeometryService,
Draw,
InfoTemplate,
Graphic,
GraphicsLayer
]) {
console.log ('loading');
dojo.declare ('TDT', TiledMapServiceLayer, {
constructor (maptype) {
this._maptype = maptype;
this.spatialReference = new SpatialReference ({ wkid: 4326 });
// this.initialExtent = (this.fullExtent = new Extent (97.83, 21.48, 105.60, 29,
// this.spatialReference));
this.initialExtent = (this.fullExtent = new Extent (-180, -90, 180, 90,
this.spatialReference));
this.tileInfo = new TileInfo ({
'rows': 256,
'cols': 256,
'dpi': 300,
'format': 'PNG32',
'compressionQuality': 0,
'origin': {
'x': -180,
'y': 90
},
'spatialReference': {
'wkid': 4326
},
'lods': [ {
'level': 2,
'resolution': 0.3515625,
'scale': 147748796.52937502
}, {
'level': 3,
'resolution': 0.17578125,
'scale': 73874398.264687508
}, {
'level': 4,
'resolution': 0.087890625,
'scale': 36937199.132343754
}, {
'level': 5,
'resolution': 0.0439453125,
'scale': 18468599.566171877
}, {
'level': 6,
'resolution': 0.02197265625,
'scale': 9234299.7830859385
}, {
'level': 7,
'resolution': 0.010986328125,
'scale': 4617149.8915429693
}, {
'level': 8,
'resolution': 0.0054931640625,
'scale': 2308574.9457714846
}, {
'level': 9,
'resolution': 0.00274658203125,
'scale': 1154287.4728857423
}, {
'level': 10,
'resolution': 0.001373291015625,
'scale': 577143.73644287116
}, {
'level': 11,
'resolution': 0.0006866455078125,
'scale': 288571.86822143558
}, {
'level': 12,
'resolution': 0.00034332275390625,
'scale': 144285.93411071779
}, {
'level': 13,
'resolution': 0.000171661376953125,
'scale': 72142.967055358895
}, {
'level': 14,
'resolution': 8.58306884765625e-005,
'scale': 36071.483527679447
}, {
'level': 15,
'resolution': 4.291534423828125e-005,
'scale': 18035.741763839724
}, {
'level': 16,
'resolution': 2.1457672119140625e-005,
'scale': 9017.8708819198619
}, {
'level': 17,
'resolution': 1.0728836059570313e-005,
'scale': 4508.9354409599309
}, {
'level': 18,
'resolution': 5.3644180297851563e-006,
'scale': 2254.4677204799655
} ]
});
this.loaded = true;
this.onLoad (this);
},
getTileUrl (level, row, col) {
return 'http://t' + col % 8 + '.tianditu.cn/' + this._maptype + '_c/wmts?' +
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + this._maptype +
'&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles';
}
});
return {
Map,
TiledMapServiceLayer,
SpatialReference,
Extent,
TileInfo,
Point,
PictureMarkerSymbol,
FeatureLayer,
LengthsParameters,
AreasAndLengthsParameters,
GeometryService,
Draw,
TDT,
InfoTemplate,
Graphic,
GraphicsLayer,
};
}
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
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
同样,到这里,天地图的加载就出来了,然后就是初始化地图了,就是initMap方法:
initMap(obj){
this.mapObj = obj;// 将对象保存到vue data 的maoObj中,方便调用;
let map = new this.mapObj.Map ('map', { logo: false });// 创建地图实例
this.mapObj.map = map;
// 调用地图类型切换
this.mapType ();
// this.switchers('hotSpot',true);
var pt = new this.mapObj.Point (this.mapCenter.lon, this.mapCenter.lat); // 设置中心点
this.mapObj.map.centerAndZoom (pt, this.mapCenter.zoom); // 设置中心点和缩放级别;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
这里,天地图就加载完成了.应该就能看见地图了.如果有问题,就是初始值没设置,换成相应的地理坐标就行了,等有空了我自己在写个详细的demo.
如果看的懵懂,直接看demo:demo地址open in new window
- 关于windows 本地部署API:
- 1 首先下载API 压缩包:下载地址open in new window;账号注册不了,我是用谷歌账户登录的,需要科学上网才行;
- 2 版本选择: 我下载的是3.24版本的; 4.7 版本的使用vue 加载天地图的时候会报错.一直没找到解决办法,所以尝试了 3.24 的版本;
- 3 本地服务 : tomcat;下载好tomcat之后,删除webapps下面的所有文件;解压下载好的zip文件;一次打开目录
~/arcgis_js_v324_api\arcgis_js_api\library\3.24\3.24,把所有的文件复制到~tomcat/webapps/arcgis目录下; - 4 修改
init.js和dojo.js.修改方式参考 API 压缩包中的install_api_windows.html如果是按照上面的操作,修改后是这样的baseUrl:"http://localhost:8080/arcgis/dojo"; - 5 启动 tomcat,浏览器地址栏输入
http://localhost:8080/arcgis/init.js能够正常显示,则说明正常.