0%

ArcGIS JS API 4.15实现萤火虫效果

看到网上的萤火虫效果后,也想在前端通过ArcGIS JS API来实现一下,所以感兴趣的话就跟我一起来看看吧。

概述

前几天在看帖子的时候发现有大佬使用ArcGIS Pro和Portal制作了萤火虫的渲染效果,感觉前端可视化的时候还不错,所以自己也将实例数据下载下来之后用ArcGIS JS API来实现了一下,我们先来看一下最终的效果:

img

看完效果之后,我们来看看是怎么实现的。

具体实现步骤

1、实现萤火虫渲染效果其实就是用了JS API提供的图片符号这个API来实现的,所以接下来我们看看具体的实现步骤。

2、首先我们定义一张二维地图,代码如下:

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
let _self = this;

let option = {
url: 'https://js.arcgis.com/4.15/init.js',
css: 'https://js.arcgis.com/4.15/esri/themes/dark-red/main.css'
};

loadModules(["esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer"
], option).then(([Map, MapView, Basemap, TileLayer, FeatureLayer]) => {

let basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
});

let map = new Map({
basemap: basemap
});
let view = new MapView({
container: "mapview",
map: map,
zoom: 4,
center: [15, 65]
});

}).catch((err) => {
console.log('底图创建失败,' + err);
});

在上述代码里,我们除了实例化一张二维地图之外,还自定义了一张底图。

3、然后我们将下载下来的数据发布成要素服务,在前端通过JS API去调用,如下:

1
2
3
4
const layer = new FeatureLayer({
url: "https://portalwin.arcgis.cn/arcgis/rest/services/Hosted/xuqwtest2d/FeatureServer"
});
map.add(layer);

4、到上述步骤为止,其实我们的数据已经添加到地图上了,但此时我们的数据只是按随机的颜色来渲染的一些小点点,并不太好看,如下:

img

5、为了前端效果比较好看,实现萤火虫渲染效果,我们定义一个要素图层的渲染属性,然后将要渲染的图片引进来,代码如下:

1
2
3
4
5
6
7
8
9
layer.renderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: './testimg.png',
width: "30px",
height: "30px"
}
};

在上面的代码里,我们定义了一个图片符号,并设置了图片的大小和路径,此时我们保存代码后发现,我们的数据是按我们指定的图片去渲染的,效果如下:

img

6、以上就是用ArcGIS JS API实现萤火虫渲染效果的全部过程,其实这个过程很简单,就是给我们的数据图层指定一个渲染方案就可以实现,此处我们使用的渲染图片的透明图片。

附:

全部代码:

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
import React from 'react';
import { loadModules } from 'esri-loader';
import './App.css';

import pictureurl from './assets/picture.png';

class App extends React.Component {

componentDidMount=()=> {
let _self = this;

let option = {
url: 'https://js.arcgis.com/4.15/init.js',
css: 'https://js.arcgis.com/4.15/esri/themes/dark-red/main.css'
};

loadModules(["esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer"
], option).then(([Map, MapView, Basemap, TileLayer, FeatureLayer]) => {

let basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
});

let map = new Map({
basemap: basemap
});
let view = new MapView({
container: "mapview",
map: map,
zoom: 4,
center: [15, 65]
});

const layer = new FeatureLayer({
url: "https://portalwin.arcgis.cn/arcgis/rest/services/Hosted/xuqwtest2d/FeatureServer"
});
map.add(layer);

layer.renderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: './testimg.png',
width: "30px",
height: "30px"
}
};
}).catch((err) => {
console.log('底图创建失败,' + err);
});
}

render() {
return (
<div id="mapview">

</div>
);
}
}

export default App;