<template> <div class="map-wrapper"> <el-button type="primary" @click='change(1)'>矢量地图</el-button> <el-button type="danger" @click='change(2)'>卫星地图</el-button> <div id="map"></div> </div> </template> <script> import "ol/ol.css"; import {Map, View} from "ol"; import Tile from "ol/layer/Tile"; import XYZ from "ol/source/XYZ"; export default { data() { return { map: null, baseLayer: new Tile({}), annotateLayer: new Tile({}) }; }, methods: { change(n) { let key = "自行替换"; let url; switch (n) { case 1: url = "http://t{1-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk="; this.annotateLayer.setSource(new XYZ({url: url + key})); url = "http://t{1-7}.tianditu
【OpenLayers+vue】加载天地图
于 2023-11-08 11:45:53 首次发布