ArcGIS API for JavaScript 加载 GeoJSON 数据

ArcGIS API for JavaScript不提供GeoJSON数据的加载,但是在Esri GitHub上提供了geojson-layer-js。geojson-layer-js是一个将GeoJSON数据加载到ArcGIS地图中的简单方法。它使用Terraformer将GeoJSON转换为ArcGIS JSON。它是一个自定义的GraphicsLayer,支持GraphicsLayer的所有操作,如:弹出窗口、渲染等。
下面简单说明如何使用geojson-layer-js。

预览

在线预览:ArcGIS API for JavaScript 加载 GeoJSON 数据

geojson-layer-js的特点

  • 从文件加载GeoJSON;
  • 从服务器加载GeoJSON;
  • 从FeatureCollection加载GeoJSON数据。

使用方法

参数名 数据类型 描述
url String 文件或服务器路径,服务器必须在同一个域或启用CORS,或使用代理。
data Object[] Optional FeatureCollection,如果同时使用data和url,data会覆盖url。
maxdraw Number Optional 最大绘制的图形数,默认为1000。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 从文件加载
var geoJsonLayer1 = new GeoJsonLayer({
url: "http://www.myCorsEnabledServer.com/canada.json"
});

// 从服务器加载
var geoJsonLayer2 = new GeoJsonLayer({
url: "http://opendata.dc.gov/datasets/81a9d9885947483aa2088d81b20bfe66_5.geojson"
});

// 从FeatureCollection加载
var geoJsonLayer3 = new GeoJsonLayer({
data: myFeatureCollection
});

// 添加到地图
map.addLayer(geoJsonLayer1);
map.addLayer(geoJsonLayer2);
map.addLayer(geoJsonLayer3);

注意事项

  • 所有GeoJSON数据必须是地理坐标系(wkid 4326)。
  • 除非使用启用CORS的服务器或代理,否则所有GeoJSON资源都必须位于与应用程序相同的域上。
  • Terraformer不支持dojo require(),并且必须直接加载到页面中。如下:
1
2
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

示例

加载GeoJSON数据结果

源码

文件结构

|– js
|– | – geojsonlayer.js (geojson-layer-js可下载该文件)
|– data
|– | – dc-bike-share.json(GeoJSON数据)

index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ArcGIS GeoJSON Layer</title>
<link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
<!-- ArcGIS API for JavaScript -->
<script src="https://js.arcgis.com/3.20"></script>
<!-- Terraformer -->
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
require([
"esri/map",
"js/geojsonlayer.js",
"esri/renderers/SimpleRenderer",
"dojo/on",
"dojo/query",
"dojo/dom",
"dojo/domReady!"],
function (Map, GeoJsonLayer, SimpleRenderer, on, query, dom) {
// 创建地图
var map = new Map("mapDiv", {
basemap: "gray",
zoom: 5
});
map.on("load", function () {
addGeoJsonLayer("data/dc-bike-share.json");
});
function addGeoJsonLayer(url) {
// 创建图层
var geoJsonLayer = new GeoJsonLayer({
url: url
});
// 缩放至图层
geoJsonLayer.on("update-end", function (e) {
map.setExtent(e.target.extent.expand(1.2));
});
// 添加到地图
map.addLayer(geoJsonLayer);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>

0%