uniapp实现使用renderjs加载高德地图，并添加geoServer图层服务（APP端）

hundred83

已于 2024-01-15 14:29:38 修改

阅读量1k

点赞数 11

文章标签： uni-app swift 开发语言

于 2024-01-15 13:58:53 首次发布

本文链接：https://blog.csdn.net/weixin_62186125/article/details/135599432

版权

本文介绍了如何在UniApp中，由于map组件在Vue文件中的限制，选择使用RenderJS加载高德地图，并展示了如何在逻辑层之外的视图层中添加geoserver图层，包括初始化地图、加载WMS服务的过程。

摘要由CSDN通过智能技术生成

uni自带的有map组件，功能还是比较强大，但是在vue文件下很多功能受限，必须在nvue文件中才能发挥出功能。因此，便选择使用renderjs来加载高德地图，在uniapp中script中带renderjs的是视图层，普通script标签是逻辑层，uniapp中要想实现geoserver图层添加，只能使用renderjs，逻辑层和视图层的概念，可以查看uniapp官网renderjs | uni-app官网

html中

<template>
	<view class="">
		<view id="container"></view>
	</view>
</template>

css中

<style>
	#container {
		width:100%;
		height:1200rpx;
	}
</style>

<script module="test" lang="renderjs">
	// 视图层
	export default {
		data() {
			return {
				// ...
				map: null,
			}
		},
		mounted() {
            // 高德地图申请的web端的密钥
			window._AMapSecurityConfig = {
				securityJsCode: '4dcaab4b0fb31403b0079498c9eb433e',
			}  // 这里可写可不写
			var url = "https://webapi.amap.com/maps?v=2.0&key=7744888565284b00b2f00fc098d71ce8"; // 高德地图web端的key
			var jsapi = document.createElement('script');
			jsapi.charset = 'utf-8';
			jsapi.src = url;
			jsapi.onload = this.initMap.bind(this);
			document.head.appendChild(jsapi);
		},
		methods: {
			initMap() {
				this.map = new AMap.Map('container', {
					resizeEnable: true,
					center: [119.902725, 35.88],
					// zooms: [14, 20], //设置地图级别范围
					zoom: 8,
				})
				this.map.on('complete', () => {
					// console.log('加载完成')
					this.GetDk();
				})
			},
            // 加载wms服务
			GetDk() {
				const Dk = new AMap.TileLayer.WMS({
					url: "http://123.56.139.127:8899/geoserver/city1/wms", // wms服务的url地址
					blend: false, // 地图级别切换时，不同级别的图片是否进行混合
					tileSize: 512, // 加载WMS图层服务时，图片的分片大小
					params: {
						LAYERS: "city1:city1",
						VERSION: "1.3.0",
					}, // OGC标准的WMS地图服务的GetMap接口的参数
				});
				this.map.add(Dk);
				this.map.setCenter([120.10064, 36.01655]);
				this.map.setZoom(16);
			},
		}
	}
</script>