加载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>
实现效果如下: