Angualr集成arcgis

刚接触这个arcgis，做个记录；特别是angular中引入；

1.需要引入esri-loader来加载map，view以及图层等用到的模块；

在package.json中添加引用的包：

"esri-loader": "^2.13.0"

2.开发具体的地图，这里先以点图为例

首先页面的html元素内容:

<div #mapViewNode></div>

然后component中会将地图绑定到这个dom元素上来；下面是component中的内容：

1>首先导入需要的模块，比如map和view等模块

const [Map, MapView, BaseMap, Extent, TileLayer, FeatureLayer, HeatmapRenderer, esriConfig, urlUtils,Graphic,GraphicsLayer] = await loadModules([
  'esri/Map',
  'esri/views/MapView',
  'esri/Basemap',
  'esri/geometry/Extent',
  'esri/layers/TileLayer',
  'esri/layers/FeatureLayer',
  'esri/renderers/HeatmapRenderer',
  'esri/config',
  'esri/core/urlUtils',
  "esri/Graphic",
  "esri/layers/GraphicsLayer",
  'dojo/domReady!'
]);

2>先构造一个最底层的map

这里的arcgis服务使用的是'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer';

function getBaseMap(basemapcof) {
  const baselayer = new TileLayer({
    url: basemapcof.layer
  });
  return new BaseMap({
    baseLayers: baselayer,
    title: basemapcof.title,
  });
}

const map = new Map({
  basemap: getBaseMap({
    title: '影像图',
    type: 'tile',
    layer: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
  })
});

3>构造一个view层来加载map

const view = new MapView({
  container: this.mapViewEl.nativeElement,
  map: map,
  extent: new Extent({
    xmin: 120.80012536879065,
    ymin: 30.54553222673087,
    xmax: 122.27874755895266,
    ymax: 31.945383160404504,
    spatialReference: {wkid: 4326}
  })
});
view.zoom = 19;
view.scale = 24000;
view.center = [121.38445719, 31.75367695];
view.ui._removeComponents(['attribution']);

代码说明，container是地图绑定的dom元素；所以在component中需要定义dom元素的变量如下

@ViewChild('mapViewNode', {static: true}) private mapViewEl: ElementRef; //mapViewNode跟html中的dom元素设置一样的；

extent中是地图的经纬度的返回，用于初始化的时候地图加载的边界；

至此，基础的地图就可以显示并加载出来了；

3.添加点图层

如果我们需要在地图上添加很多基于经纬度的点来标示，那么就需要添加点图层；我们简单演示一个例子，代码如下

var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
var point = {
  type: "point",
  longitude: 121.38445719,
  latitude: 31.77367695
};

var simpleMarkerSymbol = {
  type: "picture-marker",
  url: "/content/images/svg/icon_address.svg",
  width: "30px",
  height: "30px",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  },
};
let pointGraphic = new Graphic({
  geometry: point,
  symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);

1>定义一个GraphicsLayer的图层；然后添加到map里面；

2>定一个pointGraphic：Graphic，然后添加到graphicsLayer里面，这个pointGraphic通过一个点和simpleMarkerSymbol来构造；效果图如下所示

Angualr集成arcgis

这里simpleMarkerSymbol主要是为了显示这个点的图标；是自定义的一个svg；

4.有时候需要在点上添加文字，那么需要再定义一个textGraphic；用来标示点的一些说明文字

var textGraphic = new Graphic({
  geometry: {
    type: "point",
    longitude: 121.38445719,
    latitude: 31.77367695
  },
  symbol: {
    type: "text",
    borderLineColor: [255,0,0,255],
    borderLines: 10,
    color: [25,25,25],
    haloSize: 1,
    text: "这是一段说明文字",
    xoffset: 30,
    yoffset: 10,
    font: {
      size: 10
    }
  }
});
graphicsLayer.add(textGraphic);

然后同样添加到GraphicsLayer中；

效果如下所示

Angualr集成arcgis

5.添加热力图

1>我们要添加一个featureLayer的图层；

const featureLayer = new FeatureLayer({
  source: this.featureData, //点数据集
  title: '热力图',
  objectIdField: 'ObjectID', //重要！！！
  renderer: heatmapRenderer //渲染器
});
map.add(featureLayer);

这里的objectIdField是点的唯一标示，在featureData中会体现出来；

2>这里面renderer是渲染器，定义如下所示

const heatmapRenderer = new HeatmapRenderer({
  colorStops: [
    {ratio: 0, color: 'rgba(255, 255, 255, 0)'},
    {ratio: 0.2, color: 'rgba(255, 255, 255, 1)'},
    {ratio: 0.5, color: 'rgba(255, 140, 0, 1)'},
    {ratio: 0.8, color: 'rgba(255, 140, 0, 1)'},
    {ratio: 1, color: 'rgba(255, 0, 0, 1)'}
  ],
  blurRadius: 14,
  maxPixelIntensity: 50,
  minPixelIntensity: 0
});

3>this.featureData是热力图中的点的数据；格式如下所示

[
  {
    "geometry": {
      "type": "point",
      "x": 121.22,
      "y": 31.31
    },
    "attributes": {
      "ObjectID": 1
    }
  },
  {
    "geometry": {
      "type": "point",
      "x": 121.12,
      "y": 31.34
    },
    "attributes": {
      "ObjectID": 2
    }
  }]

ok，基本arcgis的总结就到这里，只是一些入门的知识，后面持续补充吧