1. 安装openLayer插件

命令行：npm install ol

1. 安装sass插件

命令行：npm install -D sass

使用方法：

***

***

<style scoped lang="scss">

</style>

1. 安装ElementPlus

命令行：npm install element-plus --save

引用方法：

实际代码：

// #ifndef VUE3

import Vue from 'vue'

import App from './App'



Vue.config.productionTip = false



App.mpType = 'app'



const app = new Vue({

...App

})

app.$mount()

// #endif



// #ifdef VUE3

import {

createSSRApp

} from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

export function createApp() {

const app = createSSRApp(App)

app.use(ElementPlus)

return {

app

}

}

// #endif

4、ol代码（必须使用renderjs否则无法显示地图）

引入ol全局样式：

<template>
	<!-- 监听变量 operation 的变化，operation 发生改变时，调用 openlayers 模块的 loadOperation 方法 -->
	<view :operation="valueChangeSign" :change:operation="ol.valueChange" type="default"></view>
	<view class="map" id="map">
		<button @click="goTo()" class="btn" type="primary">测试</button>
	</view>
</template>

<!-- 逻辑层 -->
<script>
	
	export default {
		data(){
			return {
				valueChangeSign:false,
				map:null,
				total:0
			}
		},
		methods:{
			/**
			 * 点击事件
			 */
			goTo(){
				this.valueChangeSign = !this.valueChangeSign;
			},
			/**
			 * 接受renderjs传过来的数据
			*/
		   reciveMessage(data){
			   this.total = data;
			   console.log("total",this.total);
		   },
		   receiveMethod(){
			   console.log("获取方法");
		   }
		}
	}
</script>

<!-- 视图层 -->
<script module="ol" lang="renderjs" type="module">
//import 'ol/ol.css'// 真机-样式需要放在App.vue下面的style标签中，全局引用
import { Map, View } from 'ol'
import ollayerTile from 'ol/layer/Tile.js'
import olsourceOSM from 'ol/source/OSM.js'
import {get as getProjection} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js'
import XYZ from 'ol/source/XYZ.js'
import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control.js'
import { transform } from 'ol/proj.js'
// 滑动放大缩小按钮
import ZoomSlider from 'ol/control/ZoomSlider.js';
// 全屏按钮
import FullScreen from 'ol/control/FullScreen.js';
// 范围
import ZoomToExtent from 'ol/control/ZoomToExtent.js';

	export default {
	    data () {
	        return {
	            map:null,
	            view:null,
				count:0
	        }
	    },
	    mounted(){
		   this.initMap();
	       console.log("mounted方法");
	    },
		methods:{
			/**
			 * @param {*} newValue 新的值或状态
			 * @param {*} oldValue 旧的值或状态
			 * @param {*} ownerInstance 拥有该数据或组件的实例
			 * @param {*} instance 当前操作的具体实例
			 */
			valueChange(newValue, oldValue, ownerInstance, instance){
				console.log(newValue, oldValue, ownerInstance, instance);
				// 传递数值
				this.$ownerInstance.callMethod('reciveMessage',this.count++);
				// 传递map
				this.$ownerInstance.callMethod('receiveMethod');
			
				// 定位
				this.goToExtent();
			},
			// 初始化天地图
			initMap(){
				//天地图影像
				var tdtYX = new TileLayer({
				  source: new XYZ({
				    url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				    projection: 'EPSG:3857',
				    crossOrigin: '*',
				  }),
				})
				//天地图标注
				var tdtBZ = new TileLayer({
				  source: new XYZ({
				    url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				    projection: 'EPSG:3857',
				  }),
				})
				
				//天地图电子地图
				var tdtDZ = new TileLayer({
				  source: new XYZ({
				    url: 'http://t2.tianditu.gov.cn/DataServer?T=vec_w &x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				    projection: 'EPSG:3857',
				  }),
				})
				
				this.map = new Map({
				  controls: defaultControls({
				    attribution: false,
				    zoom: false,
				    rotate: false,
				  }),
				  target: 'map',
				  layers: [tdtDZ,tdtBZ],//[tdtYX, tdtBZ],
				  view: new View({
				    projection: 'EPSG:3857',
				    center: transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'),
				    // center: [125.33,43.90],
				    zoom: 10,
				    maxZoom: 18, //最大缩放级别
				  }),
				  controls:defaultControls({
					  zoom:false,//不显示放大放小按钮
					  rotate:false,// 不显示指北针控件
					  attribution:false//不显示右下角的地图信息控件
				  }).extend([
					// 比例尺
					new ScaleLine({
						//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
						units: "metric"
					})
				  ])
				})
				
				/**
				 * 放大缩小滑动控件-该控件
				 * 与ZoomToExtent一起使用会压盖 
				 */
				const zoomSlider = new ZoomSlider();
				this.map.addControl(zoomSlider);
				// 全屏控件
				const fullScreen = new FullScreen();
				this.map.addControl(fullScreen);
				// 定位范围控件
				const zoomToExtent = new ZoomToExtent({
					// 吉林市范围
					extent:[14042852.042145478, 5425525.753594573, 14129222.565575363, 5452876.419347371]
				})
				this.map.addControl(zoomToExtent);
			},
			goToExtent(){
				// 获取当前可见视图范围
				console.log(this.map.getView().calculateExtent());
				// 设置中心点
				this.map.getView().setCenter(transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'));
			},
		}
	}
</script>

<style scoped lang="scss">
	/*去除顶部导航栏*/
	*{margin:0;padding:0}
	.map{
	  width:100vw;
	  height: 100vh;
	  position: relative;
	  z-index: 1;
	   .btn {
	   		  margin-top: 80px;
	   		  margin-left: 85%;
	   		  width:80rpx;
	   		  height:60rpx;
	   		  position: absolute;
	   		  z-index: 10;
	   	  }
		  .ol-zoomslider {
		    top: 7.5em;
		    left: .5em;
		    height: 200px;
		  }
		  
	}

	
</style>