这篇文章主要介绍了vue怎么使用天地图和openlayers实现多个底图叠加显示效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么使用天地图和openlayers实现多个底图叠加显示效果文章都会有所收获，下面我们一起来看看吧。
实现效果：
需求：根据返回的经纬度列表通过天地图、openlayers实现底图添加（航道图层、线图层、水深图层）
tk：自己申请的密钥
安装opelayers
cnpm i -S ol#或者npm install ol<script> // openlayers地图import "ol/ol.css";import { Icon, Style, Stroke} from "ol/style";import 'ol/ol.css'import Map from "ol/Map";import View from "ol/View";import TileLayer from "ol/layer/Tile";import XYZ from "ol/source/XYZ";import { get as getProjection } from "ol/proj.js";import { getBottomLeft, getTopRight } from 'ol/extent.js'import { Vector as SourceVec } from 'ol/source';import { Vector as LayerVec } from 'ol/layer';import Overlay from "ol/Overlay";//弹窗import {Point} from "ol/geom";import {Feature} from "ol";import { defaults as defaultControls } from "ol/control";//默认缩放import {FullScreen,ScaleLine} from "ol/control";//全屏，比例尺控件import TileGrid from 'ol/tilegrid/TileGrid';import { LineString, Polygon } from 'ol/geom.js'import { setTimeout } from 'timers';import {Polyline} from "ol/format";// import { vectorContext } from "ol/render";import { getVectorContext } from "ol/render";import {defaults as defaultInteractions} from 'ol/interaction';//旋转 export default { data(){ tk:"密钥", center:{ longitude:"", latitude:"" }, map:null, }, methods:{ initMap() { let defaultsMap = { tileUrl1:"图层地址1", tileUrl2:"图层地址2", tileUrl3:"图层地址3", origin: [-400, 400], zoom: 5, resolutions: [ //根据项目需要设置 ], fullExtent: [ //根据项目需要设置 ], inters: [1000, 100], center: [this.center.longitude, this.center.latitude], projection: getProjection("EPSG:4326") }; // let projection = getProjection('EPSG:4326'); // 底图天地图注记 cta——道路+中文注记 let baseLayer = new TileLayer({ title: "天地图", source: new XYZ({ url:"http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" +this.tk }), zIndex: 2 }); //天地图路网 let roadLayer = new TileLayer({ title: "天地图路网", source: new XYZ({ projection: defaultsMap.projection, url:"http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=" +this.tk }), zIndex: 1 }); // 加载地图层mapservice let tileGrid = new TileGrid({ tileSize: 256, origin: defaultsMap.origin, extent: defaultsMap.fullExtent, resolutions: defaultsMap.resolutions }); // 航道图层 let cjinobeaconMap = new TileLayer({ source: new XYZ({ tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl1 }), zIndex: 9 }); // 线图层 let framesMap = new TileLayer({ source: new XYZ({ tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl2 }), zIndex: 10 }); // 水深图层 let soundgMap = new TileLayer({ source: new XYZ({ tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl3 }), zIndex: 11 }); // 加载地图 this.map = new Map({ target: "trajecttoryMap", controls: defaultControls().extend([ new FullScreen(), new ScaleLine({ units: "metric" }) // new ZoomSlider() ]), interactions: defaultInteractions({ pinchRotate: false // 移动端禁止地图旋转 }), loadTilesWhileAnimating: true, layers: [baseLayer, roadLayer, cjinobeaconMap, framesMap, soundgMap], //overlays: [this.overlay], // 把弹窗加入地图 view: new View({ projection: defaultsMap.projection, center: defaultsMap.center, extent: defaultsMap.fullExtent, // resolutions: defaultsMap.resolutions, zoom: 14, minZoom: 7, maxZoom:17 }) }); }, }, mounted(){ this.initMap(); }}</script>关于“vue怎么使用天地图和openlayers实现多个底图叠加显示效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue怎么使用天地图和openlayers实现多个底图叠加显示效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
