/
arcgis.js
191 lines (162 loc) · 6.58 KB
/
arcgis.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
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
(function () {
"use strict";
// API キー
const api_key = 'AAPKa9ce1bd39e8e48a3a074e743980a223feJgvCSS9FxNLCnooswxULQuor56rBeQRUEaNZlWjDLOBeyi6u9nvvPABmXZttT2m';
// 一覧画面を開いた時に実行します
kintone.events.on('app.record.index.show', function(event) {
// 一覧の上部部分にあるスペース部分を定義します
let elAction = kintone.app.getHeaderSpaceElement();
// すでに地図要素が存在する場合は、削除します
// ※ ページ切り替えや一覧のソート順を変更した時などが該当します
let mapCheck = document.getElementsByName('viewDiv');
if (mapCheck.length !== 0) {
elAction.removeChild(mapCheck[0]);
}
// 地図を表示する div 要素を作成します
let viewDiv = document.createElement('div');
viewDiv.setAttribute('id', 'viewDiv');
viewDiv.setAttribute('name', 'viewDiv');
viewDiv.setAttribute('style', 'width: auto; height: 350px; margin-right: 30px; border: solid 2px #c4b097');
elAction.appendChild(viewDiv);
// レコード情報を取得します
let records = event['records'];
//console.log(records);
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Legend",
"esri/widgets/LayerList",
], function (esriConfig, Map, MapView, Basemap, VectorTileLayer, TileLayer, FeatureLayer, Graphic, GraphicsLayer, Legend, LayerList) {
esriConfig.apiKey = api_key;
const vectorTileLayer = new VectorTileLayer({
portalItem: {
id: "97b0ea1cc8ca41028420dd4067873c53" // 地形図 (Japanese)
// 0f52cd2d17ea4773944a1d0e0fb99ea4
},
opacity: .75
});
const imageTileLayer = new TileLayer({
portalItem: {
id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade
}
});
const basemap = new Basemap({
baseLayers: [
imageTileLayer,
vectorTileLayer
]
});
const map = new Map({
basemap: basemap,
});
const view = new MapView({
map: map,
center: [139.69167, 35.68944],
zoom: 10, // scale: 72223.819286
container: "viewDiv",
constraints: {
snapToZoom: false
}
});
view.when(() => {
const layerList = new LayerList({
view: view
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
});
const featureLayer = new FeatureLayer({
title: "全国市区町村界データ",
url: "https://services5.arcgis.com/HzGpeRqGvs5TMkVr/arcgis/rest/services/japan_ver83/FeatureServer"
});
map.add(featureLayer);
const legend = new Legend({
view: view,
layerInfos: [
{
layer: featureLayer
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-left");
let graphicsLayer = new GraphicsLayer({
title: "顧客一覧"
});
let simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
for (const record of records) {
let lat = record['緯度']['value'];
let lon = record['経度']['value'];
let name = record['氏名']['value'];
let postcode = record['郵便番号']['value'];
let address = record['住所']['value'];
let tel = record['電話番号']['value'];
let age = record['年齢']['value'];
let customerAtt = {
Name: name,
Address: "〒" + postcode + ":" + address,
Tel: tel,
Age: age
};
//Create a point
let point = {
type: "point",
longitude: lon,
latitude: lat
};
let pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: customerAtt,
popupTemplate : {
title: "顧客情報",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name",
label: "名前"
},
{
fieldName: "Address",
label: "住所"
},
{
fieldName: "Tel",
label: "電話番号"
},
{
fieldName: "Age",
label: "年齢"
}
]
}
]
}
});
graphicsLayer.graphics.add(pointGraphic);
//console.log(record['緯度']['value']);
//console.log(record['経度']['value']);
}
map.add(graphicsLayer);
});
});
kintone.events.on('app.record.detail.show', function(event) {
window.alert('レコード表示イベント');
});
})();