m3-arcgis

arcgis api 包装 提供更高效的使用方式， 列举常用的 api

Table of Contents

• m3-arcgis
• Table of contents
• Install
• Usage
  • Loading m3-arcgis
  • 初始化
  • 组件使用方式
  • arcigs 图层

Install

npm install --save-dev m3-arcgis

or

yarn add -D m3-arcgis

Usage 使用

下面是简单的使用方式

Loading m3-arcgis

for es6 module / 对于支持 es6 方式的加载

/* 引入编译好的 */
import M3Arcgis from "m3-arcgis/dist";

for ts / 对于支持 ts 方式的加载

//支持声明类型
import M3Arcgis from "m3-arcgis";

for js / 对于没有使用模块化的 js

<!-- index.html -->
<!-- 将编译好的文件拷贝到项目，然后直接引入 -->
<script src="./arcgis.js"></script>

初始化

import M3Arcgis from "m3-arcgis";

const arcgis = new M3Arcgis({
  /*  地图容器，dom-id-string | HTMLElement */
  container: 'map'
});

 /* 需要等待arcgis初始化完成 */
await arcgis.init("http://xxxx/arcgis_js/api/4.12/");

const { Instance } = arcgis;

  /* 业务操作 */
  ... ... ...

组件使用方式

底图的使用

列举几个常用的底图，在线和本地切片，天地图，高德地图，标准的 google 切片，由 arcmap 自定义方案的切片，详见

  ... ... ...

const { Instance } = arcgis;

/* 天地图 - 在线 - 矢量 - 墨卡托 */
const vectorOLBaseMap = baseLayer.customTileLayer({
  id: "vectorOLBaseMap",
  urlTemplate:
    "https://xxx/T=vec_w&x={col}&y={row}&l={level}"
});

/* google - 在线 - 卫星 - 墨卡托 */
const satelliteOLBaseMap = baseLayer.customTileLayer({
  id: "satelliteOLBaseMap",
  visible: false,
  urlTemplate: `http://xxx/lyrs=s@716&x={col}&y={row}&z={level}`
});


/* 本地切片 - 矢量 - 标准google切片格式 - arcgis16进制命名 */
const vectorBaseMap = baseLayer.customTileLayer({
  id: "vectorMap",
  urlTemplate:
    "https://xxx/{level}/{row}/{col}.png",
  getTileUrl(level, row, col) {
    return this.urlTemplate
      .replace("{level}", "L" + level.toString().padStart(2, 0))
      .replace("{col}", "C" + col.toString(16).padStart(8, 0))
      .replace("{row}", "R" + row.toString(16).padStart(8, 0));
  }
});

/* 本地切片 - 卫星 - 自定义切片方案 - arcgis16进制命名 */
const tileInfo = {
  rows: 256,
  cols: 256,
  compressionQuality: 0,
  origin: { x: -20037700, y: 30241100 },
  spatialReference: { wkid: 102100 },
  lods: [
    { level: 0, resolution: 16.933367200067735, scale: 64000 },
    { level: 1, resolution: 8.4666836000338677, scale: 32000 },
    { level: 2, resolution: 4.2333418000169338, scale: 16000 },
    { level: 3, resolution: 2.1166709000084669, scale: 8000 },
    { level: 4, resolution: 1.0583354500042335, scale: 4000 },
    { level: 5, resolution: 0.52916772500211673, scale: 2000 },
    { level: 6, resolution: 0.26458386250105836, scale: 1000 },
    { level: 7, resolution: 0.13229193125052918, scale: 500 },
    { level: 8, resolution: 0.066145965625264591, scale: 250 },
    { level: 9, resolution: 0.033072982812632296, scale: 125 }
  ]
};
const satelliteBaseMap = baseLayer.customTileLayer({
  id: "satelliteMap",
  visible: false,
  urlTemplate:
    "https://xxx/{level}/{row}/{col}.png",
  tileInfo,
  getTileUrl(level, row, col) {
    return this.urlTemplate
      .replace("{level}", "L" + level.toString().padStart(2, 0))
      .replace("{col}", "C" + col.toString(16).padStart(8, 0))
      .replace("{row}", "R" + row.toString(16).padStart(8, 0));
  }
});

view 的基本使用

主要有 缩放，中心点，属性监听，地图上的 ui 组件，截图，屏幕坐标和地图坐标转换等功能

const { view: _view } = Instance.getInstanceView();

/* 设置地图缩放约束 */
_view.constraints = {
  minScale: 300000,
  maxScale: 3600,
  maxZoom: 17,
  minZoom: 5
  ... ...
}

/* 设置中心点 */
_view.center = [x, y];
/* 设置缩放等级 */
_view.zoom = 8;
_view.scale = 20000;


/**
 * 设置中心点（动画过渡）
 * @param target 支持center结合zoom scale，geometry几何及其集合，graphic图形及其集合，extent，直接用范围
 * @param option 支持animate是否使用动画，duration 时间，easing动画方式，signal销毁回调
 */
_view.goto(target, option?);

/**
 *
 * @param attr  支持view的属性 例如zoom scale缩放等级
 * @param callback 回调  value => {}
 */
_view.watch(attr, callback);


/**
 * 添加ui组件
 * @param component 组件 Widget|HTMLElement|String|Object|Array 例如zoom  attribution
 * @param position 位置 bottom-leading | bottom-left | bottom-right | bottom-trailing | top-leading | top-left | top-right | top-trailing | manual
 */
_view.ui.add(component, position);
/* 移动ui组件 同上 */
_view.ui.move(component, position)
/* 移除ui组件 同上 */
_view.ui.remove(component, position)

/**
 * 截图
 * @param options
 * format jpg | png.
 * layers 只渲染指定的图层
 * quality 0 - 100
 * width ,height
 * area 指定区域， {x, y, widht, height}
 * ignorePadding
 */
const { dataUrl }  = await _view.takeScreenshot(options);

/** 地图点转换为屏幕坐标
 * @param screenPoint {x, y, spatialReference}
*/
_view.toMap(screenPoint);
/** 屏幕坐标转换为地图点
 * @param screenPoint {x, y, spatialReference}
*/
_view.toScreen(mapPoint);

测距测面

    /** 测距
     * @param option  常用的有模式，平面球面  测量单位
     * mode ： auto | planar | geodesic
     * unit ：metric | imperial | square-inches | square-feet | square-us-feet | square-yards | square-miles | square-meters | square-kilometers | acres | ares | hectares
     *
     */
    const measure = Instance.getInstanceMeasure2D();
    const distance = measure.distance(option?);

    /** 测面
     * @param 同上
     */
    const measure = Instance.getInstanceMeasure2D();
    const area = measure.area(option?);

绘制图形

点线面，钳击箭头，燕尾箭头，图标点位

/* 绘制工具 */
const sketch = Instance.getInstanceSketch();

/* 所有图形都有参数 
  option 绘制方式 mode: "hybrid" | "freehand" | "click"
  return {created, updated}
    完成创建回调，参数为创建的图形
    图形更新回调，第二次创建的同类型图形将会覆盖前面更新函数
  */

/* 燕尾箭头 */
const graphic = sketch.doubleArrow({ mode: "hybrid" });
graphic.created(graph => console.log("绘制成功", graph));
/* 更新函数会被下次创建的同类型图形覆盖 */
graphic.updated(graph => console.log("更新成功", graph));

/* 钳击箭头 */
sketch.tailedSquadArrow();

/* 点线面 */
sketch.create("point");
sketch.create("polyline");
sketch.create("polygon");

/** 图标点位
 * @param option {url, width, height}
 */
sketch.pointImg({ url, width, height });

/* 移除所有 */
sketch.removeAll();

arcigs 图层

arcigs 图层有服务图层和本地数据图层

可以用本地数据模拟服务图层

所有图层返回一个对象，两个值，addEvent，和_layer 原生图层

addEvent 监听点击和 hover 回调

原生 layer 可以直接操作属性，透明度，隐藏等，以及要素的查询操作等

const featureLayer = this.Instance.getInstanceFeatureLayer();
const { addEvent, _layer } = featureLayer.addLayer({
  url: "http://xxx/MapServer",
  id: "xxx"
});
/* 图层事件，只有点击和鼠标hover，获取选中属性 */
addEvent("click", data => {
  console.log("featurelayer click data", data);
});
addEvent("pointer-move", data => {
  console.log("featurelayer mouseup data", data);
});

/* 隐藏 */
_layer.visible = false;
/* 透明度 */
_layer.opacity = 0.4;

arcgis 服务图层

服务图层由 arcmap 发布， 一般有两种方式，featureLayer 和 mapImageLayer 第一种可以对象渲染元素进行操作，分析统计查询等，牺牲性能 第二种不可以进行操作，提高渲染性能，相当于栅格矢量

/* 要素服务图层，可交互，获取属性和图形等 */
const featureLayer = this.Instance.getInstanceFeatureLayer();
featureLayer.addLayer({
  url: "http://xxx/MapServer",
  id: "xxx"
});

/* 图形服务图层，高性能展示，无法自定义交互 */
const mapImageLayer = this.Instance.getInstanceMapImageLayer();
mapImageLayer.addLayer({
  url: "http://xxx/MapServer"
});

本地数据图层

分为两个，graphicsLayer 和 featureLayer

graphicsLayer 简单粗暴，直接用经纬度数据绘制成点线面，

featureLayer 相对复杂，但是提供较多高级功能，数据分析 统计 筛选等，性能较好

grpahicslayer

const graphicsLayer = this.Instance.getInstanceGraphicsLayer();

/**
 * @param option? 属性参数，一般为id，visible，opacity， max min Salce 等
 * @param graphics? 为载入的图形，也可以在后面进行添加
 */
const { addEvent, _layer } = graphicsLayer.addLayer(option, graphics);

/* 添加图形 */
_layer.add(graphic);
_layer.addMany(graphic);
/* 移除 */
_layer.remove(graphic);
_layer.removeMany(graphic);
_layer.removeAll(graphic);

/* 获取所有的图形 */
const graphics = _layer.graphics;

/* graphics 格式 
  graphics 是图形，里面可以存放 点线面geometry，属性attributes和对应的渲染样式symbol，以及popupTemplate
  
  geometry: type: 'point' | 'polyline' | 'polygon', 对应的要素是 
    point: x,y 或者 latitude, longitude 高程 z
    polyline: paths  number[][][] 二维或者三维数组， 三维数组为多个线段
    polygon： rings number[][][] 二维或者三维数组， 三维数组为多个面

  symbol: 
    point : 
      simple-marker 纯点位渲染， 可调节size，border，color，angel, xy偏移offset，style,圆形三角形正方形等
      picture-maker 图片点位  属性有 url， width height 等
    polyline: 主要widht color 等, style支持虚线，实线，点等组合 例如 solid dash dot dash-dot
    polygon：
      simple-fill 纯填充，有color outline, 边界线和line一致，style支持实填充，斜线，水平，交叉等 例如           solid, cross, 用处较少，可以看详细api
      picture-fill 图片填充，url width height 偏移等，重复填充

  attributes :要素的属性， 点击可以返回

  popupTemplate: 
    默认弹窗，支持promise 字符串，function等，扩展性低，亮点在于跟随地图拖动，
    高自由度建议点击后手动创建弹窗

*/
const graphicPoint = {
  geometry: {
    type: "point",
    x: 109,
    y: 32
  },
  symbol: {
    type: "simple-marker",
    color: "#f00",
    size: "6px"
  },
  attributes: {
    name: "i'm line"
  }
};
const graphicLine = {
  geometry: {
    type: "polyline",
    paths: [
      [109, 30],
      [109.1, 30.1],
      [109.2, 30.2],
      [109.2, 30.3]
    ]
  },
  symbol: {
    type: "simple-line",
    color: "#f00",
    width: "6px"
  },
  attributes: {
    name: "i'm line"
  }
};

/* 获取特定要素可以根据图层的属性筛选 */
_layer.graphics.filter(g => g.attributes.name === "xxx");
_layer.graphics.forEach(g => (g.visible = false));

featurelayer

  /* 推荐利用数据源 载入到featureLayer */
  const featureLayer = this.Instance.getInstanceFeatureLayer();

  /* 需要属性 ，渲染方式和视觉变量较为复杂， 需要详细参见官网！！！
    fields：属性字段需要提供
    spatialReference: 空间参考,
    objectIdField： 唯一值，
    labelingInfo： 要素的标签，
    source : 源数据  ，和graphic 一致，不需要sybol和poptemplate
    renderer: 图层的渲染方式，可以根据字段或者计算表达式 使用不同的渲染方式,
  */

  featureLayer.addLayer({
        id: "pointlayer",
        minScale: 3000,
        fields: [
          { name: "ObjectID", alias: "ObjectID", type: "oid" },
          { name: "plCode", alias: "plCode", type: "string" },
          { name: "expNo", alias: "expNo", type: "string" },
          { name: "id", alias: "id", type: "string" },
          { name: "lat", alias: "lat", type: "string" },
          { name: "lng", alias: "lng", type: "string" },
          { name: "appendant", alias: "appendant", type: "string" }
        ],
        spatialReference: { wkid: 4326 },
        objectIdField: "ObjectID",
        source: graphics,
        renderer: {
          type: "unique-value",
          // field: "plCode",
          // field2: "appendant",
          field: "appendant",
          fieldDelimiter: ", ",
          defaultSymbol: {}
          uniqueValueInfos: [
            {
              value: "1",
              symbol: {
                type: 'point',
                color: "#f00",
                size: 10
              }
            }
          ],
          visualVariables: {
            type: 'opacity',
            // filed: 'data_opacity'
            valueExpression: "( $feature.TOT_VOTES / $feature.REG_VOTERS ) * 100",
            stops: [
               { value: 30, opacity: 0.15 },
                { value: 70, opacity: 0.55 }
            ]
          }
        },
        labelingInfo: [
          {
            labelExpressionInfo: { expression: "$feature.expNo" },
            symbol: {
              type: "text",
              color: "#000"
            }
          }
        ]
      })

      /* 操作数据 */
      // 查询数据，可添加查询条件
      //geometry  几何， distance 几何搜索距离，geometryPrecision 几何操作小数位数
      //objectIds id列表
      //where sql查询语句
      //returnGeometry 返回几何
      //其他详见官网
      _layer.queryFeatures().then(data)

      // 添加/删除/修改数据
      _layer.applyEdits({
          deleteFeatures: features,
          updateFeatures: features,
          addFeatures: features
        });

      // 要素过滤 where ......
      _layer.definitionExpression = ''

其他操作

墨卡托工具

经纬度转换 见官网

几何引擎

缓冲，相交，联合等 见官网

投影转换

见官网