腾讯地图SDK加载、删除Geoserver瓦片图层

腾讯地图SDK:加载Geoserver影像图层教程
本文介绍了如何在Android项目中使用腾讯地图SDK,通过自定义瓦片层加载由Geoserver发布的影像图层,涉及坐标转换、TileProvider定制和地图添加过程。

近日项目需要,需要使用腾讯地图SDK进行二次开发,加载Geoserver发布的影像图层。现在就将加载过程记录一下。注:以腾讯地图官方文档为参考
最终的效果:
在这里插入图片描述

首先需要在腾讯地图官网申请KEY值,申请过程请看官方文档中的介绍。加载图层的主要文档在Android地图SDK文档中“自定义瓦片层”章节。

首先准备一个实体类和一个工具类。
PositionModel:

public class PositionModel {
   
   
	private double wgLat;
	private double wgLon;
	public PositionModel(double wgLat, double wgLon) {
   
   
		setWgLat(wgLat);
		setWgLon(wgLon);
	}
	public double getWgLat() {
   
   
		return wgLat;
	}
	public void setWgLat(double wgLat) {
   
   
		this.wgLat = wgLat;
	}
	public double getWgLon() {
   
   
		return wgLon;
	}
	public void setWgLon(double wgLon) {
   
   
		this.wgLon = wgLon;
	}
	@Override
	public String toString() {
   
   
		return wgLat + "," + wgLon;
	}
}

PositionUtil:

public class PositionUtil {
   
   

     public static final String BAIDU_LBS_TYPE = "bd09ll";

     public static double pi = 3.1415926535897932384626;
     public static double a = 6378245.0;
     public static double ee = 0.00669342162296594323;


     /**
      * * 火星坐标系 (GCJ-02) to 84 * * @param longitude * @param latitude * @return
      */
     public static PositionModel gcj_To_Gps84(double lat, double lon) {
   
   
         PositionModel gps = transform(lat, lon);
         double lontitude = lon * 2 - gps.getWgLon();
         double latitude = lat * 2 - gps.getWgLat();
         return new PositionModel(latitude, lontitude);
     }


     public static boolean outOfChina(double lat, double lon) {
   
   
         if (lon < 72.004 || lon > 137.8347)
             return true;
         if (lat < 0.8293 || lat > 55.8271)
             return true;
         return false;
     }

     public static PositionModel transform(double lat, double lon) {
   
   
         if (outOfChina(lat, lon)) {
   
   
             return new PositionModel(lat, lon);
         
在Vue3中,可以通过以下步骤加载GeoServer瓦片地图: 1. 首先,在Vue项目中安装高德地图2.0和axios: ``` npm install vue-amap axios --save ``` 2. 在main.js中引入高德地图2.0和axios: ``` import VueAMap from 'vue-amap'; import axios from 'axios'; Vue.use(VueAMap); Vue.use(axios); ``` 3. 在Vue组件中引入高德地图组件: ``` <template> <div> <amap :zoom="zoom" :center="center"> <tile-layer :url="url" /> </amap> </div> </template> <script> export default { data() { return { zoom: 10, center: [116.397428, 39.90923], url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/map:village@EPSG:3857@png/{z}/{x}/{y}.png' } } } </script> ``` 在上面的代码中,我们加载GeoServer瓦片地图,其中url为GeoServer中瓦片地图的地址。 4. 在Vue组件中使用axios从GeoServer中获取瓦片地图的地址,并将其赋值给url: ``` <template> <div> <amap :zoom="zoom" :center="center"> <tile-layer :url="url" /> </amap> </div> </template> <script> import axios from 'axios'; export default { data() { return { zoom: 10, center: [116.397428, 39.90923], url: '' } }, mounted() { axios.get('http://localhost:8080/geoserver/gwc/service/wmts?request=GetTile&version=1.0.0&service=WMTS&layer=map:village&tilematrixset=EPSG:3857&format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}').then(res => { this.url = res.request.responseURL; }); } } </script> ``` 在上面的代码中,我们通过axios从GeoServer中获取瓦片地图的地址,并将其赋值给url。注意,上面的代码中的url为WMTS的地址,需要根据自己的情况修改。 这样,我们就成功地加载GeoServer瓦片地图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nanjumufeng

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值