一文讓你徹底掌握ArcGisJS地圖管理的祕密

使用ArcGis開發地圖

引用ArcGisJS

使用ArcGisJS開發地圖，首先需要引入ArcGis的Js檔案和CSS檔案，引入方式有兩種，一種是官網JS引用，一種是本地JS引用。如下：

官網JS引用

  <link rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>

本地JS引用

<link rel="stylesheet" href="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css">
    <script src="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/init.js"></script>

require內建物件

require是ArcGisJS開發的起點，類似於C#中的引入名稱空間的using，不同的是require引入的都是js檔案，每個js檔案都是一個大的js類。

require有兩個引數，第一個引數接收js檔案地址，第二個引數輸出一個函式，函式的引數返回引入js檔案的js類，類順序與上面引入js檔案的順序的一致。

程式碼如下：

 <script>

        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/Basemap",
            "esri/layers/Layer"
        ], function (
            esriConfig,
            Map,
            MapView,
            Basemap,
            Layer) {
            //使用地圖物件
        }
        );
</script>

下面我們看一個ArcGisJS本地部署的網站下的esri資料夾的結構。

如圖所示，我們上面使用"esri/config"字串引入的js檔案就是esri資料夾下的config.js檔案。

地圖開發

基礎開發

地圖開發主要是在require的輸出函式中做的，具體開發邏輯是使用Map類建立地圖，使用View類繫結div元素，然後將Map地圖物件賦值到View類中，實現地圖在div中展示。

Map類與View類各有兩個子類， WebMap，MapView對應二維地圖，SceneMap，SceneView對應三維地圖。

編寫程式碼展示地圖

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebArcGis_JS4</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>

        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/Basemap",
            "esri/layers/Layer"
        ], function (
            esriConfig,
            Map,
            MapView,
            MapImageLayer,
            Basemap,
            Layer) {
            esriConfig.apiKey = "YOUR_API_KEY";
 
            let layer = new MapImageLayer({
                url: "http://192.168.1.2:6080/arcgis/rest/services/SampleWorldCities/MapServer"
            });

            const map = new Map({
                basemap: new Basemap({ baseLayers: [layer] }),
                logo: false,  //不顯示Esri的logo

            });
            const view = new MapView({
                map: map,
                center: [125.04658531829789, 41.978062677899004],
                zoom: 13, // Zoom level
                container: "viewDiv" // Div的Id
            });
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

如上程式碼所示，我們先定義了一個layer圖層，並指定地圖url（地址來自於ArcGisServer釋出），然後定義了一個Map物件，將定義好的圖層定義為底圖（地圖有很多個圖層組成，最下面的圖層為底圖），Map物件初始化時接受basemap引數，其值為圖層物件，含義為設定底圖圖層。

然後定義個view物件，初始化接受兩個主要引數，一個是map，一個是container，map賦值我們上面定義的map物件，container指向一個div的id。

最後，我們再body中定義一個div取名viewDiv。

然後我們執行，介面如下：

監聽事件

基礎地圖使用編寫完後，我們編寫一個監聽事件，程式碼如下：

//監聽單擊事件
view.on("click", function (event) {

    console.log(event);
    console.log("x:" + event.mapPoint.x);
    console.log("y:" + event.mapPoint.y);
    console.log("longitude:" + event.mapPoint.longitude);
    console.log("latitude:" + event.mapPoint.latitude);
});

我們使用view物件的on函式，實現了一個點選事件的監聽，介面效果如下：

監視屬性

ArcGis裡除了監聽，還支援監視，下面我們使用watch函式監視scale（比例尺）屬性。

 var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
                console.log(propertyName + " changed from " + oldValue + " to " + newValue);
            });

小部件

ArcGis還提供豐富的小部件，比如比例尺，座標，指南針等，我們只需要引入對應的js類，就可以使用這些小部件了。

小部件使用程式碼如下：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebArcGis_JS4</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>

        require(["esri/config",
            "esri/Map",
            "esri/WebMap",
            "esri/views/MapView",
            "esri/widgets/Feature",
            "esri/Graphic",
            "esri/tasks/support/Query",
            "esri/widgets/FeatureTable",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/layers/MapImageLayer",
            "esri/layers/BaseDynamicLayer",
            "esri/Basemap",
            "esri/layers/TileLayer",
            "esri/layers/ImageryLayer",
            "esri/widgets/Home",
            "esri/layers/support/Field",
            "esri/geometry/Point",
            "esri/widgets/LayerList",
            "esri/widgets/Swipe",
            "esri/widgets/AreaMeasurement2D",
            "esri/widgets/DistanceMeasurement2D",
            "esri/widgets/BasemapLayerList",
            "esri/widgets/Bookmarks",
            "esri/widgets/Expand",
            "esri/widgets/Compass",
            "esri/widgets/CoordinateConversion",
            "esri/widgets/Fullscreen",
            "esri/widgets/ScaleBar",
            "esri/widgets/Print"
        ], function
            (esriConfig,
                Map,
                WebMap,
                MapView,
                Feature,
                Graphic,
                Query,
                FeatureTable,
                FeatureLayer,
                GraphicsLayer,
                MapImageLayer,
                BaseDynamicLayer,
                Basemap,
                TileLayer,
                ImageryLayer,
                Home,
                Field,
                Point,
                LayerList,
                Swipe,
                AreaMeasurement2D,
                DistanceMeasurement2D,
                BasemapLayerList,
                Bookmarks,
                Expand,
                Compass,
                CoordinateConversion,
                Fullscreen,
                ScaleBar,
                Print
            )  {

            var baseUrl = "http://192.168.1.21:6080/arcgis/rest/services/SampleWorldCities/MapServer";
 
            let layer = new MapImageLayer({
                url: baseUrl
            });

            const map = new Map({
                basemap: new Basemap({ baseLayers: [layer] }),
                logo: false,  //不顯示Esri的logo

            });
            const view = new MapView({
                map: map,
                center: [125.04658531829789, 41.978062677899004],
                zoom: 3, // Zoom level
                container: "viewDiv" // Div的Id
            });
            //==============座標小部件
            var ccWidget = new CoordinateConversion({
                view: view
            });
            view.ui.add(ccWidget, "bottom-left");
            //===============比例尺小部件
            let scaleBar = new ScaleBar({
                view: view,
                style: "ruler"
            });
            view.ui.add(scaleBar, {
                position: "bottom-left"
            });
            //===============指南針小部件
            var compassWidget = new Compass({
                view: view
            });
            view.ui.add(compassWidget, "bottom-right");
            //===============圖層小部件
            let basemapLayerList = new BasemapLayerList({
                basemapTitle: "圖層列表",
                view: view
            });
            var basemapLayerListExpand = new Expand({
                view: view,
                content: basemapLayerList,
                expandTooltip: "圖層",
                expanded: false
            });
            view.ui.add(basemapLayerListExpand, "top-left");
            //===============主頁小部件
            let homeWidget = new Home({
                view: view
            });
            view.ui.add(homeWidget, "top-left");
            //===============全屏小部件
            fullscreen = new Fullscreen({
                view: view
            });
            view.ui.add(fullscreen, "top-left");
            //===============書籤小部件
            const bookmarks = new Bookmarks({
                view: view,
                editingEnabled: true
            });
            const bkExpand = new Expand({
                view: view,
                content: bookmarks,
                expandTooltip: "書籤",
                expanded: false
            });
            view.ui.add(bkExpand, "top-left");
            //===============測量小部件
            let distanceWidget = new DistanceMeasurement2D({
                view: view
            });
            var distanceExpand = new Expand({
                view: view,
                content: distanceWidget,
                expandTooltip: "距離測量",
                expanded: false
            });
            view.ui.add(distanceExpand, "top-left");

            let areaWidget = new AreaMeasurement2D({
                view: view
            });
            var areaExpand = new Expand({
                view: view,
                content: areaWidget,
                expandTooltip: "面積測量",
                expanded: false
            });
            view.ui.add(areaExpand, "top-left");

        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

效果圖如下：

屬性圖層

屬性圖層的類是FeatureLayer，FeatureLayer類有三個比較重要的屬性source（資料來源），fields（圖層中可用欄位），popupTemplate（點選彈出模板）。

正確為這三個屬性賦值後，我們就可以實現在地圖上畫兩個圖形（這裡畫圓點），並且點選圖形彈出圖形的屬性。

程式碼如下：

            var baseUrl = "http://192.168.50.28:6080/arcgis/rest/services/SampleWorldCities/MapServer";
 
            let layer = new MapImageLayer({
                url: baseUrl
            });
            const map = new Map({
                basemap: new Basemap({ baseLayers: [layer] }),
                logo: false,  //不顯示Esri的logo
            });
            let featuresSource = [
                {
                    geometry: {
                        type: "point",
                        x: 61.94658531829789,
                        y: 41.978062677899004

                    },
                    attributes: {
                        ObjectID: 1,
                        Name: "Kiba",
                        MsgTime: Date.now(),
                        Msg: "Hello Kiba"
                    }
                },
                {
                    geometry: {
                        type: "point",
                        latitude: 41.04658531829789,
                        longitude: 60.978062677899004

                    },
                    attributes: {
                        ObjectID: 2,
                        Name: "Kiba518",
                        MsgTime: Date.now(),
                        Msg: "Hello Kiba518"
                    }
                }
            ];
            // 彈出框設定
            const popupTemplate = {
                "title": "資料資訊",
                "content": "<b>Id:</b> {ObjectID}<br><b>姓名:</b> {Name}<br><b>時間:</b> {MsgTime}<br><b>訊息:</b> {Msg}"
            }

            let layer1 = new FeatureLayer({
                source: featuresSource,
                objectIdField: "ObjectID",//唯一標識欄位
                fields://定義圖層中可用欄位 name欄位名  alias別名  type型別
                    [{
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    }, {
                        name: "Name",
                        alias: "Name",
                        type: "string"
                    },
                    {
                        name: "MsgTime",
                        alias: "MsgTime",
                        type: "date"
                    },
                    {
                        name: "Msg",
                        alias: "Msg",
                        type: "string"
                    }],
                popupTemplate: popupTemplate
            });
            map.add(layer1);
            const view = new MapView({
                map: map,
                center: [65.04658531829789, 41.978062677899004],
                zoom: 13, // Zoom level
                container: "viewDiv" // Div的Id
            });

實現結果如下：

結語

到此ArcGis實現地圖管理就介紹完了。

PS：很多公司把會給會GIS開發的程式設計師更高的工資。

----------------------------------------------------------------------------------------------------

到此，到此JArcGisJS地圖管理就已經介紹完了。

程式碼已經傳到Github上了，歡迎大家下載。

Github地址： https://github.com/kiba518/ArcGisWebJs

----------------------------------------------------------------------------------------------------

注：此文章為原創，任何形式的轉載都請聯絡作者獲得授權並註明出處！
若您覺得這篇文章還不錯，請點選下方的【推薦】，非常感謝！

https://www.cnblogs.com/kiba/p/15133225.html

一文讓你徹底掌握ArcGisJS地圖管理的祕密