ArcGIS API for JavaScript(未完待续)

一.准备

安装 esri-loader,使用命令 npm i esri-loader --save-dev 来安装.
用模块的方式引入 esri-loader;

esriLoader 有以下几个方法 :

1 getScript() 从库里面获取 js 文件 ;
2 isLoaded() 检测模块是否加载完成 ;
3 loadModules([], options) 用于加载arcgis 模块,
4 loadCss(url) 用于加载css文件
5 loadScript({url: "xxxxxxxx" }) 将js 加载到页面上,

1.安装esri-loader

npm install --save esri-loader

2.引入esri-loader

安装好esri-loader,在需要的位置引入esri-loader

import esriLoader from 'esri-loader'

也可以直接解构出loadModules,
如果直接解构出loadModules ,加载的时候就可以直接用loadModules([],options)

import { loadModules } from 'esri-loader';

3.引入css

在css文件内,或者页面style标签内,引入css

/*引入css*/
@import 'https://js.arcgis.com/4.7/esri/css/main.css';

4.加载地图模块 (以下是自己项目的代码片段,不完整)

const options = {
    version: '3.33',//版本号,可以省略
    url: 'https://js.arcgis.com/3.33/',//U这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
    css: true //是否加载css
};
esriLoader.loadModules([
  "esri/map",//地图
  'esri/views/MapView',
  "esri/layers/ArcGISTiledMapServiceLayer",//切片缓存地图服务，非动态
  "esri/layers/GraphicsLayer",//图形层
  "esri/symbols/PictureMarkerSymbol",//图片标记符号
  "esri/graphic",//几何图形
  "esri/geometry/Point",//坐标点
  "esri/geometry/webMercatorUtils",//web摩托卡工具
  "esri/tasks/locator",//地理编码
  "esri/dijit/Search",//搜索
], options).then(([
  Map,ArcGISTiledMapServiceLayer,GraphicsLayer,PictureMarkerSymbol,
  Graphic,Point,webMercatorUtils,Locator,Search]) => {
    // doSomeThing
    // 这里写业务逻辑
})
.catch(err => {
  console.error(err)
})

我们使用的是esri-loader的loadModules来加载不同的类(模块),这里的loadModules是基于AMD异步加载模块的规范的，所以能看到基本代码骨架为loadModules().then().catch()

如果不配置options，在源码中会自动加载官方提供的默认的options,API的url地址是 https://js.arcgis.com/4.7/

5.绘制地图 (以下是自己项目的代码片段,不完整)

现在已经引入所需的基本类,现在就已经可以按照官网提供的API进行开发了

/**
  * 初始化地图
  * @param point 
  */
initMap(){
  let map = new Map("#divId", {
   // basemap: "oceans",系统默认底图模板,如果自定义了底图ArcGISTiledMapServiceLayer,这个就不需要了
    logo: false,//不显示logo
    center: [116.397732, 39.910388], // long, lat 天安门广场
    zoom: 12,//缩放级别
    maxZoom: 18,//最大空间等级
    minZoom: 3//最小空间等级
  });
  let url="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";
  let layer = new ArcGISTiledMapServiceLayer(url);//创建底图,url是官方的
  map.addLayer(layer);//把底图加载到map中

  let graphicsLayer = new GraphicsLayer({ id: "gl" });//创建一个新图层
  map.addLayer(graphicsLayer); //将图层加载到map中

  let currentSymbol = new PictureMarkerSymbol('assets/icons/mark_bs.png', 19, 33);//创建图标
  let point = new Point([116.397732, 39.910388]);//创建点
  let marker = Graphic(point, currentSymbol);//根据点和图标创建地图定位点
  graphicsLayer.add(marker);//将地图定位点绘制到id为'gl'的图层上
  //graphicsLayer.remove(marker);//清除显示范围
  //地图点击事件
  map.on("click", async (e) => {
    marker.setGeometry(e.mapPoint);//e.mapPoint是点击位置的经纬度
    let point = await getAddressInfo(e.mapPoint);
    console.log("point:",point)
  })
  //地图加载完成
  map.on("load", () => {
    map.setExtent(marker._extent)//根据点的范围,设置地图边界
    map.hideZoomSlider();//禁用地图缩放
    map.disableMapNavigation();//禁用平移
    console.log("地图加载完成...");
  });
}
/**
  * 获取地址信息
  * @param point 
  */
async getAddressInfo(point) {
  if (point.spatialReference.isWebMercator()) {//墨卡托坐标转换成物理坐标经纬度
    point = webMercatorUtils.webMercatorToGeographic(point);
  }
  point.longitude = point.x;
  point.latitude = point.y;
  point.name = await locationToAddress(point);
  return point
}

/**
* 请求地理编码服务获取地址信息
* @param point 
*/
async locationToAddress(point) {
  //创建地理编码服务
  let url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer";
  var locator = new Locator(url);//官方URL是美国地址,中国需要相应地址
  await locator.locationToAddress(point, 100)//定位点100米附近的地址信息
  .then((candidate) => {
    return candidate.address;
  }).catch((e) => {
    return null;
  });
}
/**
* 根据中心点和半径,绘制圆圈
* @param center 中心点 
* @param radius 半径
*/
drawCircle(center, radius, symbol){
  var graphic = new this.esri.Circle({
    center: center,
    geodesic: true,
    radius: radius,
  });
  return new this.esri.Graphic(graphic, symbol);
}
/**
* 绘制点
* 根据symbol类型,绘制不同的点
*  PictureMarkerSymbol图片
*  TextSymbol文字
*  SimpleFillSymbol颜色填充
*/
drawMarker(point, symbol){
  return new this.esri.Graphic(point, symbol);
}
/**
* 计算两点间距离
* p1 p2 经纬度 必须是4326坐标系
*/
calculateDistance(p1, p2){
  let polyline = new esri.Polyline(new esri.SpatialReference({ wkid: 4326 }));//创建线对象
  polyline.addPath([p1, p2]);//线对象上添加两个点(此处并没有把线绘制到地图里,虚拟线)
  let dis = Math.round(esri.geometryEngine.geodesicLength(polyline));//获取线的长度
  return dis;
}

6.版本区别

随着Arcgis版本的更新,部分模块名称也有改变,比如:
3.x 作用
ArcGISDynamicMapServiceLayer 动态地图服务
ArcGISImageServiceLayer 影像服务，也属于动态地图服务
ArcGISTiledMapServiceLayer 切片缓存地图服务，非动态

let url="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";
var layer = new ArcGISTiledMapServiceLayer(url);
var map = new Map({
  //...
});
//将layer添加到map里，也可以直接新建map时加入进去。
map.add(layer);

4.x 作用
MapImageLayer 动态地图服务
ImageryLayer 影像服务，也属于动态地图服务
TileLayer 切片缓存地图服务，非动态

let url="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";
var layer= new TileLayer({url: url});
var map = new Map({
  //...
});
//将layer添加到map里，也可以直接新建map时加入进去。
map.add(layer);