uni-app中使用openlayer,并加载天地图底图

带着叉子的帆船

已于 2024-05-11 14:56:07 修改

阅读量394

点赞数 2

分类专栏： uni-app 文章标签： uni-app vue

于 2024-05-06 11:36:03 首次发布

本文链接：https://blog.csdn.net/weixin_45384466/article/details/138488222

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

uniapp中需要使用render.js才能对openlayer进行操作。

下载openlayer

1、下载openlayer下载到本地，将ol.css和ol.js放置到static文件夹下。
2、文件引入，不能使用import 将ol.js引入到项目中，使用import会导致打包失败。
引入位置renderjs中的mounted

const script = document.createElement('script')
script.src = 'static/openlayers/ol.js' //可以通过此方式导入jquery，echart库
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)

引入ol.css在style中 @import url(“@/static/openlayers/ol.css”);
3、初始化并创建openlayer（renderjs）

	initAmap() {
		let map = new ol.Map({
			interactions: ol.interaction.defaults({
				//禁止手机端旋转地图
				pinchRotate: false
			}),
			layers: [
				new ol.layer.Tile({
				source: new ol.source.XYZ({
				url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=天地图key'
						})
					}),
				new ol.layer.Tile({
				source: new ol.source.XYZ({
				url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图key"
						})
					})
					],
					target: "olMap",
					//加载控件到地图容器中
					controls: ol.control.defaults({
						zoom: false,
						rotate: false,
						attribution: false
					}),
					view: new ol.View({
						center: ol.proj.transform([12570990.051748341, 3769141.2798528187], 'EPSG:3857','EPSG:4326'),
						maxZoom: 18,
						zoom: 10,
						projection: 'EPSG:4326',
					})
				})
				this.map = map;
			},

4、template

	<view class="content">
		<view id="olMap" class="olMap" style="height: 100vh;" />
	</view>

5、参考
https://blog.csdn.net/ee_11eeeeee/article/details/119580201?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171496508916800185886838%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171496508916800185886838&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-3-119580201-null-null.142^v100pc_search_result_base1&utm_term=uniapp%20openlayer&spm=1018.2226.3001.4187