geojson-layer-js, 将GeoJSON数据加载到ArcGIS地图中的简单方法

分享于 

7分钟阅读

GitHub

  繁體 雙語
An easy way to load GeoJSON data into your ArcGIS map
  • 源代码名称:geojson-layer-js
  • 源代码网址:http://www.github.com/Esri/geojson-layer-js
  • geojson-layer-js源代码文档
  • geojson-layer-js源代码下载
  • Git URL:
    git://www.github.com/Esri/geojson-layer-js.git
    Git Clone代码到本地:
    git clone http://www.github.com/Esri/geojson-layer-js
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Esri/geojson-layer-js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    geojson-layer-js

    将GeoJSON资源加载到地图地图中的简单方法。 这是一个简单的定制层,它使用 Terraformer 将GeoJSON转换为 ArcGIS JSON。 "应该应"支持所有GraphicLayer操作。 比如 弹出窗口,渲染。

    视图演示应用程序实时插件

    App

    特性

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

    用法

    
    
    
    
    // Example 1: Load from a file
    
    
    var geoJsonLayer1 = new GeoJsonLayer({
    
    
     url: "http://www.myCorsEnabledServer.com/canada.json"
    
    
    });
    
    
    
    // Example 2: Load from a server
    
    
    var geoJsonLayer2 = new GeoJsonLayer({
    
    
     url: "http://opendata.dc.gov/datasets/81a9d9885947483aa2088d81b20bfe66_5.geojson"
    
    
    });
    
    
    
    // Example 3: Load from a FeatureCollection
    
    
    var geoJsonLayer3 = new GeoJsonLayer({
    
    
     data: myFeatureCollection 
    
    
    });
    
    
    
    // Add to map
    
    
    map.addLayer(geoJsonLayer1);
    
    
    map.addLayer(geoJsonLayer2);
    
    
    map.addLayer(geoJsonLayer3);
    
    
    
    
    
    
    
    
    // options:
    
    
    // url: String
    
    
    // Path to file or server endpoint. Server must be on the same domain or cors enabled. Or use a proxy.
    
    
    // data: Object[]
    
    
    // Optional: FeatureCollection of GeoJson features. This will override url if both are provided.
    
    
    // maxdraw: Number
    
    
    // Optional: Limit the maximum graphics to draw. Default is 1000.
    
    
    
    

    开发人员指南

    • 所有GeoJSON数据都需要在地理坐标 ( wkid 4326 ) 中。
    • 除非使用CORS服务器或者使用代理,所有GeoJSON资源必须与应用位于同一域。 注意:GitHub的网页服务器未启用 CORS !
    • 升级器不支持 dojo require(),必须直接加载到页面中。
    
    
    
    
    <!-- Terraformer -->
    
    
    <script src="./vendor/terraformer/terraformer.min.js"></script>
    
    
    <script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
    
    
    
    

    示例

    
    
    
    
    <!DOCTYPE html> 
    
    
    <html> 
    
    
    <head> 
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    
    
    <title>ArcGIS GeoJSON Layer</title> 
    
    
    <!-- ArcGIS API for JavaScript CSS-->
    
    
    <link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
    
    
    <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
    
    
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    
    
    <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
    
    
    <style>
    
    
    html, body, #mapDiv {
    
    
     height: 100%;
    
    
     width: 100%;
    
    
    }
    
    
    </style>
    
    
    
    <!-- ArcGIS API for JavaScript library references -->
    
    
    <script src="//js.arcgis.com/3.10"></script>
    
    
    
    <!-- Terraformer reference -->
    
    
    <script src="./vendor/terraformer/terraformer.min.js"></script>
    
    
    <script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
    
    
    
    <script>
    
    
     require(["esri/map",
    
    
     "./src/geojsonlayer",
    
    
     "dojo/on",
    
    
     "dojo/dom",
    
    
     "dojo/domReady!"],
    
    
     function (Map, GeoJsonLayer, on, dom) {
    
    
    
    
    
     // Create map
    
    
     var map = new Map("mapDiv", {
    
    
     basemap: "gray",
    
    
     center: [-122.5, 45.5],
    
    
     zoom: 5
    
    
     });
    
    
    
    
    
     map.on("load", function () {
    
    
     addGeoJsonLayer("./data/dc-schools.json");
    
    
     });
    
    
    
    
    
     // Add the layer
    
    
     function addGeoJsonLayer(url) {
    
    
     // Create the layer
    
    
     var geoJsonLayer = new GeoJsonLayer({
    
    
     url: url
    
    
     });
    
    
     // Zoom to layer
    
    
     geoJsonLayer.on("update-end", function (e) {
    
    
     map.setExtent(e.target.extent.expand(1.2));
    
    
     });
    
    
     // Add to map
    
    
     map.addLayer(geoJsonLayer);
    
    
     }
    
    
     });
    
    
    </script>
    
    
    </head>
    
    
    <body>
    
    
     <div id="mapDiv"></div>
    
    
    </body>
    
    
    </html>
    
    
    
    

    要求

    • 用于 JavaScript API的 ArcGIS
    • 美国地形改造器( )

    资源

    问题

    查找 Bug 或者希望请求新功能? 提交问题请告知我们。 谢谢!

    欢迎任何人和任何人来贡献。 请参见我们的指南以提供帮助。

    许可证

    版权所有 2013 Esri

    在Apache许可以证下许可以证版本 2.0 ("许可以证") ;你可以能不使用这里文件,除了符合许可以证。 你可以获得许可证的副本在*

    http://www.apache.org/licenses/LICENSE-2.0

    在规定的法律或者书面许可下,在许可条款下分发的软件在不保证任何种类的担保或者条件的前提下分发,或者明示或者隐含。 查看许可协议下特定语言的许可权限和限制的许可证。

    许可证副本可以在存储库 license.txt 文件的中使用。

    [] (。Esri标签:ArcGIS网络地图GeoJSON层地形图投影) [] ( Esri语言: JavaScript )


    数据  GEO  arc  Geojson  Arcgis  
    相关文章