Vue+OpenLayers天地图【四】

本文介绍如何使用 OpenLayers 库加载天地图瓦片服务,包括设置投影、分辨率及矩阵标识,并展示了如何添加矢量图层。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值