openlayers实现点击图层弹出相应信息

openlayers：4.6.5

vue-cli：3.0

openlayers官网：https://openlayers.org/

天地图官网：https://www.tianditu.gov.cn/

1.准备lmap.js并初始化地图

let lmap = {
    map: null,
    init() {
        this.map = new ol.Map({
               target: 'olMap',
               logo: false,
               view: new ol.View({
               center: ol.proj.transform([113.2637, 23.1314], 'EPSG:4326', 'EPSG:4490'),
                    zoom: 7,
                    minZoom: 4,
                    maxZoom: 18,
                    enableRotation: false,
                    projection: 'EPSG:4490'
                }),
                layers: [
                    new ol.layer.Tile({
                        zIndex: 0,
                        source: new ol.source.XYZ({
                            projection: 'EPSG:4326',
                            url: 'http://t{1-7}.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=d6da39f0bfd91bdf9c4941541e18669e'
                        })
                    })
                ]
         })

    }

}

export default = lmap

导入lmap.js：

import lmap from './lmap.js'


mounted() {
     // 初始化地图：
     lmap.init()
    
     if (lmap.map) {
        // 初始化图层
        this.setLayer()
     }
}

2.创建图层

setLayer () {
    let params = {
          LAYERS: '项目规定的字符串',
          FORMAT: 'image/png',
          VERSION: '1.1.1'
        }

    this.layers = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: '输入项目图层资源地址',
            params,
            serverType: '图层资源的服务器类型'
          }),
          visible: true,
          zIndex: 6
        })

    lmap.map.addLayer(this.layers)
}

 3.地图点击

mapClick () {
    if (lmap.map) {
        let self = this;
        lmap.map.on('click', function(e) {
            self.getMapClick(e)
        })
    }

}

getMapClick (e) {
    let viewResolution = lmap.map.getView().getResolution()
    let url = this.layers.getSource().getGetFeatureInfoUrl(
        e.coordinate, viewResolution, 'EPSG:4490', { // 我项目用的是4490
        'INFO_FORMAT': 'application/json',
        'QUERY_LAYERS': '项目图层类型',
        'exceptions': 'application/vnd.ogc.se_inimage'
    })
    
    this.axios.get(url).then(res => {
        if (res.features.length > 0) {
          // 这里就是异步获取到图层点击对应的内容
        }
    })
}