ArcGIS 3.x 到 4.x 迁移

Question

我使用的是 ArcGIS JS API 3.10 并且有一个 Github 在地图上显示 GeoJSON 数据的存储库，但现在我必须升级到 4.9 版本我阅读了 3.x 到 4.x 由 ESRI 发布的迁移文档并应用了他的更改，如 link 位置等，但它不再工作了。

<!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="https://js.arcgis.com/4.9/esri/css/main.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">
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
    html, body, #mapDiv {
        height: 500px;
        width: 100%;
    }
</style>

<script src="https://js.arcgis.com/4.9/"></script>
<!-- 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",
        "/Scripts/Refine.js",
        "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("http://113.197.55.251/api/punjab");
            });

            // 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.add(geoJsonLayer);
            }
        });
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>

Answer 1

在 ArcGis Js 4.x 版本中，您还必须声明一个视图构造函数（2D 的 MapView 或 3D 的 SceneView）。以下是有关如何设置 2D 视图的指南：https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html

另一种添加 Json 文件的方法是将现有的 json 文件转换为 esri json 格式，如本指南中所述：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-featurelayer-collection。

因为我不知道你的 json 文件属性，所以我无法提供一个有效的示例，但它真的很简单。

Answer 2

在 ArcGIS 4.9 中，您必须使用如下所示的 MapView：

GeoJson和EsriJson之间的转换，建议你使用arcgis-to-geojson-utils库

在您的 html 中导入库：

<script src="https://unpkg.com/@esri/arcgis-to-geojson-utils"></script>

javascript:

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/layers/FeatureLayer",
    "esri/layers/support/Field",
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"],
    function (Map, MapView, Graphic, FeatureLayer, Field, on, dom) {

        // Create mapView and map
        var mapView = new MapView({
            container: mapDiv,
            map: new Map({
                basemap: "gray"
            }),
            center: [-122.5, 45.5],
            zoom: 5
        }).when(function(mapView) {
            makeRequest("http://113.197.55.251/api/punjab", function(response) {
                createLayerFromGeoJSON(response, mapView);
            });
        });

        // Request the geojson data using XmlHttpRequest
        function makeRequest(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    callback(JSON.parse(xhr.response));
                }
            };
            xhr.onerror = function(error) {
              throw error;
            }
            xhr.send(); 
        };

        // Create the layer from the geojson data
        function createLayerFromGeoJSON(geojson, mapView) {

            // Convert geojson to esriJson using arcgis-to-geojson-utils library
            var esriJson = ArcgisToGeojsonUtils.geojsonToArcGIS(geojson);

            // Create an array of graphics from the esriJson
            var graphics = esriJson.map(function(feature, i) {
                return new Graphic({
                    geometry: {
                        type: "polygon",
                        rings: feature.geometry.rings
                    },
                    attributes: {
                        ObjectID: i,
                        Name: feature.attributes.Name
                    }
                 });
            });

            // Create a FeatureLayer from the graphics
            var layer = new FeatureLayer({
                title: "My feature layer",
                source: graphics, // autocast as an array of esri/Graphic
                geometryType: "polygon",
                fields: [
                    new Field({
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    }),
                    new Field({
                        name: "Name",
                        alias: "Name",
                        type: "string"
                    }),
                ], 
                objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
                renderer: {
                    type: "simple",  // autocasts as new SimpleRenderer()
                    symbol: {
                        type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                        color: {r: 200, g: 200, b: 200, a: 0.5},
                        outline: {  // autocasts as new SimpleLineSymbol()
                            width: 0.5,
                            color: "black"
                        }
                    }
                }
            });
            mapView.map.add(layer);
            return layer;
        };

    });

ArcGIS 3.x 到 4.x 迁移

ArcGIS 3.x to 4.x Migration

geojson

arcgis-js-api