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>

原文地址：https://blog.csdn.net/qq_19688207/article/details/142356959

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！