Vue + OpenLayers 配置多个地图数据源

最新推荐文章于 2024-05-27 22:30:00 发布

大秒哥

最新推荐文章于 2024-05-27 22:30:00 发布

阅读量1k

点赞数 1

分类专栏： map 文章标签： gis

本文链接：https://blog.csdn.net/u012808193/article/details/122487275

版权

map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue + OpenLayers 配置多个地图数据源 0和1表示部署的离线瓦片天地图和卫星云图, 2表示OSM, 3表示使用Arcgis在线午夜蓝地图服务。

直接上代码：

Basemap.js

import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { OSM, XYZ, TileArcGISRest } from "ol/source";

let mapType = 2;   // 配置地图数据源 0和1表示部署的离线瓦片天地图和卫星云图, 2表示OSM, 3表示使用Arcgis在线午夜蓝地图服务

var basemapLayer = function() {
	
	var mapLayer = null;
	
	switch( mapType ) {
	    case 0:
	        mapLayer = new TileLayer({
	            source: new XYZ({
	                url:'http://192.168.0.142:8090/basemap/streetmap/{z}/{x}/{y}.png'
	            })
	        })
	    break;
		case 1:
		    mapLayer = new TileLayer({
		        source: new XYZ({
		            url:'http://192.168.0.142:8090/basemap/satellitemap/{z}/{x}/{y}.png'
		        })
		    })
		break;
	    case 2:
	        mapLayer = new TileLayer({
	            source: new OSM()
	        })
	    break;
	    case 3:
	        mapLayer = new TileLayer({
	            source: new TileArcGISRest({
	                url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
	            })
	        })
	    break;
	}
	return mapLayer;
}

var Basemap = {
	center: [121.480337, 31.236943], // 中心点地理坐标系经度和纬度
    zoom: 4,        //地图缩放级别
    maplayer: basemapLayer,
};

export default Basemap

GisTest.vue

<template>
	<div id="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { fromLonLat, transform } from "ol/proj";
import Basemap from '../config/Basemap.js';

export default {
  data() {
    return {
      map: {}
    };
  },
  
  mounted() {
    this.map = new Map({
      target: document.getElementById("map"),
      layers: [ Basemap.maplayer() ],
      view: new View({
		center: fromLonLat(Basemap.center),  // 南京
        zoom: Basemap.zoom
      })
    });
  }
};

</script>

<style>
#map{
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #E3FBFC;
}
</style>