场景

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏：

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面实现图层的隐藏和显示，如果将图层换为各个地图的图层，那就可以实现切换地图的效果。

首先ol中至少实现加载两种地图。

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图：

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

Vue+Openlayers实现加载天地图WMTS服务显示：

Vue+Openlayers实现加载天地图WMTS服务显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客

结合以上两种地图加载显示，怎样实现如下切换地图效果

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面中添加el-radio-group单选按钮组以及地图map

<template><div><div><el-radio-group v-model="currentMap" @change="changeMap"><el-radio :label="1">天地图</el-radio><el-radio :label="2">OSM地图</el-radio></el-radio-group></div><div id="map" class="map"></div></div>
</template>

2、引入相关依赖

import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get as getProjection } from "ol/proj.js";
import { getWidth, getTopLeft } from "ol/extent.js";
import OSM from "ol/source/OSM";

3、声明地图、当前选中地图、天地图图层、OSM图层

  data() {return {map: null,currentMap: 1,tiandiLayer: null,osmLayer: null,};

4、声明map

      this.map = new Map({layers: [],target: "map",view: new View({center: [0, 0],zoom: 2,}),});

5、声明天地图

//天地图参数配置var projection = getProjection("EPSG:3857");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;}//天地图图层this.tiandiLayer = new TileLayer({opacity: 0.7,source: new WMTS({url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你申请的key",layer: "vec", //注意每个图层这里不同matrixSet: "w",format: "tiles",style: "default",projection: projection,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});

6、声明OSM

      this.osmLayer = new TileLayer({source: new OSM(),});

7、将图层添加到地图

      this.map.addLayer(this.tiandiLayer);this.map.addLayer(this.osmLayer);

8、判断当前默认显示地图，控制图层显示与隐藏

      if (this.currentMap == 1) {this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);}if (this.currentMap == 2) {this.tiandiLayer.setVisible(false);this.osmLayer.setVisible(true);}

9、编写el-radio-group的change事件

    changeMap: function (value) {debuggerswitch (value) {case 1:this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);break;case 2:this.tiandiLayer.setVisible(false);this.osmLayer.setVisible(true);break;default:this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);}},

10、完整示例代码


<template><div><div><el-radio-group v-model="currentMap" @change="changeMap"><el-radio :label="1">天地图</el-radio><el-radio :label="2">OSM地图</el-radio></el-radio-group></div><div id="map" class="map"></div></div>
</template><script>
import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get as getProjection } from "ol/proj.js";
import { getWidth, getTopLeft } from "ol/extent.js";
import OSM from "ol/source/OSM";
export default {name: "olMapSwitchMap",data() {return {map: null,currentMap: 1,tiandiLayer: null,osmLayer: null,};},mounted() {this.initMap();},methods: {initMap() {this.map = new Map({layers: [],target: "map",view: new View({center: [0, 0],zoom: 2,}),});//天地图参数配置var projection = getProjection("EPSG:3857");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;}//天地图图层this.tiandiLayer = new TileLayer({opacity: 0.7,source: new WMTS({url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你申请的key",layer: "vec", //注意每个图层这里不同matrixSet: "w",format: "tiles",style: "default",projection: projection,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});this.osmLayer = new TileLayer({source: new OSM(),});this.map.addLayer(this.tiandiLayer);this.map.addLayer(this.osmLayer);if (this.currentMap == 1) {this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);}if (this.currentMap == 2) {this.tiandiLayer.setVisible(false);this.osmLayer.setVisible(true);}},changeMap: function (value) {debuggerswitch (value) {case 1:this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);break;case 2:this.tiandiLayer.setVisible(false);this.osmLayer.setVisible(true);break;default:this.tiandiLayer.setVisible(true);this.osmLayer.setVisible(false);}},},
};
</script><style scoped>
.map {width: 100%;height: 400px;
}
</style>

Vue+Openlayers+el-radio实现切换地图显示相关推荐

Vue+Openlayers+Draw实现画笔切换功能，切换画笔为点、线、面
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_霸道流氓气质的博客-CSDN博客 Vue+Openlayer使用Draw实现 ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
vue实现1-4-9宫格切换
vue实现1-4-9宫格切换 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
151：vue+openlayers 使用图片来标识不同地图，点击更换底图
第151个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中根据visible的值来显示不同的地图,hover按钮弹出切换弹窗, 每种地图用图片来标识,hover到图片上后 ...
Vue+Openlayers+HIKVSION实现点击摄像头进行预览
场景 SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版): SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)_霸道流氓气质的博客-CS ...
Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现加载多个图层的基础上,可以实现 ...
Vue+Openlayers中实现地图旋转
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现的效果是这样的此地图的显示时 ...
Vue+Openlayers实现地图上绘制线
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面是添 ...

Vue+Openlayers+el-radio实现切换地图显示

场景

实现

Vue+Openlayers+el-radio实现切换地图显示相关推荐

最新文章

热门文章