/
popup_2021.html
253 lines (236 loc) · 11 KB
/
popup_2021.html
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>はじめての Web アプリケーション開発 2021：ポップアップの設定編</title>
<!--
次のサンプルをアレンジ：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-layers
-->
<!-- ArcGIS API for JavaScript の参照 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<!-- スタイル設定 -->
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/FeatureLayer"
],
(
Map,
MapView,
WebTileLayer,
FeatureLayer
) => {
/**********************************************************************************
*
* シンボルを作成
*
**********************************************************************************/
//地価公示レイヤーのシンボルを定義
const chikakojiLyrSymbol = {
type: "simple-marker",
size: 8,
color: "#0000ff",
outline: {
color: "white",
width: 1
}
};
/**********************************************************************************
*
* レンダラーを作成
*
**********************************************************************************/
//レンダラーを定義
const renderer = {
type: "simple",
symbol: chikakojiLyrSymbol,
};
/**********************************************************************************
* 1つのWebTileLayer と 2つのFeatureLayer のインスタンスを作成
* 1) WebTileLayer:地理院タイル（淡色地図）
* 地理院タイル一覧ページ：https://maps.gsi.go.jp/development/ichiran.html
* 2) FeatureLayer:公示地価 Living Atlas
* 3) FeatureLayer:全国市区町村界データ 2021 Living Atlas
**********************************************************************************/
// WebTileLayer:地理院タイル（淡色地図）
// 地理院タイルの形式から WebTileLayer への読み換え
// 【読み換え前】https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png
// 【読み換え後】https://cyberjapandata.gsi.go.jp/xyz/pale/{level}/{col}/{row}.png
const gsipaleLyr = new WebTileLayer({
urlTemplate: "https://cyberjapandata.gsi.go.jp/xyz/pale/{level}/{col}/{row}.png",
id: "gsipale",
opacity: 0.9,
copyright: "地理院タイル（淡色地図）",
visible: false
});
// FeatureLayer：公示地価(国土数値情報 調査時点:令和3年1月1日)： Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
// 2022.3.28更新の令和4年版に対応（国土数値情報の製品仕様書第3.1版）
definitionExpression: "L01_022 LIKE '23%'" // 行政区域コード L01_021 => L01_022 に
});
// FeatureLayer：全国市区町村界データ 2021： Living Atlas
const cityareaLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/municipalityboundaries2021/FeatureServer",
id: "cityarea",
opacity: 0.5,
minScale: 5000000,//1500000, パフォーマンスが向上しているのでスケール変更
maxScale: 50000,
visible: false,
// 上記と同様にこちらも愛知県のみになるようフィルタ定義を追加
definitionExpression: "JCODE LIKE '23%'"
});
/**********************************************************************************
*
* Map の作成と レイヤーの追加
*
**********************************************************************************/
// Map を作成
// コンストラクター内でレイヤーを追加
const map = new Map({
basemap: "streets", //(deprecated)
layers:[chikakojiLyr]
});
// もしくは map.add() を使って map にレイヤーを追加することも可能
map.add(cityareaLyr, 0);
map.add(gsipaleLyr, 0);
// MapView を作成し map インスタンスを追加
const view = new MapView({
container: "viewDiv",
map: map
});
/**********************************************************************************
* view の ”layerview-create” イベントで
* コンソール内でそれらのプロパティを確認できるよう print 文で出力
**********************************************************************************/
view.on("layerview-create", function(event) {
if (event.layer.id === "gsipale") {
// gsipaleLyr view のプロパティを確認できる
console.log("地理院タイル（淡色地図）の LayerView が作成されました!", event.layerView);
}
if (event.layer.id === "chikakoji"){
// chikakojiLyr view のプロパティを確認できる
console.log("地価公示 の LayerView が作成されました!", event.layerView);
}
if (event.layer.id === "cityarea"){
// cityLyr view のプロパティを確認できる
console.log("全国市区町村界データ の LayerView が作成されました!", event.layerView);
}
});
/**********************************************************************************
* ロードされた時 もしくは すべてのプロパティにアクセスできるようになったとき
* layer.when('callback') で指定されるコールバック関数が実行される
*
* 地価公示レイヤーがロードされると、view が初期表示範囲として
* レイヤーの表示範囲にズームしながら移動していく処理
**********************************************************************************/
view.when(function() {
chikakojiLyr.when(() => {
return chikakojiLyr.queryExtent();
}).then((response) => {
// goTo のアニメーションの動きを調整するため、GoToOptions2D のduration にデフォルトの10倍の値を設定
// https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#methods-summary
view.goTo(response.extent, {"duration":2000});
});
});
const gsipaleToggle = document.getElementById("gsipaleLyr");
const chikakojiToggle = document.getElementById("chikakojiLyr");
const cityareaToggle = document.getElementById("cityareaLyr");
/**********************************************************************************
* レイヤーの visible プロパティで view 内でのレイヤーの表示/非表示を切り替えを行う
* なお、レイヤーが非表示状態であっても、そのレイヤーのプロパティにアクセスしたり、
* そのレイヤーに対して解析を実行することは可能
**********************************************************************************/
gsipaleToggle.addEventListener("change", () => {
gsipaleLyr.visible = gsipaleToggle.checked;
});
chikakojiToggle.addEventListener("change", () => {
chikakojiLyr.visible = chikakojiToggle.checked;
});
cityareaToggle.addEventListener("change", () => {
cityareaLyr.visible = cityareaToggle.checked;
});
/**********************************************************************************
*
* ポップアップの設定
*
**********************************************************************************/
// PopupTemplate の作成
const template = {
title: "愛知県の地価公示", // Popup のタイトルを設定
content: [
// type: "text" の例
{
type: "text", // コンテンツに表示する形式を設定（テキストを表示する場合は "text" を設定）
text: "標準地コードは {L01_001} 、周辺の土地利用の状況は {L01_047} です" // 周辺の土地利用の状況 L01_044 => L01_047
},
// type: "fields" の例
{
type: "fields", // コンテンツに表示する形式を設定（属性値を表示する場合は "fields" を設定）
fieldInfos: [{
fieldName: "L01_098", // フィールド名を設定 // R4版のR2
label: "令和２年の価格", // ラベルを設定
format: {
digitSeparator: true, // 数値の3桁区切りを有効にする
places: 0 // 整数で表示する
}
}, {
fieldName: "L01_099", // R4版のR3
label: "令和３年の価格",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "L01_100", // R4版のR4
label: "令和４年の価格",
format: {
digitSeparator: true,
places: 0
}
}]
}]
};
// 地価公示レイヤーに PopupTemplate を設定する
chikakojiLyr.popupTemplate = template;
});
</script>
</head>
<body>
<div id= "viewDiv"></div>
<span id= "layerToggle">
<input type= "checkbox" id= "gsipaleLyr" />地理院タイル-淡色地図(WebTileLayer)<br>
<input type= "checkbox" id= "chikakojiLyr" checked />愛知県の公示地価(FeatureLayer)
<input type= "checkbox" id= "cityareaLyr" />全国市区町村界(FeatureLayer)
</span>
</body>
</html>