0%

ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。

问题描述

出差的某一天晚上在宾馆没事干瞎想,突然想到白天做过的项目功能的时候,有个点选查询的功能引起了我的注意。在项目中为了实现点选查询,是在ArcGIS Server里面发布了一个要素服务,然后将其添加到地图上渲染,并实现了鼠标的点选查询功能,那这个功能可不可以不通过发布服务来实现呢?想到这,打开电脑仔细翻看了了一下ArcGIS JS API的官方文档,发现好像是可以,所以就立即动手了,幸运的是,我成功了,先给大家上一张效果图:

img

上图中的鼠标点选查询,并出现弹窗的功能实现的数据来源并不是一个发布的要素服务,而是我模拟了六个数据点,将它们保存成了一个数组,这个数组就代表我从后台拿到的数据,因为我不可能为了这样一个小功能再自己去写一个后台吧。好了,现在讲讲主要的实现步骤。

实现步骤

1、首先呢,这个demo是基于Vue来写的,所以我先初始化了一个Vue的demo,当然了,你直接弄成一个HTML页面文件是没有任何问题的,看自己喜好。然后我再项目里安装了esri-loader插件,因为要在Vue的demo里要使用ArcGIS JS API,所以要用到这东西,如果大家对这个过程不了解的话请移步至另一篇文章《【番外】 Vue中使用ArcGIS JS API 4.14开发》,在这里不做详细介绍。

2、初始化完demo,安装完插件之后,接下来我们引入esri-loader,并实例化一个基础的二维地图,代码如下:

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
_createMapview: function() {
const _self = this;
const option = {
url: 'https://js.arcgis.com/4.15/init.js',
css: 'https://js.arcgis.com/4.15/esri/themes/light/main.css',
};

loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], option)
.then(([Map, MapView, FeatureLayer]) => {
let map = new Map({
basemap: 'osm',
});
let view = new MapView({
container: 'mapview',
map: map,
zoom: 10,
center: [104.071308, 30.663028],
});

console.log(view);
})
.catch((err) => {
console.log('地图创建失败:', err);
});
},

3、地图初始化完成之后,我们引入我们的数据,这个过程就相当于是你用AJAX从后台拿到数据了,因为我的数据我单独放在了一份JS文件里。数据引入之后,我们对它进行一下处理,因为你有可能从后台拿到的数据里面,关于经纬度信息是字符串,而不是数值类型,代码如下:

数据文件:

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
let defaultData = [
{
address: '2号线地铁人民公园旁边',
time: '9:30——18:00',
coordinate: '[104.06369,30.663774]',
name: '人民公园',
phone: '028-86080000',
},
{
address: '2号线地铁天府广场',
time: '9:30——18:00',
coordinate: '[104.07235,30.663245]',
name: '天府广场',
phone: '028-86080000',
},
{
address: '3号线地铁春熙路站',
time: '9:30——22:00',
coordinate: '[104.08586,30.65958]',
name: '春熙路',
phone: '028-86080000',
},
{
address: '四川科技馆背后',
time: '9:30——18:00',
coordinate: '[104.073787,30.669334]',
name: '成都体育中心',
phone: '028-86080000',
},
{
address: '天府大道北段',
time: '9:30——18:00',
coordinate: '[104.070095,30.575247]',
name: '环球中心',
phone: '028-86080000',
},
{
address: '4号线宽窄巷子地铁站',
time: '9:30——18:00',
coordinate: '[104.056441,30.671462]',
name: '宽窄巷子',
phone: '028-86080000',
},
];

export default defaultData;

处理数据函数:

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
//处理经纬度数据,返回features
_translateLonLat: function(data) {
const _self = this;
if (data.length > 0) {
data.map((value, key) => {
let lonlatStr = value.coordinate.split(',');
let lonStr = lonlatStr[0].split('[')[1];
let latStr = lonlatStr[1].split(']')[0];

_self.geodata.push({
geometry: {
type: 'point',
x: Number(lonStr),
y: Number(latStr),
},
attributes: {
ObjectID: key,
address: value.address,
time: value.time,
name: value.name,
phone: value.phone,
},
});
});
}

return _self.geodata;
},

4、接下来我们拿到处理过后的数据,其实这就是一个features,用来实例化要素图层的。然后我们用它去实例化一个要素图层,并将它添加到地图上:

1
2
3
4
5
6
//实例化featurelayer
let layer = new FeatureLayer({
source: resultData,
objectIdField: 'ObjectID',
});
view.map.add(layer);

5、到此为止呢,我们的数据点其实已经添加到地图上了,但这时候还不能点击查询,所以我们要配置一个pupoptemplate,代码如下:

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
    //实例化弹窗
let template = {
title: '{name}',
content: [
{
type: 'fields',
fieldInfos: [
{
fieldName: 'address',
label: '地址',
},
{
fieldName: 'time',
label: '开放时间',
},
{
fieldName: 'phone',
label: '相关电话',
},
],
},
],
};

//给要素图层实例化的属性中配置pupoptemplate
let layer = new FeatureLayer({
source: resultData,
objectIdField: 'ObjectID',
fields: [
{
name: 'OBJECTID',
type: 'oid',
},
{
name: 'time',
type: 'string',
},
{
name: 'address',
type: 'string',
},
{
name: 'phone',
type: 'string',
},
{
name: 'name',
type: 'string',
},
],
popupTemplate: template,
});
view.map.add(layer);

6、这样一来我们就直接通过后台返回的数据实例化了一个要素图层,并实现了鼠标点击查询功能了。

附:

完整代码:

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
import { loadModules } from 'esri-loader';
import defaultData from '../assets/data';

export default {
name: 'HelloWorld',
data: function() {
return {
geodata: [],
};
},
mounted: function() {
this._createMapview();
},
methods: {
_createMapview: function() {
const _self = this;
const option = {
url: 'https://js.arcgis.com/4.15/init.js',
css: 'https://js.arcgis.com/4.15/esri/themes/light/main.css',
};

loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], option)
.then(([Map, MapView, FeatureLayer]) => {
let map = new Map({
basemap: 'osm',
});
let view = new MapView({
container: 'mapview',
map: map,
zoom: 10,
center: [104.071308, 30.663028],
});

console.log(view);
let resultData = _self._translateLonLat(defaultData);

//实例化弹窗
let template = {
title: '{name}',
content: [
{
type: 'fields',
fieldInfos: [
{
fieldName: 'address',
label: '地址',
},
{
fieldName: 'time',
label: '开放时间',
},
{
fieldName: 'phone',
label: '相关电话',
},
],
},
],
};

//实例化featurelayer
let layer = new FeatureLayer({
source: resultData,
objectIdField: 'ObjectID',
fields: [
{
name: 'OBJECTID',
type: 'oid',
},
{
name: 'time',
type: 'string',
},
{
name: 'address',
type: 'string',
},
{
name: 'phone',
type: 'string',
},
{
name: 'name',
type: 'string',
},
],
popupTemplate: template,
});
view.map.add(layer);
})
.catch((err) => {
console.log('地图创建失败:', err);
});
},

//处理经纬度数据,返回features
_translateLonLat: function(data) {
const _self = this;
if (data.length > 0) {
data.map((value, key) => {
let lonlatStr = value.coordinate.split(',');
let lonStr = lonlatStr[0].split('[')[1];
let latStr = lonlatStr[1].split(']')[0];

_self.geodata.push({
geometry: {
type: 'point',
x: Number(lonStr),
y: Number(latStr),
},
attributes: {
ObjectID: key,
address: value.address,
time: value.time,
name: value.name,
phone: value.phone,
},
});
});
}

return _self.geodata;
},
},
};