zlmap v1.4.3

import zmap from 'zmap'
export default{
  components:{
    zmap
  },
  data(){
    return {
      toolList: ['select', 'polygon', 'ruler', 'transfer'],                           // 工具栏，可选
      widgets: ['home', 'zoom', 'compass', 'fullscreen', 'navigation', 'scalebar'],   // 小部件，可选
      showSearch: true,
      showBaseMapToggle: true,  // 是否显示底图切换工具，可选
      showLonLat: true,          // 是否显示经纬度，可选
      showRegion: true,   // 是否显示行政区划 
      arcgisDojoUrl: 'https://arcgis.ynyc.com/arcgis_js_api/library/4.15/dojo/dojo.js',  // dojo初始化地址，可选
      arcgisCssUrl: 'https://arcgis.ynyc.com/arcgis_js_api/library/4.15/esri/themes/light/main.css', // 可选
      zoom: 7, // 缩放级别
      center: [101.9464253310309, 24.913562152358953], // 初始位置
      showCopyRight: true, // 是否显示天地图的图标
      showPopup: true, // 是否显示弹窗, 见landMixin.js
      containerId: 'dk', // 容器id
      showPickupLonLat: true, // 是否显示坐标拾取
    }
  }
}

<div class="wrapper">
    <zmap :toolList="toolList"
          :widgets="widgets"
          :showBaseMapToggle="showBaseMapToggle"
          :showLonLat="showLonLat"
          :arcgisDojoUrl="arcgisDojoUrl"
          :arcgisCssUrl="arcgisCssUrl"
          :containerId="containerId"
          :show-pickup-lon-lat="showPickupLonLat"
    />
</div>

容器需要指定宽高

.wrapper{
  width: 500px;
  height: 500px;
}

事件总线
mapLoaded: 地图加载完成,返回参数arcgis, view
mapViewChange: 底图切换，返回参数view

组件方法
registerLayers: 通过该方法注册的图层具有和地库地块图层一致的行为，见layerMixin.js。

const Layers = [{
  id: '图层id',
  index: '图层顺序',
  minScale: '最小显示比例',
  fields: '属性字段',
  idField: '主键字段',
  renderer: '渲染器对象',
  getFeatures: '获取列表',
  handleFeatures: '处理接口返回数据的函数',
  gridSize: 0.5,  // 网格跨度，经纬度
  renderFeaturesComplete: '渲染完成回调',
  searchOptions:{
    name: '地块定位',
    placeholder: '地块ID',
    searchFields: ['objectId'],
    displayField: 'objectId',
    // 正则匹配
    regExp: /^[a-z|0-9]{8}-[a-z|0-9]{4}-[a-z|0-9]{4}-[a-z|0-9]{4}-[a-z|0-9]{12}$/,
    // 搜索方法
    searchMethod: (layer, value)=>{}
  },
  // 图层点击事件
  onClick: (graphic, evt)=>{},
  // 范围限定
  extent: {
    xmin: '',
    xmax: '',
    ymin: '',
    ymax: ''
  }
}];
export default {
  mounted() {
    this.$EventBus.$on('mapLoaded', ()=>{
      this.$refs.zmap.registerLayers(Layers)
    })
  }
}

renderFeatures 渲染接口返回的数据方法。

this.$refs.zmap.renderFeatures({
  // 新增的Features
  inserts: [],
  // 需要删除的Features
  deletions: [],
  // 需要更新的Features
  updates: []
})