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
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Fatal car crashes
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require([
"geoscene/WebMap",
"geoscene/layers/FeatureLayer",
"geoscene/views/MapView",
"geoscene/widgets/Legend"
], (WebMap, FeatureLayer, MapView, Legend) => {
const url = "https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/FatalAccidents2017/FeatureServer";
const layer = new FeatureLayer({
title: "Fatal car accidents involving drinking (2017)",
url
});
const colors = ["rgba(115, 0, 115, 0)", "#820082", "#910091", "#a000a0", "#af00af", "#c300c3", "#d700d7", "#eb00eb", "#ff00ff", "#ff58a0", "#ff896b", "#ffb935", "#ffea00"];
layer.renderer = {
type: "heatmap",
field: "Number_of_Drinking_Drivers",
colorStops: [
{ color: colors[0], ratio: 0 },
{ color: colors[1], ratio: 0.083 },
{ color: colors[2], ratio: 0.166 },
{ color: colors[3], ratio: 0.249 },
{ color: colors[4], ratio: 0.332 },
{ color: colors[5], ratio: 0.415 },
{ color: colors[6], ratio: 0.498 },
{ color: colors[7], ratio: 0.581 },
{ color: colors[8], ratio: 0.664 },
{ color: colors[9], ratio: 0.747 },
{ color: colors[10], ratio: 0.83 },
{ color: colors[11], ratio: 0.913 },
{ color: colors[12], ratio: 1 }
],
blurRadius: 10,
maxPixelIntensity: 21,
minPixelIntensity: 0
};
const map = new WebMap({
basemap: {
portalItem: {
id: "466f3f43c231453c938c6776777b89e2"
}
},
layers: [ layer ]
});
const view = new MapView({
container: "viewDiv",
center: [-117.79621, 33.91474],
scale: 1155581,
constraints: {
snapToZoom: false,
minScale: 4622324,
maxScale: 1155500
},
map
});
view.ui.add(
new Legend({
view
}),
"top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
