ArcGIS|ArcGIS API for JavaScript的简单使用

叶一片2024-02-282024-07-08

一、创建一个2d地图

介绍：使用ArcGIS API for JavaScript创建一个交互式地图。我们将通过以下步骤来实现：

引入ArcGIS API for JavaScript库
配置API密钥
创建地图对象
设置地图视图
添加地图图层
控制地图视图

1. 引入ArcGIS API for JavaScript库

首先，需要在HTML文件中引入ArcGIS API for JavaScript库。在<head>标签内添加以下代码：

1	<script src="https://js.arcgis.com/4.28/"></script>

2. 配置API密钥

接下来，需要配置API密钥。在<script>标签内添加以下代码：

1
2
3

require(["esri/config"], function (esriConfig) {
    esriConfig.apiKey = "您的API密钥";
});

请确保替换"您的API密钥"为您自己的ArcGIS API密钥。

密钥获得链接：https://developers.arcgis.com/api-keys/

注册时尽量选择gmail注册，国内邮箱基本不成功。

3. 创建地图对象

创建一个地图对象。在<script>标签内添加以下代码：

require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
    var map = new Map({
        basemap: "satellite"
    });
});

这里选择了卫星底图，但也可以选择其他底图，如"topo-vector"、"streets"或"oceans"。

4. 设置地图视图

接下来，需要设置地图视图。在<script>标签内添加以下代码：

var mapview = new MapView({
    center: [106.526318, 29.34491],
    map: map,
    container: "container",
    zoom: 16,
});

这里设置了地图的中心点坐标、地图对象、容器元素和缩放级别。请确保替换"container"为您的HTML元素的ID。

所有代码如下

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div id="container">

    </div>
</body>

<script>
    require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {
        esriConfig.apiKey="AAPK547bf24978cc475ba9bbfcd09f845547FlVzLSN04E7LSO6MiSa0p3J2LVr4Rf_M0vi-GxYX1N_Q_Yg2plStJ_g8ZWXeTWge"

        var map = new Map({
            // basemap: "topo-vector"
            // basemap:"streets"
            // basemap:"oceans"
            basemap:"satellite"
        })

        console.log(map)

        var mapview = new MapView({
            // center: [106.504962, 29.533155],
            center: [106.526318,29.34491],
            map: map,
            container: "container",
            zoom: 16,
        })

        console.log(mapview)

    });
</script>

</html>

至此，已经成功创建了一个交互式地图。您可以根据需要添加更多功能和自定义设置。

二、添加切换图层和小部件

1.创建地图和视图

可以在上述代码进行添加，也可以自行在新建一个。

我们需要创建一个地图对象和一个场景视图对象。我们将使用require函数来加载所需的模块，并在回调函数中初始化这些对象。

请注意，使用Weather微件时，由于天气微件仅支持 SceneView 视图，因此需要将原来的MapView改为SceneView 视图

require(["esri/config", "esri/Map", "esri/views/SceneView", "esri/widgets/BasemapToggle","esri/widgets/Weather","esri/widgets/Daylight"],
function (esriConfig, Map, SceneView, BasemapToggle,Weather,Daylight) {
    esriConfig.apiKey = "你的API密钥"

    var map = new Map({
        basemap: "topo-vector"
    })

    var mapview = new SceneView({
        center: [106.526318, 29.34491],
        map: map,
        container: "container",
        zoom: 16,
        ground:"world-elevation"
    })
});

请确保替换"你的API密钥"为你自己的ArcGIS API密钥。

2. 添加图层切换、天气和日光控件

最后，我们将添加图层切换、天气和日光控件到地图视图上。

// 切换图层
var BasemapToggle = new BasemapToggle({
    nextBasemap: "oceans",
    view: mapview
})

mapview.ui.add(BasemapToggle, "bottom-right")

// 天气
var weather = new Weather({
    view: mapview
})
mapview.ui.add(weather, "bottom-left")

//日光
var daylight = new Daylight({
    view: mapview
})        
mapview.ui.add(daylight, "top-right")

所有代码如下

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div id="container">

    </div>
</body>

<script>
    require(["esri/config", "esri/Map", "esri/views/SceneView", "esri/widgets/BasemapToggle","esri/widgets/Weather","esri/widgets/Daylight"],
     function (esriConfig, Map, SceneView, BasemapToggle,Weather,Daylight) {
        esriConfig.apiKey = "AAPK547bf24978cc475ba9bbfcd09f845547FlVzLSN04E7LSO6MiSa0p3J2LVr4Rf_M0vi-GxYX1N_Q_Yg2plStJ_g8ZWXeTWge"

        var map = new Map({
            basemap: "topo-vector"
            // basemap:"streets"
            // basemap:"oceans"
            // basemap: "satellite"
        })

        console.log(map)

        var mapview = new SceneView({
            center: [106.526318, 29.34491],
            map: map,
            container: "container",
            zoom: 16,
            ground:"world-elevation"
        })

        console.log(mapview)

        // 切换图层
        var BasemapToggle = new BasemapToggle({
            naxtBasemap: "oceans",
            view: mapview
        })

        mapview.ui.add(BasemapToggle, "bottom-right")

        // 天气
        var weather = new Weather({
            view: mapview
        })
        mapview.ui.add(weather, "bottom-left")

        //日光
        var daylight = new Daylight({
                        view: mapview

        })        
        mapview.ui.add(daylight, "top-right")


    });
</script>

</html>

至此，已经成功创建了一个交互式地图。您可以根据需要添加更多功能和自定义设置。

三、加入空间实体图层

因中心点不同，建议大家重新新建文件实操。

导库及配置API和前面一样，我们直接创建地图和视图

1. 创建地图和视图

接下来，我们需要使用ArcGIS API for JavaScript创建地图和视图。在<script>标签内添加以下代码：

 require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {
    esriConfig.apiKey = "你的API密钥";

    var map = new Map({
        basemap: "satellite"
    });

    var mapview = new MapView({
        center: [-118.765879, 34.106389],
        map: map,
        container: "container",
        zoom: 12,
    });
});

请确保将"你的API密钥"替换为你自己的ArcGIS API密钥。

2. 添加图层

现在，我们可以向地图中添加图层。在<script>标签内添加以下代码：

var trailheads = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
});

map.add(trailheads, 0);

var trails_styled = new FeatureLayer({
   url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
});

map.add(trails_styled, 0);

var parks_and_open_space_styled = new FeatureLayer({
    url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0"
});

map.add(parks_and_open_space_styled, 0);

数据来源：

点：https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0

线：https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0

面：https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0

3. 添加图例

最后，我们可以向地图视图中添加一个图例。在<script>标签内添加以下代码：

var legend = new Legend({
    view: mapview
});
mapview.ui.add(legend, "top-right");

完成以上步骤后，你应该可以在浏览器中看到包含三个图层（Trailheads、Trails和Parks and Open Space）的地图，以及一个显示每个图层样式的图例。

全部代码如下

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div id="container">

    </div>
</body>

<script>
    require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend"],
        function (esriConfig, Map, MapView, FeatureLayer, Legend) {
            esriConfig.apiKey = "AAPK547bf24978cc475ba9bbfcd09f845547FlVzLSN04E7LSO6MiSa0p3J2LVr4Rf_M0vi-GxYX1N_Q_Yg2plStJ_g8ZWXeTWge"

            var map = new Map({
                // basemap: "topo-vector"
                // basemap:"streets"
                // basemap:"oceans"
                basemap: "satellite"
            })

            console.log(map)

            var mapview = new MapView({
                // center: [106.504962, 29.533155],
                // center: [106.526318,29.34491],
                center: [-118.765879, 34.106389],

                map: map,
                container: "container",
                zoom: 12,
            })

            console.log(mapview)

            var trailheads = new FeatureLayer({
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
            })

            map.add(trailheads, 0)

            var trails_styled = new FeatureLayer({
               url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
            })

            map.add(trails_styled, 0)

            var parks_and_open_space_styled = new FeatureLayer({
                url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0"
            })

            map.add(parks_and_open_space_styled, 0)

            //图例
            var legend = new Legend({
                view: mapview

            })
            mapview.ui.add(legend, "top-right")

        });
</script>

</html>

至此，已经成功创建了一个交互式地图。您可以根据需要添加更多功能和自定义设置。

代码已上传至仓库：https://gitee.com/ye-yipian/web-cfec2024/tree/master/Webgis ，请参考实验一至实验三，更多关于ArcGIS API for JavaScript的信息和示例，请参考官方文档：https://developers.arcgis.com/javascript/latest/