uniapp （vue3）整合 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 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、代码

<template><view class="map" id="mapView"><button @click="goTo()" class="btn" type="primary">测试</button></view>
</template><script setup>
import "ol/ol.css";
import {ref,onMounted} from 'vue';
import {ScaleLine, defaults as defaultControls} from 'ol/control';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from "ol/layer/Tile.js";
import XYZ from "ol/source/XYZ.js";
import { fromLonLat } from "ol/proj.js";
import  ZoomToExtent  from 'ol/control/ZoomToExtent.js';
import  ZoomSlider  from 'ol/control/ZoomSlider.js';
import FullScreen from 'ol/control/FullScreen.js';
import Feature from "ol/Feature.js";
import {LineString,Point } from 'ol/geom.js';
import { Icon, Style,Stroke,Circle,Fill } from "ol/style.js";onMounted(()=>{initMap();
})const initMap = () =>{map.setTarget("mapView")
}const sourceXYZ = new XYZ({url:"http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",wrapX:false
});const gaodeLayer = new TileLayer({title:"高德地图",source:sourceXYZ
});const map = new Map({//target:"mapView",layers:[gaodeLayer],view:new View({center:fromLonLat([125.33,43.90]),projection:'EPSG:3857',minZoom: 4,zoom:10}),controls:defaultControls({zoom:false,//不显示放大放小按钮rotate:false,// 不显示指北针控件attribution:false//不显示右下角的地图信息控件}).extend([// 比例尺new ScaleLine({//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）units: "metric"})])
});/*// 定位范围控件
const zoomToExtent = new ZoomToExtent({// 吉林市范围extent:[14065372.073666595, 5371093.384611047, 14121465.137798928, 5492671.839893217]
})
map.addControl(zoomToExtent);// 放大缩小滑动控件
const zoomSlider = new ZoomSlider();
map.addControl(zoomSlider);// 全屏控件
const fullScreen = new FullScreen();
map.addControl(fullScreen);
*/
// 测试按钮
const goTo = () =>{// 获取当前可见视图范围console.log(map.getView().calculateExtent())
}</script><style scoped lang="scss">/*去除顶部导航栏*/*{margin:0;padding:0}.map{width:100vw;height: 95vh;position: relative;z-index: 1;.btn {margin-top: 80px;margin-left: 85%;width:80rpx;height:60rpx;position: absolute;z-index: 10;}}</style>