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 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否则无法显示地图)

复制代码
<template>
	<view class="map" id="map"></view>
</template>

<script setup module="ol" lang="renderjs">
//import 'ol/ol.css'// 真机测试时要注释掉该引用,否则报错
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'

	export default {
	    data () {
	        return {
	            map:null,
	            view:null
	        }
	    },
	    mounted(){
	       this.initMap()
	    },
		methods:{
			// 初始化天地图
			initMap(){
				let that = this
				//天地图影像
				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, //最大缩放级别
				  }),
				  
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	/*去除顶部导航栏*/
	*{margin:0;padding:0}
	.map{
	  width:100vw;
	  height: 100vh;
	  position: relative;
	  z-index: 1; 
	}
	
</style>
相关推荐
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui2 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮4 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端3 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app