leaflet调用iserver服务添加路径到地图

日常开发中，经常有需求在地图上画一些特殊路径或者线条，一般来讲，这种需求都是需要iserver服务支持的。

准备工作

1.一个地图底图（使用@supermap/iclient-leaflet，方便调服务）；

2.iserver服务（以gis开发为主的公司都有自己的服务，没有的话就......别往下看了，或者找找免费的地图server，看看有没有提供学习使用的服务）

调用iserver服务

这里的iserver是后台开发人员根据自身项目需求发布到iserver上的服务接口，添加路径主要就是依赖这个服务返回的数据。

import Vue from 'vue'
import { colorConfig } from '@/utils/mapElementConfig/index.js'
const lineUrl = '' // 服务接口
export default {
  rootLayerGroup: null, // 根图层
  initData () {
    if (this.rootLayerGroup) {
      this.rootLayerGroup = null
    }
    this.rootLayerGroup = L.layerGroup().addTo(Vue.prototype.common.baseMap)
  },
  initLine (dataName, serverName, color) {
    const sqlParam = new SuperMap.GetFeaturesBySQLParameters({
      queryParameter: {
        name: `${dataName}@${serverName}`,
        attributeFilter: 'SMID > 0'
      },
      datasetNames: [`${serverName}:${dataName}`]
    })
    L.supermap.featureService(lineUrl).getFeaturesBySQL(sqlParam, (serviceResult) => {
      const resultLayer = L.geoJSON(serviceResult.result.features, {
        color,
        weight: 8
      })
      this.rootLayerGroup.addLayer(resultLayer)
    })
  },
  drawLine () {
    for (const key in colorConfig) {
      colorConfig[key].forEach(item => {
        this.initLine(item, 'onesection', key)
      })
    }
  }
}

         这里根据接口需要调用的SuperMap.GetFeaturesBySQLParameters这个方法，顾名思义，这个方法与sql查询相关，还有其他方法（见官网，https://iclient.supermap.io/examples/leaflet/examples.html#iServer-data）。

参数说明：dataName-数据名 serverName-服务名 color-线的颜色，其中dataName和serverName根据发布的服务接口定，color前台自己定义。

L.supermap.featureService(lineUrl)中的lineUrl就是发布的iserver接口api。调用服务后，后台一般返回geoJSON类型的数据，这是谷歌标准的json类型地理数据信息，像echarts地图等都是用的这种数据。当前台拿到数据后，调用L.geoJSON这个方法处理数据，L.geoJSON本质返回的是一个图层，它继承自featureGroup，和featureGroup使用方法一模一样。既然L.geoJSON是一个图层，那么将这个图层添加到地图即可。

效果