Map创建自定义图片图层，图片会随着地图缩放而缩放，uniapp、高德、腾讯、百度

场景：在项目开发中会遇到在map上绘制图层，一般想到的方法会是通过接口获取图层边界的所有点，由点生成polygons多边形面。polygons 多边形示例数据过多地图会存在卡顿的问题。

目的：创建自定义图片图层，可以解决数据过多地图卡顿的问题并优化提高了性能。

1、uniapp - map地图组件addGroundOverlay 创建实时更新自定义图片图层方法

2、高德地图web API 自定义图层 CustomLayer 自定义图层-图层- JS API v2.0 | 高德地图API

3、腾讯地图 API

4、百度地图地面叠加层覆盖

1、uniapp - map地图组件addGroundOverlay 创建实时更新自定义图片图层方法

配置 "requiredPrivateInfos" : [ "startLocationUpdate", "startLocationUpdateBackground", "getLocation", "onLocationChange" ]，如图
uni.createMapContext(mapId,this)；例：this.mapContext = uni.createMapContext("map",this)。
@regiοnchange="onRegionChange"，视野发生变化时触发。
通过this.mapContext.getRegion({success: res=>{}})获取当前地图的视野范围，接口调用成功的回调函数，res = {southwest, northeast}，西南角与东北角的经纬度。
this.mapContext.addGroundOverlay(),创建自定义图片图层，图片会随着地图缩放而缩放。
this.mapContext.removeGroundOverlay()，移除上一个自定义图片图层。

效果图如下：

代码示例如下：

<template><view class="map-wrap"><mapid="map"ref="map"style="height: 100vh; width:100%;":latitude="map.latitude":longitude="map.longitude":polyline="polyline":scale="scale":show-location="true":enable-building="true":enable-3D="true"@regionchange="onRegionChange"></map></view>
</template><script>
export default {name: '',components: {},props: {optionInfo:{type: Object,default: () => {return {}}},Iconstyle:{type: Boolean,default:false}},data() {return {map: { //地图初始中心点latitude: "",longitude: ""},mapContext:null,gdtbLayerId: 0 // 耕地图斑图层ID};},created() {this.mapContext = uni.createMapContext("map",this);},mounted() {this.onRegionChange();},methods: {//监听移动 获取当前地图的视野范围onRegionChange(e){if (!e || e.type === "end") {this.mapContext.getRegion({success: res=>{this.loadGdtbLayerByRegion(res)}})}},// 根据经纬度加载当前屏幕范围内的耕地 loadGdtbLayerByRegion (region) {let northeast = region.northeastlet southwest = region.southwest//获取的图片坐标是wgs84,则需要将地图坐标gcj02转成wgs84的let wgs84Northeast = this.gcj02towgs84(northeast.longitude, northeast.latitude)let wgs84Southwest = this.gcj02towgs84(southwest.longitude, southwest.latitude)let bboxs = [wgs84Southwest[0],wgs84Southwest[1],wgs84Northeast[0],wgs84Northeast[1]];let hkb = ((bboxs[2] - bboxs [0]) / (bboxs[3] - bboxs[1])).toFixed(8)let size = [ 1200, Math.ceil(1200 / hkb) ]let oldGdtbLayerId = this.gdtbLayerIdthis.gdtbLayerId = this.gdtbLayerId + 1let layerParma = {id: this.gdtbLayerId, //图片图层 id//图片路径，支持网络图片、临时路径、代码包路径src: "",下面src地址是gis服务提供的，可通过 &bbox=" + bboxs.join(",") 动态获取图片地址，//src: config.arcgisurl + "/GDDLTB/MapServer/export?dpi=96&transparent=true&format=png8&bbox=" + bboxs.join(",") + "&bboxSR=4490&size=" + size.join(",") + "&imageSR=4490&f=image",visible: true,//是否可见zindex: 1,//图层绘制顺序opacity: 0.6, //图层透明度bounds: {//图片覆盖的经纬度范围northeast: northeast,//东北角经纬度southwest: southwest//西南角经纬度},success: res => {if (oldGdtbLayerId) {//移除上一个自定义图片图层this.mapContext.removeGroundOverlay({ id: oldGdtbLayerId })}},fail: err => {console.log("失败：", err)},}this.mapContext.addGroundOverlay(layerParma)},//经纬度坐标转换：gcj02转wgs84gcj02towgs84(lng, lat) {lat = parseFloat(lat)lng = parseFloat(lng)// 定义一些常量var PI = 3.1415926535897932384626var a = 6378245.0var ee = 0.00669342162296594323function transformlat(lng, lat) {var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0return ret}function transformlng(lng, lat) {var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0return ret}// 判断是否在国内，不在国内则不做偏移function out_of_china(lng, lat) {return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)}if(out_of_china(lng, lat)) {return [lng, lat]} else {var dlat = transformlat(lng - 105.0, lat - 35.0)var dlng = transformlng(lng - 105.0, lat - 35.0)var radlat = lat / 180.0 * PIvar magic = Math.sin(radlat)magic = 1 - ee * magic * magicvar sqrtmagic = Math.sqrt(magic)dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)var mglat = lat + dlatvar mglng = lng + dlngreturn [lng * 2 - mglng, lat * 2 - mglat]}}}
};
</script>

uniapp - map地图组件addGroundOverlay创建自定义图片图层方法：代码如上

uni.createMapContext(mapId,this)；例：this.mapContext = uni.createMapContext("map",this)。
去掉视野发生变化时触发，@regiοnchange="onRegionChange"，在mounted中调用onRegionChange方法
通过this.mapContext.getRegion({success: res=>{}})获取当前地图的视野范围，接口调用成功的回调函数，res = {southwest, northeast}，西南角与东北角的经纬度。
this.mapContext.addGroundOverlay(),创建自定义图片图层，图片会随着地图缩放而缩放。
this.mapContext.removeGroundOverlay()，移除上一个自定义图片图层。

2、高德地图web API 自定义图层 CustomLayer 自定义图层-图层- JS API v2.0 | 高德地图API

示例代码：高德地图自定义图层-Canvas-示例中心-JS API 2.0 示例

var cLayer = new AMap.CustomLayer(canvas, {zooms: [2, 18],zIndex: 120,render() {// 对 canvas 进行绘制}
})

3、腾讯地图 API

用于创建自定义图片图层，图片会随着地图缩放而缩放。

静态图贴地图层 | 代码示例

4、百度地图地面叠加层覆盖物

SAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。
GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。

图片类型示例

创建地图参照展示地图
创建地面叠加层实例，并添加到地图上

创建地面叠加层使用BMapGL.GroundOverlay类，其继承自Overlay，通过map.addoverlay()方法将创建的叠加层添加到地图上。

     // 创建叠加物显示的范围Boundsvar pStart = new BMapGL.Point(117.19635, 36.24093);var pEnd = new BMapGL.Point(117.20350, 36.24764);var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));// 创建地面叠加层实例var imgOverlay = new BMapGL.GroundOverlay(bounds, {type: 'image',url: '/jsdemo/img/shouhuimap.png',opacity: 1});// 叠加层添加到地图map.addOverlay(imgOverlay);

示例：地图JS API示例

其它几种api没有实践，仅供参考...