1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
6 <title>？️1700年的清代政区地图展示</title>
7 <style>
8 html,
9 body,
10 #viewDiv {
11 padding: 0;
12 margin: 0;
13 height: 100%;
14 width: 100%;
15 }
16 </style>
17 <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
18 <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/<theme-name>/main.css">
19 <script src="https://d3js.org/d3.v7.min.js"></script>
20 <script src="https://js.arcgis.com/4.26/"></script>
21 <script>
22 require([
23 "esri/config",
24 "esri/Map",
25 "esri/views/MapView",
26 "esri/Graphic",
27 "esri/widgets/Sketch",
28 "esri/layers/FeatureLayer",
29 "esri/layers/GraphicsLayer",
30 "esri/widgets/BasemapToggle",
31 "esri/widgets/BasemapGallery",
32 "esri/widgets/Expand",
33 "esri/widgets/Legend",
34 "esri/widgets/Search",
35 "esri/widgets/Home",
36 "esri/layers/GroupLayer"],
37 function (esriConfig, Map, MapView, Graphic, Sketch, FeatureLayer, GraphicsLayer, BasemapToggle, BasemapGallery, Expand, Legend, Search, Home, GroupLayer) {
38
39 esriConfig.apiKey = "AAPK4607487b2ac54725947b840a0e1843cfAOA2C3wBPm2fwxzCa8kA47cc4k7xsyE9AsBrqxNChU6HuSVvOCkDDKodQ-HpjIUJ";
40
41 const map = new Map({
42 basemap: {
43 portalItem: {id: "f35ef07c9ed24020aadd65c8a65d3754"}
44 }});
45
46 const view = new MapView({
47 map: map,
48 center: [117.366995, 30.584958],
49 zoom: 5, // Zoom level
50 container: "viewDiv"
51 });
52
53 //添加草图控件
54 const graphicsLayerSketch = new GraphicsLayer();
55 map.add(graphicsLayerSketch);
56 const sketch = new Sketch({
57 layer: graphicsLayerSketch,
58 view: view,
59 creationMode: "update"
60 });
61 view.ui.add(sketch, "top-right");
62
63 // 添加草图事件以侦听和执行查询（错误）
64 sketch.on("update", (event) => {
65
66 if (event.state === "start") { queryFeaturelayer ( event.graphics[0].geometry );}
67
68 if (event.state === "complete") { graphicsLayerSketch.remove ( event.graphics[0] );}
69
70 if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
71 queryFeaturelayer(event.graphics[0].geometry);
72 }
73 });
74
75 //添加底图切换按钮
76 const basemapToggle = new BasemapToggle({
77 view: view,
78 nextBasemap: "arcgis-imagery"
79 });
80 view.ui.add(basemapToggle, "bottom-right");
81
82 //底图库小部件
83 const basemapGallery = new BasemapGallery({
84 view: view,
85 container: document.createElement("div")
86 });
87 const bgExpand = new Expand({
88 view: view,
89 content: basemapGallery
90 });
91 view.ui.add(bgExpand, "top-left");
92
93 const template = {
94 // 自动转换为新的弹出模板
95 title: "公元1700的清代政区",
96 content: [
97 {
98 type: "fields",
99 fieldInfos: [
100
101 {
102 fieldName: "NAME_CH",
103 label: "名称"
104
105 },
106 {
107 fieldName: "BEG_CHG_TY",
108 label: "变化"
109 },
110 {
111 fieldName: "PRES_LOC",
112 label: "今天"
113 },
114 {
115 fieldName: "TYPE_CH",
116 label: "等级"
117
118 }]}]};
119
120 //搜索小部件
121 const searchWidget = new Search({view: view,});
122
123 //将搜索小部件添加到视图的左下角
124 view.ui.add(searchWidget, {
125 position: "bottom-left",
126 index: 2
127 });
128
129 let homeWidget = new Home({
130 view: view
131 });
132
133 //将主页微件添加到地图视图的左上角
134 view.ui.add(homeWidget, "top-left");
135
136 //县级点的简单符号渲染
137 const CountySeatsRenderer = {
138 type: "simple", // 自动转换为新的 SimpleRenderer
139 symbol: {
140 type: "simple-marker", //自动转换为新的 SimpleMarkerSymbol
141 size: 5,
142 color: [50, 184, 166, 1],
143 outline: null
144 }
145 };
146
147 //加载县级点
148 const CountySeats = new FeatureLayer({
149 url: "https://services7.arcgis.com/iEMmryaM5E3wkdnU/arcgis/rest/services/China_County_Seats_1700/FeatureServer",
150 renderer: CountySeatsRenderer,
151 popupTemplate: template
152 });
153 map.add(CountySeats);
154
155 //府级点的简单符号渲染
156 const PrefectureSeatsRenderer = {
157 type: "simple",
158 symbol: {
159 type: "simple-marker",
160 size: 5,
161 color: [255, 255, 0, 1],
162 outline: null
163 }
164 };
165
166 //加载府级点
167 const PrefectureSeats = new FeatureLayer({
168 url: "https://services7.arcgis.com/iEMmryaM5E3wkdnU/arcgis/rest/services/China_Prefecture_Seats_1700/FeatureServer",
169 renderer: PrefectureSeatsRenderer,
170 popupTemplate: template
171 });
172 map.add(PrefectureSeats);
173
174
175 const graphicsLayer = new GraphicsLayer();
176 map.add(graphicsLayer);
177
178 //府级面简单符号渲染
179 const PrefectureRenderer = {
180 type: "simple",
181 symbol: {
182 type: "simple-fill",
183 color: [191, 46, 46, 1],
184 outline: {
185 color: [232, 167, 132, 1],
186 width: 0.5
187 }
188 }
189 };
190
191 //加载府面
192 const PrefectureLayer = new FeatureLayer({
193 url: "https://services7.arcgis.com/iEMmryaM5E3wkdnU/arcgis/rest/services/China_Prefecture_1700/FeatureServer",
194 renderer: PrefectureRenderer,
195 popupTemplate: template
196 });
197 map.add(PrefectureLayer, 0);
198
199 //图例
200 const legend = new Expand({
201 content: new Legend({
202 view: view,
203 style: "classic"
204 }),
205 view: view,
206 expanded: false
207 });
208 view.ui.add(legend, "top-left");
209 });
210 </script>
211 </head>
212 <body>
213 <div id="viewDiv"></div>
214 </body>
215 </html>
浙公网安备 33010602011771号