废话不说直接上代码
影像图
<template><div><div>影像图</div><div class="map" id="olMap"></div></div></template><script>import "ol/ol.css";import {Tile as TileLayer } from "ol/layer";import XYZ from "ol/source/XYZ";import Map from "ol/Map.js";import View from "ol/View.js";export default {data() {return {map: null,};},mounted() {this.initMap();},methods: {initMap() {let map = new Map({target: "olMap",view: new View({center: [108.945951, 34.465262],zoom: 5,projection: "EPSG:4326",}),});this.map = map;// 添加地图let source = new XYZ({url: "/DataServer?T=img_w&tk=自己的key={x}&y={y}&l={z}",});let satellite = new TileLayer({source: source,});this.map.addLayer(satellite);// 添加注记let sourceCIA = new XYZ({url: "/DataServer?T=cia_w&tk=自己的key={x}&y={y}&l={z}",});let satelliteCIA= new TileLayer({source: sourceCIA,});this.map.addLayer(satelliteCIA);},},};</script><style scoped>.map {width: 100%;height: 100vh;}</style>
地形图
<template><div><div>地形图</div><div class="map" id="olMap"></div></div></template><script>import "ol/ol.css";import {Tile as TileLayer } from "ol/layer";import XYZ from "ol/source/XYZ";import Map from "ol/Map.js";import View from "ol/View.js";export default {data() {return {map: null,};},mounted() {this.initMap();},methods: {initMap() {let terMap = new Map({target: "olMap",view: new View({center: [108.945951, 34.465262],zoom: 5,projection: "EPSG:4326",}),});this.map = terMap;// 添加地图let Tersource = new XYZ({url: "/DataServer?T=ter_w&tk=自己的key={x}&y={y}&l={z}",});let terLayer = new TileLayer({source: Tersource,});this.map.addLayer(terLayer);// 添加注记let CTAsource = new XYZ({url: "/DataServer?T=cta_w&tk=自己的key={x}&y={y}&l={z}",});let CTAlayer = new TileLayer({source: CTAsource,});this.map.addLayer(CTAlayer);},},};</script><style scoped>.map {width: 100%;height: 100vh;}</style>
