百度地图 TileOverlay

(https://lbs.baidu.com/index.php?title=iossdk/guide/map-render/tiledMap)
该图层支持开发者添加自有瓦片数据。该图层可随地图的平移、缩放、旋转等操作做相应的变换，它仅位于底图之上。

GIS切图工具说明

一、切割工具

   切割工具采用BaiduMapTileCutter。

二、切片操作说明

1.运行BaiduMapTileCutter.exe。

image.png

2.选择所要切割的图片，点击确认。

image.png

3.确认后，点击下一步，选择生成的瓦片图输出目录。

image.png

4.点击下一步，输出类型，可以默认选项，继续下一步。输入平面图对应的厂区实际位置中心点经纬度。(例如: 113.292965,23.152532 )

image.png

[图片上传中...(image.png-ffdf15-1648884208330-0)]

5.经纬度输入完成后，点击下一步。自定义设置最小级别和最大级别。并且选择原图所在级别（一般为最大级别）。

image.png

image.png

6.点击下一步，图层设置可以默认选项。点击下一步，继续点击开始切图。

image.png

7.生成的文档结构中有index.html, 双击即可看到切后冰放在地图上的效果

注：(1)平面图大小需要根据厂区所处实际经纬度计算（计算公式可以百度，经纬度和像素的转换）；
(2)中心点经纬度也要根据厂区所覆盖的矩形框的中心经纬度来输入；
(3)多张瓦片图合成一张
将各工厂同级别的瓦片图放在一个文件夹。例如：镁业切成4、5、6、7四个级别，化工切成4、5、6三个级别。要想在一个百度地图连接中看到镁业和化工，则需要将镁业的4级和化工的4级合在一个名字为”4”文件夹下，同理5、6也一样。

image.png

image.png

三、图片切好后, 把图片文件放到服务器访问即可

react的代码和效果图:

<TileLayer
      visiable={true}
       getTilesUrl={(tileCoord, zoom) => {
       const { x, y } = tileCoord;
      // 根据当前坐标，选取合适的瓦片图 "{x}","{y}"表示tile的坐标，"{zoom}"表示当tile显示的级别
       return `http://***/tiles/${zoom}/tile${x}_${y}.png`;
  }}
                    />

#######vue的代码

 <baidu-map
      style="width: 3400px; height: 1500px"
      :center="center"
      ak="i1i9SjGYUb4eGxpA7FTCow75TUNZhVLQ"
      :zoom="zoom"
      @ready="handler"
      @click="getClickInfo"
      :scroll-wheel-zoom="true"
    >
    <bm-tile
        :isTransparentPng="true"
        tileUrlTemplate="http://***/tiles1/{Z}/tile{X}_{Y}.png"
      >
     //图片文件放在服务器的tiles文件夹里面
      </bm-tile>
    </baidu-map>

高德地图

文档: https://lbs.amap.com/api/jsapi-v2/documentation#tilelayer
代码如下

    var tilerLayer = new AMap.TileLayer({
            zIndex: 10,
            getTileUrl: function(x, y, z) {
                var imgurl =`https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/bgimg/tiles/${z}/${x}_${y}.png`
                return imgurl;
            }
        });
        tilerLayer.setMap(map);
//转自 https://blog.csdn.net/qq_41374940/article/details/100107761?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1.nonecase

但由于需求的不同, 工地项目才用更为简单的ImageLayer来使用, 直接用图片图层来做,
可手动设置坐标点, 缩放可见度, 就是精准度没有切图工具的精准.
(ImageLayer 文档:https://lbs.amap.com/api/javascript-api/guide/layers/canvaslayer)

image.png

效果如下:

image.png

 // 创建图片图层
      this.imageLayer = new AMap.ImageLayer({
        url: this.imgUrl, // 图片 Url
        bounds: new AMap.Bounds(
          [that.form.leftLng, that.form.leftLat], //左下角
          [that.form.rightLng, that.form.rightLat] //右上角
        ),
        zIndex: 18, //层级，缺省为12
        zooms: [that.form.minZoom, that.form.maxZoom], // 设置可见级别，[最小级别，最大级别]
      });
      // setMap
      // 将图层添加至地图实例
      this.map.add(this.imageLayer);