arcgis for js 新手第一篇

在vue项目中

1. 下载依赖
2. npm install esri-loader --save-dev 或者 yarn add esri-loader --save-dev
3. mian.ts 内引入 import {loadModules} from ‘esri-loader’
4. 定义 arcgis 开放变量的方法

/* @Description:提供arcgis开放的变量
 */
/* 使用方法：
  import arcgisPackage from './utils/arcgistools.js';
  let Map = await arcgisPackage('Map');
*/

import { loadModules } from 'esri-loader';
let options = {
  url: 'http://115.29.42.107:8686/4.13/init.js',
  css: 'http://115.29.42.107:8686/4.13/esri/css/main.css',
};
const __arcgisUrl = {
  MapView: 'esri/views/MapView',
  Map: 'esri/Map',
  Basemap: 'esri/Basemap',
  TileLayer: 'esri/layers/TileLayer',
  FeatureLayer: 'esri/layers/FeatureLayer',
  GraphicsLayer: 'esri/layers/GraphicsLayer',
  Graphic: 'esri/Graphic',
  Point: 'esri/geometry/Point',
  SpatialReference: 'esri/geometry/SpatialReference',
  PictureMarkerSymbol: 'esri/symbols/PictureMarkerSymbol',
  WebTileLayer: 'esri/layers/WebTileLayer',
  WMTSLayer: 'esri/layers/WMTSLayer',
  WMSLayer: 'esri/layers/WMSLayer',
  MapImageLayer: 'esri/layers/MapImageLayer',
  TileInfo: 'esri/layers/support/TileInfo',
  Extent: 'esri/geometry/Extent',
  BaseTileLayer: 'esri/layers/BaseTileLayer',
  Request: 'esri/request',
  LayerList: 'esri/widgets/LayerList',
  Swipe: 'esri/widgets/Swipe',
  Print: 'esri/widgets/Print',
  DistanceMeasurement2D: 'esri/widgets/DistanceMeasurement2D',
  AreaMeasurement2D: 'esri/widgets/AreaMeasurement2D',
  ScaleBar: 'esri/widgets/ScaleBar',
  BasemapToggle: 'esri/widgets/BasemapToggle',
  Legend: 'esri/widgets/Legend',
  geometryEngine: 'esri/geometry/geometryEngine',
  Geoprocessor: 'esri/tasks/Geoprocessor',
  FeatureSet: 'esri/tasks/support/FeatureSet',
  ImageParameters: 'esri/layers/support/ImageParameters',
  Draw: 'esri/views/2d/draw/Draw',
  Field: 'esri/layers/support/Field',
  Polygon: 'esri/geometry/Polygon',
  WebMercatorUtils: 'esri/geometry/support/webMercatorUtils',
  Fullscreen: 'esri/widgets/Fullscreen',
  BasemapGallery: 'esri/widgets/BasemapGallery',
  Compass: 'esri/widgets/Compass',
  Sketch: 'esri/widgets/Sketch',
  GeoJSONLayer: 'esri/layers/GeoJSONLayer',
  SimpleRenderer: 'esri/renderers/SimpleRenderer',
  Font: 'esri/symbols/Font',
  TextSymbol: 'esri/symbols/TextSymbol',
  Color: 'esri/Color',
};

// 不暴漏在外的存储对象
const __arcgis = {}
// 获取变量
let arcgisPackage = async (key) => {
  let val;
  if (typeof __arcgis[key] === 'undefined') {
    await loadModules([__arcgisUrl[key]], options).then((e) => {
      val = e[0];
    });
    __arcgis[key] = val;
  } else {
    val = __arcgis[key];
  }
  return val
};
export default arcgisPackage;

5. 简单创建地图

    let Map = await arcgisPackage('Map');
    let MapView = await arcgisPackage('MapView');
    
    let customBasemap1 = new Basemap({
      baseLayers: [tdtylayer], // 天地图
      title: '天地图',
      id: 'myBasemap1',
      thumbnailUrl: Basemapthumbnail1,// 图片
    });
    
    // 创建map 实例
    map = new Map({
      basemap: customBasemap1,
    });
    // 创建view 实例
    view = new MapView({
      // 绑定的id
      container: 'viewDiv',
      map: map,
      // 位置信息
      center: mapConfig.centerPoint,
      // 缩放级别
      zoom: 5,
    });

6. 就可以出来地图了