uni-app 安卓端完美接入卫星地图：解决图层缺失与层级过高难题

jingling5552025-12-27 8:23

前言：

uni-app 的 `renderjs` 特性：

运行环境 ：在 App 端（Android/iOS）的 WebView 视图层 中执行（和 H5 一样）
能力：可直接操作 DOM、调用浏览器 API、加载第三方 JS 库（如高德 JS API）
通信：通过 $ownerInstance.callMethod() 与逻辑层（JS 引擎）双向通信

换句话说：你在 renderjs 里写的代码，就相当于在一个"内嵌网页"中运行 ------ 所以 Web 地图 SDK 完全可用！

问题：

在一些农业物联网APP应用中，常常对卫星地图的需求比较高，并且zoom的放大层级要求比较高，在使用高德的卫星地图过程中，我发现它的层级最高只能到16，无法满足放大查看更多层级图层，如图：

解决方案：

更换图层源（这两个卫星地图的图层源的层级都可以到18，对用户去放大地图的细节完全够用）：

1.使用mapbox图层源

目前国内已经无法注册

javascript 复制代码

const mapboxSatelliteLayer = new AMap.TileLayer({
            zooms: [12, 18],
            getTileUrl: (x, y, z) => {
                const accessToken = '你的token';
                return `https://api.mapbox.com/v4/mapbox.satellite/${z}/${x}/${y}.webp?sku=101MJBaF81K8z&access_token=${accessToken}`;
            },
            opacity: 1,
        });

2.使用天地图图层源

javascript 复制代码

const tiandituImgLayer = new AMap.TileLayer({
          zooms: [12, 18],
            getTileUrl: (x, y, z) => {
                return `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=你的tk&sk=你的sk`;
            },
            opacity: 1
        });

在创建地图实例时，加入对应图层源

javascript 复制代码

                // 创建地图实例
				map = new AMap.Map("container", {
					pitch: 50, //地图俯仰角度
					viewMode: '3D',
					zoom: 14,
					center: [84.920629, 45.417129], // 设置初始中心点 [lng, lat]
					layers: [mapboxSatelliteLayer],
					visible: true,
					resizeEnable: true,
					zooms: [2, 20], //地图显示的缩放级别范围
				});

实现效果：

1.mapbox图层源

2.天地图图层源

uni-app 安卓端完美接入卫星地图：解决图层缺失与层级过高难题

前言：

uni-app 的 renderjs 特性：

问题：

解决方案：

实现效果：

uni-app 的 `renderjs` 特性：