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

秒速五厘米 2023-06-14 10:41 90阅读 0赞

openlayers：4.6.5

vue-cli：3.0

openlayers官网：[https://openlayers.org/][https_openlayers.org]

天地图官网：[https://www.tianditu.gov.cn/][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) {
              // 这里就是异步获取到图层点击对应的内容
            }
        })
    }

[https_openlayers.org]: https://openlayers.org/
[https_www.tianditu.gov.cn]: https://www.tianditu.gov.cn/