3D 地图渲染-区域纹理图添加

news2025/4/11 0:35:24

引入-初始化地图（关键代码）

// 初始化页面引入高德 webapi -- index.html 文件
<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>

// 添加地图容器
<div id='container' ></div>

// 地图初始化应该在地图容器 div 已经添加到 DOM 树之后
 let map = {};
// 初始化背景地图--封装方法
export const mapInit = (
  id = 'index-overView',
  opts = {},
  styleId = 'amap://styles/XXXXXXXXXXXXXXXXXXXXXXXXX'
) => {
  // fc35552908a5c4f34b7330621230b0bd
  // if(Object.keys(map).length === 0){
  // }
  map = new AMap.Map(
    id,
    Object.assign(
      {
        mapStyle: styleId,
        zoom: 8,
        center: [110.412427, 29.303573]
        // pitch: 50,
        // viewMode: '3D',
        // features: ['bg', 'road'],
      },
      opts
    )
  );
  return map;
};

// 初始化
this.map = mapInit('mapContainer2', {
     mask: mask,
     viewMode: '3D',
     pitch: this.pitchList[this.currentAreaList.length - 1],
     zoom: 9.3,
     center: [120.66888, 29.686606],
     features: ['bg', 'road'],
     dragEnable: true,
     zoomEnable: true,
     layers: [imageLayer]
});

设置3d-这时候只需要给版块添加个wall ,把版块抬起来就可以了（关键代码）

// 添加高度面(只有添加了这个，才会有立体的感觉，这里用2.0版本，Object3DLayer会报错，所以改用1.0版本)
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
var height = -50000;
var color = '#00C2FF'; //rgba   384C4B — 242D2D  56,76,75  36,45,45    0.2,0.3,0.3   0.15,0.18,0.18
 var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
});
wall.transparent = true;
object3Dlayer.add(wall);

this.map.add(object3Dlayer);

//修改当前光照-----重点 这里通过修改光照 能到达更好的立体效果
this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
this.map.DirectionLight = new AMap.Lights.DirectionLight(
          [0, 2, -14],
          [1, 1, 1],
          0.5
);

添加纹理图-将图片放在地图上
注意：图片一定要按实际比例；图片背景必须透明；图片边界和地图四个点相交，如下图：

 // 添加纹理地图
var imageLayer = new AMap.ImageLayer({
     url: require('/src/assets/images/entService-platform/texture.png'),
     // 3d模式下，不要轻易改动 bounds 的经纬度值哈，不然你会后悔的，很难调。2d 下通过获取西南方向，和东北方向的经纬度即可
     bounds: new AMap.Bounds(
     [119.194408, 29.128922],
     [122.143352, 30.943633]
        ),
    zIndex: 2
});

这里面的 bounds 是图片中的左下角坐标,和右上角坐标 ,需要自己计算,调试步骤:
1、通过https://lbs.amap.com/demo/javascript-api-v2/example/district-search/draw-district-boundaries 使用DistrictSearch 绘制城市版块,画出该省市的边界线
2、找到边界线,东西南北的四个顶点坐标, 如上图标的数字
3、图片左下角坐标 , 是点1 的经度和点2 的纬度
4、图片右上角坐标 , 是点4 的经度和点3 的纬度

这样就得到了bounds 的值
这里四个点通过找到4个点在拾取器上搜索关键字直接获取到经纬度
点位拾取器
注意：这四个点的坐标,要么计算出来,要么就给地图添加点击事件.通过点击事件获取这四个点的坐标

完整代码

 initMap() {
      let district = new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 1,
        level: this.currentLevel
      });
      district.search(this.activeName, async (status, result) => {
        var districtList = result.districtList[0].districtList;

        var bounds = result.districtList[0]['boundaries'];
        var mask = [];
        this.polygons = [];
        for (var i = 0; i < bounds.length; i++) {
          mask.push([bounds[i]]);
        }
        // 添加纹理地图
        var imageLayer = new AMap.ImageLayer({
          url: require('/src/assets/images/entService-platform/texture.png'),
          // 3d模式下，不要轻易改动 bounds 的经纬度值哈，不然你会后悔的，很难调。2d 下通过获取西南方向，和东北方向的经纬度即可
          bounds: new AMap.Bounds(
            [119.194408, 29.128922],
            [122.143352, 30.943633]mapInit
          ),
          zIndex: 2
        });

        this.map = mapInit('mapContainer2', {
          mask: mask,
          viewMode: '3D',
          pitch: this.pitchList[this.currentAreaList.length - 1],
          zoom: 9.3,
          center: [120.66888, 29.686606],
          features: ['bg', 'road'],
          dragEnable: true,
          zoomEnable: true,
          layers: [imageLayer]
        });

        // 添加高度面(只有添加了这个，才会有立体的感觉，这里用2.0版本，Object3DLayer会报错，所以改用1.0版本)
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        var height = -50000;
        var color = '#00C2FF'; //rgba   384C4B — 242D2D  56,76,75  36,45,45    0.2,0.3,0.3   0.15,0.18,0.18
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        });
        wall.transparent = true;
        object3Dlayer.add(wall);

        this.map.add(object3Dlayer);

        //修改当前光照
        this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
        this.map.DirectionLight = new AMap.Lights.DirectionLight(
          [0, 2, -14],
          [1, 1, 1],
          0.5
        );

        this.map.clearMap();
        let that = this;
        this.map.on('click', e => {
          that.$emit('closeDatePicker');
          // window.infoWindow.close();
        });

        this.getPolyline(bounds);

        getBounds({ searchName: '绍兴市' }).then(res => {
          this.countiesCenter = res.districtList.map(v => {
            return {
              name: v.name,
              center: [v.center.lng, v.center.lat]
            };
          });
          this.changeMapLevel();
        });
      });
    },
    //添加外围描边--- 外围需要更明显的边界的话 需要单独给外围 描边
    getPolyline(bounds) {
      for (var i = 0; i < bounds.length; i++) {
        new AMap.Polyline({
          path: bounds[i],
          isOutline: true,
          outlineColor: '#CAECF9',
          borderWeight: 3,
          strokeColor: '#69FFFD',
          strokeWeight: 2,
          strokeOpacity: 1,
          map: this.map
        });
      }
    },