ArcGIS API for JavaScript Map与地图控件-Toy模板网

这篇具有很好参考价值的文章主要介绍了ArcGIS API for JavaScript Map与地图控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

添加网页

引用接口

添加模块与模块实例

获取API密钥

创建地图

创建地图视图

添加图形图层

在底图之间切换

在图库中选择底图

默认底图视图（Home）控件

图层列表（Layerlist）控件

图例（Legend）控件

比例尺（ScaleBar）控件

指北针（Compass）控件

查看我的位置（Locate）控件

搜索引擎（Search）控件

3D平移或旋转（NavigationToggle）控件

放大缩小（Zoom）控件

控件总结

添加网页

添加 HTML 和 CSS 以创建包含元素的页面。元素显示地图，其CSS重置任何浏览器设置，以便它可以使用浏览器的整个宽度和高度。

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximun-scale=1 user-scalable=no" />
        <title>ArcGIS API for JavaScript Tutorials:Display a map</title>
        <style>
            html,
            body,
            #viewDiv{
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="viewDiv"></div>
    </body>
</html>

引用接口

在标记中，添加对 CSS 文件和 JS 库的引用。（需要使用最新的API库，本文使用的4.23版本的）

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

添加模块与模块实例

ArcGIS JS API 包含AMD模块。在语句中引用所需模块，这里用Map展示。

<script>
    require(["esri/Map"], function(Map){

    });
</script>

获取API密钥

接口密钥是访问ArcGIS服务所必需的。(这个需要自己申请，学习使用不太需要。)

esriConfig.apiKey = "YOUR_API_KEY";

创建地图

在语句中，创建新的 Map 。要启用对底图图层服务的访问，设置地图的属性。

require(["esri/Map"], function(Map){
    const map = new Map({
        basemap: "streets",// Basemap layer service
    });
});

创建地图视图

创建 MapView 并设置 map 属性。要使地图视图居中，请将 center 属性设置为，并将 zoom 属性设置为。将容器属性设置为以显示地图的内容

require(["esri/views/MapView"], function(MapView){
    const view = new MapView({
        map: map,
        center: [100,32], // Longitude, latitude
        zoom: 4, // Zoom level
        container: "viewDiv" // Div element
    });
});

添加图形图层

一个图形图层是的容器图形.它与地图视图以在地图.您可以添加多个图形图层到地图视图.图形图层显示在所有其他图层之上层，将刚刚创建的地图放入图形图层

require(["esri/layers/GraphicsLayer"], function(GraphicsLayer){
    const graphicsLayer = new GraphicsLayer();
    const map = new Map({
        basemap: "streets",// Basemap layer service
        layers:[graphicsLayer]
    });
});