<template>
<div id="map" ref="rootmap"></div>
</template>
<script>
import "ol/ol.css";
import { get as getProjection } from "ol/proj";
import { getWidth, getTopLeft } from "ol/extent";
import View from "ol/View";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
/* eslint-disable */
export default {
name: "map",
data () {
return {
map: null,
routeLayer: null,
routeFeature: null,
lineData: [],
map1: null,
view: null,
vectorSource: null,
}
},
mounted () {
// 渲染地图
var projection = getProjection('EPSG:4326')
var projectionExtent = projection.getExtent()
var size = getWidth(projectionExtent) / 256
var resolutions = new Array(18)
var matrixIds = new Array(18)
for (var z = 1; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z)
matrixIds[z] = z
}
var webKey = '这里需要改为你的key值' // 这里需要改为你的key值
var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=' // 矢量底图
var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=' // 矢量注记
this.view = new View({
center: [112.55, 37.87],
projection: projection,
zoom: 5
})
this.map1 = new Map({
layers: [
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_1 + webKey,
layer: 'vec',
matrixSet: 'c',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
}),
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_2 + webKey,
layer: 'cva',
matrixSet: 'c',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map',
view: this.view
})
this.vectorSource = new VectorSource({
features: []
})
// 初始化矢量图层
var vectorLayer = new VectorLayer({
source: this.vectorSource
})
// 将矢量图层添加到map
this.map1.addLayer(vectorLayer)
},
methods: {}
}
</script>
<style>
#map {
width: 1000px;
height: 600px;
}
</style>
Vue+OpenLayers天地图【四】
于 2021-08-02 14:44:17 首次发布