ArcGIS API for JavaScript 加载GeoJSON数据

81 阅读 0 评论 54 点赞

我是靠谱客的博主腼腆丝袜，最近开发中收集的这篇文章主要介绍ArcGIS API for JavaScript 加载GeoJSON数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文地址：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。

geojson-layer-js的特点

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

使用方法

参数名	数据类型		描述
url	String		文件或服务器路径，服务器必须在同一个域或启用CORS，或使用代理。
data	Object[]	Optional	FeatureCollection，如果同时使用data和url，data会覆盖url。
maxdraw	Number	Optional	最大绘制的图形数，默认为1000。

// 从文件加载
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（），并且必须直接加载到页面中。如下：

<script src="https://unpkg.com/terraformer@1.0.7"></script>
<script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>

示例

加载geojson数据结果

源码

文件结构

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

index.html

<!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/terraformer@1.0.7"></script>
<script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></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>