arcgis for JavaScript入门篇

五彩斑斓黑123

已于 2023-07-10 23:39:53 修改

阅读量2.4k

点赞数 2

分类专栏： arcgis for javascript 文章标签： arcgis javascript 开发语言

于 2023-07-10 23:28:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_69444691/article/details/131650151

版权

arcgis for javascript 专栏收录该内容

1 篇文章

订阅专栏

介绍

ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。

ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。

开发人员可以使用ArcGIS for JavaScript API来添加地图图层、标记、线条、填充区域等，并使用各种交互式工具来浏览和分析地图数据。此外，ArcGIS for JavaScript还提供了丰富的API和工具，用于在地图上添加自定义控件、处理鼠标事件和地图事件、以及与其他Web应用程序集成。

使用步骤

创建一个简单的地图有以下步骤：

1.引入官方api

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

2.在html中创建一个地图容器

 <div id="container"></div>

注意：要给容器加上宽和高，否则不会显示地图

3.创建一个Mpa实例，并定义地图的底图。

 var map = new Map({
          basemap: 'streets' // 指定地图的底图
        })

底图的类型可以有如下选择： topo，streets，satellite，hybrid，dark-gray，gray，national-geographic，oceans，osm，terrain，dark-gray-vector，gray-vector，streets-vector，streets-night-vector，streets-navigation-vector，topo-vector，streets-relief-vector

4.创建地图视图。使用ArcGIS for JavaScript创建地图视图需要使用MapView类。

 var mapview = new MapView({
          container: 'container', // 指定对应的容器
          map: map,
          center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)
          zoom: 12, // 地图缩放等级
        })

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>加载一个地图</title>
    <!-- 加载官方api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.15/"></script>
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="text/javascript">
      require(['esri/Map', 'esri/views/MapView', 'esri/widgets/BasemapToggle'], (Map, MapView, BasemapToggle) => {
        //加载地图底图
        var map = new Map({
          basemap: 'hybrid' // 指定地图的底图
        })
        //加载视图
        var mapview = new MapView({
          container: 'container', // 指定对应的容器
          map: map,
          center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)
          zoom: 12 // 地图显示比例
        })

        const basemapGallery = new BasemapToggle({
          view: mapview,
          nextBasemap: 'terrain'
        })
        mapview.ui.add(basemapGallery, 'bottom-right')
      })
    </script>
  </head>

  <body>
    <div id="container"></div>
  </body>
</html>

效果展示：