WebGIS实战系列 二、 加载geoserver发布的WMS服务

加载wms服务也是很简单，可以参考官网给出的例子：https://developers.arcgis.com/javascript/3/jssamples/layers_wmsresourceinfo.html
我们这里是加载一个geoserver发布的WMS服务的地图，示例代码如下：

<template>
  <div class="map" id="home" ref="map">
    <div ref="button"></div>
    <div ref="location"></div>
    <div class="touch">
      <el-button @click="zoomIn">放大</el-button>
    </div>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader';
export default {
  name: 'user-special',
  data () {
    return {
      map: null,
      navToolbar: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      loadModules([
      'esri/map', 'esri/layers/WMSLayer', 'esri/geometry/Extent'
    ])
        .then(([Map, WMSLayer, Extent]) => {
          // 创建地图以及配置参数
          const map = new Map(this.$refs.map, {
            center: [599206, 4921137],
            zoom: 5,
          })
          let resourceInfo = {
              extent: new Extent(589434.8564686741,4914006.337837095,609527.2102150217,4928063.398014731, {
                  wkid: 26713
              }),
              layerInfos: [],
              version: '1.1.0'
          };
          //注：setVisibleLayers中的参数对应网址中的“LAYERS=”后面的值
          let geoWmsUrl = "http://localhost:8088/geoserver/sf/wms";
          var geoWmsLayer = new WMSLayer(geoWmsUrl, {resourceInfo: resourceInfo});
          geoWmsLayer.setImageFormat("png");
          geoWmsLayer.setVisibleLayers("sf:roads");
          map.addLayer(geoWmsLayer);
          this.map = map
        })
        .catch(err => {
          console.log(err)
        })
    },
    zoomIn () {
      loadModules(['esri/toolbars/navigation'])
        .then(([Navigation]) => {
          let navToolbar = new Navigation(this.map)
          navToolbar.activate(Navigation.ZOOM_IN)
        })
    }
  }
}
</script>

实现效果如下：