uniapp 整合 OpenLayer3

1. 安装openLayer插件

命令行：npm install ol

1. 安装sass插件

命令行：npm install -D sass

使用方法：

***

***

<style scoped lang="scss">

</style>

1. 安装ElementPlus

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

引用方法：

实际代码：

// #ifndef VUE3import Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App})app.$mount()// #endif// #ifdef VUE3import {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++);// 传递mapthis.$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, //最大缩放级别enableRotation: false,// 禁止地图旋转}),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>