uni-app如何引入天地图并兼容app

细节控菜鸡

已于 2024-06-15 09:36:18 修改

阅读量6.5k

点赞数 19

分类专栏： uniapp开发文章标签： uni-app

于 2023-12-31 15:45:39 首次发布

本文链接：https://blog.csdn.net/weixin_43309426/article/details/135316733

版权

uniapp开发专栏收录该内容

3 篇文章

订阅专栏

项目场景：

uni-app如何引入天地图并兼容appuni-app引入天地图打包成app后，兼容安卓。该方式仅兼容安卓、h5，不支持微信小程序。

安卓模拟器最终效果

uni-app提供的组件，仅支持下面的服务商，想使用天地图或其他地图，需要搭配地图引擎使用。

本案例使用工具与插件

leaflet.js 轻量的地图引擎，获取无需魔法
uni-app
HbuilderX 3.8.3
MuMu模拟器12 (用于查看实时运行效果)

实现思路

uni-app提供的map组件中，仅支持腾讯、百度、高德三个平台的地图，想要切换成天地图需要使用另外的地图渲染引擎来实现。
h5端的兼容是最好做的，app与小程序端不支持dom操作，需要另想办法渲染。
地图渲染引擎使用的是 leaflet，相较于其他渲染引擎，它的主体代码比较小。
因为app端不支持dom的操作，使用leaflet 官方提供的渲染方式会出现不渲染情况。这时候需要配合 uni-app 中的renderjs来配合渲染。
renderjs 改变了uni-app的渲染模式，在逻辑层之外加上了一个视图层，二者之间互不通信，需要搭配官方提供的通信方式进行通信，同时值得注意的是，二者之间的通信只能是JSON格式的，其他的格式均不支持。

引入步骤

将 leaflet.js 放在 static中,注意路径。如果跟j-leaflet路径不一致，需要改一下。
将 leaflet.css 放在 static中，并引入uni.scss
将 j-leaflet 文件夹放在 components
放置目录结构

引用 j-leaflet 组件demo

<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<!-- 除了微信均使用 -->
		<leaflet @changeView="changeView" :location="location" :data="marker"></leaflet>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- #endif -->
	</view>
</template>
<script>
	import leaflet from '@/components/j-leaflet/j-leaflet.vue'
	export default {
		components: {
			leaflet
		},
		data() {
			var _this = this
			return {
				latitude: 39.909,
				longitude: 116.39742,
				marker:[],
				location:{}
			}
		},
		mounted() {
			setTimeout(()=>{
				this.location = {
					latitude: 39.909,
					longitude: 116.39742,
				}
				this.marker =[this.location]
				
			},2230)
			// this.init()
		},
		methods: {
			changeView(){ 
				console.log(12)
				let list = {
					latitude: 39.901,
					longitude: 116.39712,
				}
				this.marker = [this.location] 
			},
		}
	}
</script>

<style>

</style>

j-leaflet 源码

<template>
	<view :data="data" :change:data="leaflet.addMarker" :location="location" :change:location="leaflet.center"
		class="map" id="map"></view>
</template>
<script>
	export default {
		props: {
			data: Array,
			location: Object 
		},
		methods: {
			changeView(options) {
				this.$emit('changeView', options)
			},
		}
	}
</script>
<script module="leaflet" lang="renderjs">
	import L from 'static/js/leaflet.js';
	export default {
		data() {
			return {
				map: null,
				marker: {}
			};
		},
		mounted() {
			this.initMap()
		},
		methods: {
			// 地图初始化
			initMap() {
				this.map = L.map('map', {
					// crs: L.CRS.EPSG3857,	
					center: [23.180695, 113.412674], 
					zoom: 17, 
					minZoom: 5,
					maxZoom: 18, 
					dragging: true,
					attributionControl: false,
					zoomControl: false
				});
				// 娣诲姞鍥惧眰
				L.tileLayer(
					'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的秘钥', {
						zoomControl: true
					}).addTo(this.map);
				L.tileLayer(
					'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的秘钥', {
						zoomControl: true
					}).addTo(this.map);

				this.mapEvent()
			},
			mapEvent() {
				this.map.on('zoomend', (a, b) => {
					let view = this.getBounds()
					// 主动传递 等价于 $emit
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'changeView', // 父组件方法
						args: view // 给方法传输的数据
					})
					console.log(24)
				})
				this.map.on('moveend', (a, b) => {
					let view = this.getBounds()
					// 主动传递 等价于 $emit
					UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
						cid: this._$id,
						method: 'changeView',// 父组件方法
						args: view  // 给方法传输的数据
					})
					console.log(25)
				})
			},
			//可视范围 获取
			getBounds() {
				//左下
				let west = this.map.getBounds().getSouthWest()
				var leftdown = [west.lat, west.lng];
				//左上
				let northWest = this.map.getBounds().getNorthWest()
				var leftup = [northWest.lat, northWest.lng];

				//右上
				let orthEast = this.map.getBounds().getNorthEast()
				var rightup = [orthEast.lat, orthEast.lng];
				//右下
				let southEast = this.map.getBounds().getSouthEast()
				var rightdown = [southEast.lat, southEast.lng];
				return {
					leftup,
					leftdown,
					rightup,
					rightdown
				}
			},
			center(point) {
				// 添加中心点，并且移动到地图至中心点
				if (!point || !point.latitude || !point.longitude) return
				if (!this.marker.center) {
					let m = L.marker([point.latitude, point.longitude], {
						icon: L.divIcon({
							className: 'div-icon'
						})
					}).addTo(this.map)
					this.marker.center = m
				} else {
					this.marker.center.setLatLng([point.latitude, point.longitude])
				}
				this.map.panTo({
					lng: point.longitude,
					lat: point.latitude
				});
			},
			addMarker(points) {
				// 获取到数据,进行处理,可以是添加标记,也可以是其他处理
			} 
		}
	}
</script>

<style lang="scss">
	.map {
		width: 100%;
		top: 0;
		bottom: 0;
		position: absolute;
		z-index: 0;
	}
</style>