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) {
// 这里就是异步获取到图层点击对应的内容
}
})
}