Миграция с ArcGIS 3.x на 4.x - PullRequest
0 голосов
/ 12 ноября 2018

Я использовал ArcGIS JS API 3.10 и у меня есть Github хранилище для отображения данных GeoJSON на карте, но теперь мне нужно перейти на Версия 4.9 Я читаю документ миграции 3.x в 4.x, опубликованный ESRI, и применяю его, например, местоположение ссылки и т. Д., Но он больше не работает.

<!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>

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

В 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;
        };

    });
0 голосов
/ 12 ноября 2018

В версии ArcGis Js 4.x вы также должны объявить конструктор вида (MapView для 2D или SceneView для 3D). Вот руководство по настройке 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-файла, я не могу предоставить рабочий образец, но он действительно прост.

...