一、创建影像、矢量、地形切换框
1、创建layer-control.vue文件
<template>
<div class="layer-control-container">
<div
v-for="item of list"
:key="item.id"
class="layer"
:class="{active: item.id === currentLayerId}"
@click.stop="changeBaseLayer(item.id)"
/>
</div>
</template>
<script>
export default {
name: 'LayerControlContainer',
components: {
},
mixins: [
],
props: {},
data() {
return {
currentLayerId: 'VECTOR', // 默认影像
list: [
{
name: '影像',
id: 'RASTER'
},
{
name: '矢量',
id: 'VECTOR'
},
{
name: '地形',
id: 'TOPOGRAPHY'
}
]
}
},
computed: {
},
watch: {
currentLayerId(newId, oldId) {
this.$emit('changeMap', { 'newId': newId, 'oldId': oldId })
}
},
mounted() {
},
methods: {
changeBaseLayer(id) {
this.currentLayerId = id
}
}
}
</script>
<style lang="scss" scoped>
.layer-control-container {
position: absolute;
z-index: 10;
width: 190px;
height: 44px;
bottom: 82px;
right: 20px;
.layer {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 44px;
transition: 0.5s transform;
transform: translateX(0);
cursor: pointer;
&.active {
z-index: 4;
&:nth-of-type(1) {
background: url('../../assets/img/image/img_yingxiang_p.png') no-repeat
center / contain;
}
&:nth-of-type(2) {
background: url('../../assets/img/image/img_shiliang_p.png') no-repeat
center / contain;
}
&:nth-of-type(3) {
background: url('../../assets/img/image/img_dixing_p.png') no-repeat center /
contain;
}
}
&:nth-of-type(1) {
background: url('../../assets/img/image/img_yingxiang_n.png') no-repeat center /
contain;
}
&:nth-of-type(2) {
background: url('../../assets/img/image/img_shiliang_n.png') no-repeat center /
contain;
}
&:nth-of-type(3) {
background: url('../../assets/img/image/img_dixing_n.png') no-repeat center /
contain;
}
}
&:hover {
.layer:nth-of-type(2) {
transform: translateX(-65px);
}
.layer:nth-of-type(3) {
transform: translateX(-130px);
}
}
}
</style>
img_dixing_n.png
img_yingxiang_p.png
img_yingxiang_n.png
img_shiliang_p.png
img_dixing_p.png
img_shiliang_n.png
效果如下:
二、初始化地图,将组件引入至地图
创建map.vue文件
<template>
<div id="map" class="map">
<layerControl @changeMap="changeMap" />
</div>
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature } from 'ol'
import { Style, Fill, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { fromLonLat } from 'ol/proj'
import layerControl from './layer-control.vue'
import { Tile } from 'ol/layer'
import { defaults as defaultControls } from 'ol/control'
export default {
components: { layerControl },
props: {
// eslint-disable-next-line vue/require-default-prop
},
data() {
return {
map: null,
}
},
created() {
},
mounted() {
this.initMap()
},
methods: {
// 初始化地图
initMap(options = {}, config = { v: true }) {
const KEY = 'b9031f80391e6b65bd1dd80dcde1b097'
const tianDiTu = {
// 矢量
vector: `https://t2.tianDiTu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
// 影像
raster: `https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
// 地形
topography: `https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`,
// 标注图层(就是我们所看见的行政区名称,道路)
sourceMark: `http://t4.tianditu.com/DataServer?T=cva_w&tk=${KEY}&x={x}&y={y}&l={z}`
}
const tileUrlFunction = function(xyz) {
const z = xyz[0]
const x = xyz[1]
const y = xyz[2]
return `https://rt1.map.gtimg.com/realtimerender?z=${z}&x=${x}&y=${y}&type=vector&style=0&key=KSMBZ-3SMCV-LTYPU-UPYHY-GI2WF-UWBXB`
}
const crtlayerXYZ = function(id, url, visible, tileUrlFunction = function() { }) {
return new Tile({
source: new XYZ({
url,
tileUrlFunction
}),
visible,
id
})
}
this.map = new Map({
layers: [
crtlayerXYZ('VECTOR', tianDiTu.vector, !!config.v, tileUrlFunction),
crtlayerXYZ('RASTER', tianDiTu.raster, !!config.r, tileUrlFunction),
crtlayerXYZ('TOPOGRAPHY', tianDiTu.topography, !!config.t, tileUrlFunction),
crtlayerXYZ('SOURCEMARK', tianDiTu.sourceMark, !!config.v, tileUrlFunction)
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [108.939062, 34.374741],
zoom: 6,
maxZoom: 18,
...options
}),
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
})
},
getLayerByProp(key, value) {
return this.map.getLayers()
.getArray()
.filter((layer) => layer.get(key) === value)
},
// 切换显示隐藏地图
changeMap(val) {
this.getLayerByProp('id', val.oldId)[0].setVisible(false)
this.getLayerByProp('id', val.newId)[0].setVisible(true)
}
}
}
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: calc(100vh - 135px);
position: relative;
}
</style>