Android 高德地图切换图层

一、默认样式

Android 地图 SDK 提供了几种预置的地图图层,包括卫星图、白昼地图(即最常见的黄白色地图)、夜景地图、导航地图、路况图层。

findViewById<TextView>(R.id.normal).setOnClickListener {
    updateSelectedStatus(TYPE_NORMAL)
    map?.mapType = AMap.MAP_TYPE_NORMAL
}

findViewById<TextView>(R.id.night).setOnClickListener {
    updateSelectedStatus(TYPE_NIGHT)
    map?.mapType = AMap.MAP_TYPE_NIGHT
}

findViewById<TextView>(R.id.navi).setOnClickListener {
    updateSelectedStatus(TYPE_NAVI)
    map?.mapType = AMap.MAP_TYPE_NAVI
}

findViewById<TextView>(R.id.satellite).setOnClickListener {
    updateSelectedStatus(TYPE_SATELLITE)
    map?.mapType = AMap.MAP_TYPE_SATELLITE
}

 

Android 高德地图切换默认图层

二、自定义地图

在高德控制台创建自定义地图图层,点击发布后拿到在线模式的style id以及离线模式的文件。

具体步骤参考下图:

1、在线调用

//自定义图层
val options = CustomMapStyleOptions().apply {
    isEnable = true
    styleId = "自定义地图的style id"
}
aMap?.setCustomMapStyle(options)

2、离线调用

再次修改地图样式如下:

选择sdk版本,下载离线文件;解压拿到stye.data & style_extra.data文件,放在项目中:

 val uri1 = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + packageName + "/" + R.raw.style)
val uri2 = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + packageName + "/" + R.raw.style_extra)
val styleStream = contentResolver.openInputStream(uri1)
val styleExtraStream = contentResolver.openInputStream(uri2)

val options = CustomMapStyleOptions().apply {
    isEnable = true
    styleData = FileUtils.InputStreamToByte(styleStream)
    styleExtraData = FileUtils.InputStreamToByte(styleExtraStream)
}
aMap?.setCustomMapStyle(options)
public static byte[] InputStreamToByte(InputStream is) throws Exception {
        byte[] buffer = new byte[1024];
        try (ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream()) {
            int current ;
            while ((current = is.read()) != -1) {
                byteArrayOutputStream.write(buffer, 0, current);
            }
            is.close();
            byteArrayOutputStream.flush();
            byteArrayOutputStream.close();
            return byteArrayOutputStream.toByteArray();
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        }
    }

6

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中切换高德地图图层,可以通过以下步骤实现: 1. 在 Vue 的 `mounted` 钩子函数中初始化地图: ```javascript mounted() { // 初始化地图 this.map = new AMap.Map('map-container', { zoom: 10, center: [116.397428, 39.90923] }); } ``` 2. 在模板中添加地图容器元素: ```html <template> <div id="map-container" style="height: 500px;"></div> </template> ``` 3. 添加一个切换图层的按钮,绑定点击事件: ```html <template> <div> <div id="map-container" style="height: 500px;"></div> <button @click="switchLayer">切换图层</button> </div> </template> ``` 4. 在 Vue 实例中添加 `switchLayer` 方法,用于切换图层: ```javascript methods: { switchLayer() { // 获取当前地图图层 const currentLayer = this.map.getLayers()[0]; // 切换到卫星图层 if (currentLayer === this.satelliteLayer) { this.map.setLayers([this.roadNetLayer]); } else { // 切换到路网图层 this.map.setLayers([this.satelliteLayer]); } } } ``` 5. 在 `mounted` 钩子函数中初始化卫星图层和路网图层,并将路网图层设置为默认图层: ```javascript mounted() { // 初始化地图 this.map = new AMap.Map('map-container', { zoom: 10, center: [116.397428, 39.90923] }); // 初始化卫星图层 this.satelliteLayer = new AMap.TileLayer.Satellite(); // 初始化路网图层 this.roadNetLayer = new AMap.TileLayer({ tileSize: 256, zooms: [3, 18], getTileUrl: (x, y, z) => { return `https://webst01.is.autonavi.com/appmaptile?style=7&x=${x}&y=${y}&z=${z}`; } }); // 将路网图层设置为默认图层 this.map.setLayers([this.roadNetLayer]); } ``` 这样就可以在 Vue 中实现切换高德地图图层了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值