Android基于高德地图加载自定义网络瓦片(使用geoserver)

公司开发项目使用自己的地图瓦片,由于前端前期使用geoserver,调研后发现高德地图有加载自定义网络瓦片的功能.

public class MyTileProvider extends UrlTileProvider {

    private String mRootUrl;
    //默认瓦片大小
    private static int titleSize = 256;//a=6378137±2(m)
    //基本参数
    private final double initialResolution = 156543.03392804062;//2*Math.PI*6378137/titleSize;
    private final double originShift = 20037508.342789244;//2*Math.PI*6378137/2.0; 周长的一半

    private final double HALF_PI = Math.PI / 2.0;
    private final double RAD_PER_DEGREE = Math.PI / 180.0;
    private final double HALF_RAD_PER_DEGREE = Math.PI / 360.0;
    private final double METER_PER_DEGREE = originShift / 180.0;//一度多少米
    private final double DEGREE_PER_METER = 180.0 / originShift;//一米多少度
    private Context context;
    
    public final static String LAYER_URL = "http://xxxxxxxxxx/Tilp/wms?service=WMS&VERSION=1.1.0&REQUEST=GetMap&LAYERS=Tilp:瓦片名称&SRS=EPSG:3857&FORMAT=image%2Fpng&TRANSPARENT=true&BBOX=";

    public MyTileProvider(Context context) {
        super(titleSize, titleSize);
        this.context = context;
        mRootUrl = MAP_URL;
    }

    public MyTileProvider(Context context, String url) {
        super(titleSize, titleSize);
        this.context = context;
        //地址写你自己的wms地址
        mRootUrl = url;
    }


    @Override
    public URL getTileUrl(int x, int y, int level) {

        try {
            String url = mRootUrl + TitleBounds(x, y, level);
            return new URL(url);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }

        return null;
    }


    /**
     * 根据像素、等级算出坐标
     *
     * @param p
     * @param zoom
     * @return
     */
    private double Pixels2Meters(int p, int zoom) {
        return p * Resolution(zoom) - originShift;
    }

    /**
     * 根据瓦片的x/y等级返回瓦片范围
     *
     * @param tx
     * @param ty
     * @param zoom
     * @return
     */
    private String TitleBounds(int tx, int ty, int zoom) {
        double minX = Pixels2Meters(tx * titleSize, zoom);
        double maxY = -Pixels2Meters(ty * titleSize, zoom);
        double maxX = Pixels2Meters((tx + 1) * titleSize, zoom);
        double minY = -Pixels2Meters((ty + 1) * titleSize, zoom);

        //转换成经纬度
        minX = Meters2Lon(minX);
        minY = Meters2Lat(minY);
        maxX = Meters2Lon(maxX);
        maxY = Meters2Lat(maxY);
        //坐标转换工具类构造方法 Gps( WGS-84) 转 为高德地图需要的坐标
        Gps position1 = PositionUtil.gcj_To_Gps84(minY, minX);
        minX = position1.getWgLon();
        minY = position1.getWgLat();
        Gps position2 = PositionUtil.gcj_To_Gps84(maxY, maxX);
        maxX = position2.getWgLon();
        maxY = position2.getWgLat();

        minX = Lon2Meter(minX);
        minY = Lat2Meter(minY);
        maxX = Lon2Meter(maxX);
        maxY = Lat2Meter(maxY);
        return minX + "," + Double.toString(minY) + "," + Double.toString(maxX) + "," + Double.toString(maxY) + "&WIDTH=256&HEIGHT=256";
    }

    /**
     * 计算分辨率
     *
     * @param zoom
     * @return
     */
    private double Resolution(int zoom) {
        return initialResolution / (Math.pow(2, zoom));
    }

    /**
     * X米转经纬度
     */
    private double Meters2Lon(double mx) {
        double lon = mx * DEGREE_PER_METER;
        return lon;
    }

    /**
     * Y米转经纬度
     */
    private double Meters2Lat(double my) {
        double lat = my * DEGREE_PER_METER;
        lat = 180.0 / Math.PI * (2 * Math.atan(Math.exp(lat * RAD_PER_DEGREE)) - HALF_PI);
        return lat;
    }

    /**
     * X经纬度转米
     */
    private double Lon2Meter(double lon) {
        double mx = lon * METER_PER_DEGREE;
        return mx;
    }

    /**
     * Y经纬度转米
     */
    private double Lat2Meter(double lat) {
        double my = Math.log(Math.tan((90 + lat) * HALF_RAD_PER_DEGREE)) / (RAD_PER_DEGREE);
        my = my * METER_PER_DEGREE;
        return my;
    }
}

瓦片地址http://xxxxxxxxxx/Tilp/wms?service=WMS&VERSION=1.1.0&REQUEST=GetMap&LAYERS=Tilp:瓦片名称&SRS=EPSG:3857&FORMAT=image%2Fpng&TRANSPARENT=true&BBOX=
需替换为自己的

注意

高德地图限制只能只用EPSG:3857坐标系,但前端使用的是**EPSG:4326 (WGS84)**坐标系,直接加载是不能显示的,需要处理一下坐标点.在TitleBounds方法中转换坐标

   //转换成经纬度
        minX = Meters2Lon(minX);
        minY = Meters2Lat(minY);
        maxX = Meters2Lon(maxX);
        maxY = Meters2Lat(maxY);
        //坐标转换工具类构造方法 Gps( WGS-84) 转 为高德地图需要的坐标
        Gps position1 = PositionUtil.gcj_To_Gps84(minY, minX);
        minX = position1.getWgLon();
        minY = position1.getWgLat();
        Gps position2 = PositionUtil.gcj_To_Gps84(maxY, maxX);
        maxX = position2.getWgLon();
        maxY = position2.getWgLat();

        minX = Lon2Meter(minX);
        minY = Lat2Meter(minY);
        maxX = Lon2Meter(maxX);
        maxY = Lat2Meter(maxY);

然后在需要加载地图出添加代码

  MyTileProvider tileProvider = new MyTileProvider(context, MyTileProvider.LAYER_URL);
        aMap.addTileOverlay(new TileOverlayOptions()
                .tileProvider(tileProvider1)
                .diskCacheDir("/storage/emulated/0/amap/1MCcache").diskCacheEnabled(true)
                .diskCacheSize(1024000)
                .memoryCacheEnabled(true)
                .memCacheSize(102400)
        );

diskCacheDir 缓存路径
diskCacheSize 缓存大小
如果不添加缓存的话加载瓦片速度比较慢,当然地图服务的带宽高也是没有影响的.

下面附上坐标系转换工具类


/**
 * 各地图API坐标系统比较与转换;
 * WGS84坐标系:即地球坐标系,国际上通用的坐标系。设备一般包含GPS芯片或者北斗芯片获取的经纬度为WGS84地理坐标系,
 * 谷歌地图采用的是WGS84地理坐标系(中国范围除外);
 * GCJ02坐标系:即火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
 * 谷歌中国地图和搜搜中国地图采用的是GCJ02地理坐标系; BD09坐标系:即百度坐标系,GCJ02坐标系经加密后的坐标系;
 * 搜狗坐标系、图吧坐标系等,估计也是在GCJ02基础上加密而成的。 chenhua
 */
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;

    /**
     * 84 to 火星坐标系 (GCJ-02) World Geodetic System ==> Mars Geodetic System
     *
     * @param lat
     * @param lon
     * @return
     */
    public static Gps gps84_To_Gcj02(double lat, double lon) {
        if (outOfChina(lat, lon)) {
            return null;
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new Gps(mgLat, mgLon);
    }

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

    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 将 GCJ-02 坐标转换成 BD-09 坐标
     *
     * @param gg_lat
     * @param gg_lon
     */
    public static Gps gcj02_To_Bd09(double gg_lat, double gg_lon) {
        double x = gg_lon, y = gg_lat;
        double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi);
        double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi);
        double bd_lon = z * Math.cos(theta) + 0.0065;
        double bd_lat = z * Math.sin(theta) + 0.006;
        return new Gps(bd_lat, bd_lon);
    }

    /**
     * * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 * * 将 BD-09 坐标转换成GCJ-02 坐标 * * @param
     * bd_lat * @param bd_lon * @return
     */
    public static Gps bd09_To_Gcj02(double bd_lat, double bd_lon) {
        double x = bd_lon - 0.0065, y = bd_lat - 0.006;
        double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
        double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
        double gg_lon = z * Math.cos(theta);
        double gg_lat = z * Math.sin(theta);
        return new Gps(gg_lat, gg_lon);
    }

    /**
     * (BD-09)-->84
     *
     * @param bd_lat
     * @param bd_lon
     * @return
     */
    public static Gps bd09_To_Gps84(double bd_lat, double bd_lon) {

        Gps gcj02 = PositionUtil.bd09_To_Gcj02(bd_lat, bd_lon);
        Gps map84 = PositionUtil.gcj_To_Gps84(gcj02.getWgLat(),
                gcj02.getWgLon());
        return map84;

    }

    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 Gps transform(double lat, double lon) {
        if (outOfChina(lat, lon)) {
            return new Gps(lat, lon);
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new Gps(mgLat, mgLon);
    }

    public static double transformLat(double x, double y) {
        double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y
                + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
        return ret;
    }

    public static double transformLon(double x, double y) {
        double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1
                * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0
                * pi)) * 2.0 / 3.0;
        return ret;
    }

    public static void main(String[] args) {

        // 北斗芯片获取的经纬度为WGS84地理坐标 31.426896,119.496145
        Gps gps = new Gps(31.426896, 119.496145);
        System.out.println("gps :" + gps);

        Gps gcj = gps84_To_Gcj02(gps.getWgLat(), gps.getWgLon());
        System.out.println("gcj :" + gcj);

        Gps star = gcj_To_Gps84(gcj.getWgLat(), gcj.getWgLon());
        System.out.println("star:" + star);

        Gps bd = gcj02_To_Bd09(gcj.getWgLat(), gcj.getWgLon());
        System.out.println("bd  :" + bd);
        Gps gcj2 = bd09_To_Gcj02(bd.getWgLat(), bd.getWgLon());
        System.out.println("gcj :" + gcj2);
    }
}

public class Gps {
    private double wgLat;
    private double wgLon;

    public Gps(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;
    }
}

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在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瓦片地图。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值