arcgis of js 4.x 笔记（1）基础、map、在线底图、自定义底图（以及推荐的在线底图）

最新推荐文章于 2022-09-17 11:49:06 发布

原创最新推荐文章于 2022-09-17 11:49:06 发布 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis of js

arcgis of js 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了ArcGIS API for JavaScript的使用方法，包括如何构建基本地图、加载自定义地图及地图图层，适合ArcGIS初学者快速上手。

写这篇文章的主要目的有三：
1.为了记录学习arcgis of js 的过程。
2.回顾之前学习的记录并进行整理，为后面再次使用提供便捷。
3.帮助新手更好上手arcgis of js 4.x
另外：该文章只是从使用角度去赘述，不深入研究里面的方法，
如果有错误，请大佬在评论区指正。

1.简单的描述如何学习官网的api和例子。

首先arcgis of js 的3.x和4.x在使用上有一定量的差距，4.x 整合了一些新的方法以及添加了一些新的控件，以及大量的3D效果。因为项目中都没运用到3D，所以大家可以通过官网API自行学习。

arcgis of js 4.x 官网： https://developers.arcgis.com/javascript/

官网我目前常用的就是列子Demo以及对于的api

在这里插入图片描述
在simple code 里面，可以搜索对应官方demo

或者点击查看对应demo或者点击 Explore in the sandbox 查看对应的代码

Api 这块可以搜索到具体的方法和对应的描述

在这里插入图片描述
对应使用方法
这可以查看对应的例子

2.构造简单的地图

简单地图的构建描述
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html

简单的描述就是

1.引用ArcGIS API for JavaScript**

首先导入arcgis of js 的JS 和CSS
其中css中有不同主题（light或者dark）

<script src="https://js.arcgis.com/4.12/"></script>
<!--明亮主题 -->
<link  rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css"/>	
 <!--黑色主题 -->		
<!-- <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/dark/main.css"/> -->

然后写html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>创建简单的地图/title>
  </head>
</html>

2.加载模块

加载模块相当于导入对应的“js” ，要使用对应的方法都需要导入对应的“JS”（模块）

<script>
  require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) {
    // Code to create the map and view will go here
  });
</script>

3.构建代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>创建简单的地图</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.13/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "streets"  //加载对应的地图（不同底图）
        });
        var view = new MapView({
          container: "viewDiv", //  这个就是map div的ID
          map: map, // 加载对应（上面）的map
          zoom: 4, // 地图初始化是缩放的级别
          center: [15, 65] // 地图初始化是中心点的位置
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

显示地图。
在这里插入图片描述
其中 basemap: “streets” 有不同类别

类别	实例
topo
streets
satellite
更多	点击查看更多

如果想使用自定义的地图得使用 Basemap、MapImageLayer 模块进行加载

<script>
  require([ "esri/Map",
           "esri/views/MapView", 
           "esri/Basemap",   //加载底图
           "esri/layers/MapImageLayer" //加载对应的img图层
            ],
  function( Map,
           MapView,
           Basemap,
           MapImageLayer) { 
			var layerBaseMap = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/Earth10LL/MapServer",   
                //对应发布的底图
            });
            var customBasemap = new Basemap({
                baseLayers: [layerBaseMap],
                title: "Custom Basemap",
                id: "myBasemap"
            });
              const map = new Map({
                 basemap: customBasemap, //加载自定义底图
            });
            var view = new MapView({
                container: "mapDiv",
                map: map,
                zoom: 6,
                center: [123, 35],
            });

  });
</script>

2020年 4月 8日更新
如果出现加了自定义地图，中心设置无效的情况，然后就可以使用

view.extent = new Extent({
	xmin: 12546100,
		ymin: 5031800,
		xmax: 14193600,
		ymax: 3633900,
		spatialReference: {
			wkid: 102100
		}
	});

其中导包路径可以在官网查询到
另外推荐一个直接可以使用的MapImageLayer网址
智图GeoQ

这个可以直接使用