ArcGIS API for JavaScript 加载GeoJSON数据

最新推荐文章于 2024-06-05 15:18:08 发布

huanglii

最新推荐文章于 2024-06-05 15:18:08 发布

阅读量1w

点赞数 2

分类专栏： GIS 文章标签： ArcGIS API for JavaScript GeoJSON

本文链接：https://blog.csdn.net/huangli0/article/details/80147212

版权

GIS 专栏收录该内容

18 篇文章 5 订阅

订阅专栏

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

huanglii

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
11
评论
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转换为ArcG...
复制链接

扫一扫

专栏目录