高德地图1.4.15楼层处理

星是河的眼

已于 2023-08-17 11:12:35 修改

阅读量596

点赞数 1

分类专栏：地图组件文章标签：前端

于 2023-08-17 11:09:25 首次发布

本文链接：https://blog.csdn.net/weixin_43770110/article/details/132336100

版权

地图组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前因：

接入了高德1.4.15JS API的项目中使用了mapStyle: ‘amap://styles/grey’,在这个模式下楼层几近透明，方案一是升级到2.0然后加wallColor （表示建筑物墙面的颜色）和roofColor （表示建筑物屋顶的颜色），但是升级到2.0之后问题很多。方案二是通过AMap.Buildings来设置楼层颜色

官方文档

高德图层
 高德Demo

官方工具

1、鼠标工具绘制多边形示例
2、geohub 创建自定义地图自定义地图调用

我的demo

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的ak&plugin=AMap.ControlBar,AMap.ToolBar, AMap.Buildings"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;
function mapInit(){
  var buildingLayer = new AMap.Buildings({zIndex:130,heightFactor: 5,merge:false,sort:false,zooms:[17,20]});
     var options = 
     {
          hideWithoutStyle:true,//是否隐藏设定区域外的楼块
          areas:[{ //围栏1
                visible:true,//是否可见
                rejectTexture:true,//是否屏蔽自定义地图的纹理
                color1: 'ffffff00',//楼顶颜色
                color2: 'ffffcc00',//楼面颜色
                // path: [[112.93,23.76],[114.95,23.75],[112.93,21.74],[114.96,21.74]]
                path:[[113.917124,22.730673],[113.923304,22.731069],[113.92708,22.724894],[113.919441,22.723944]]
        },{ //围栏1
                visible:true,//是否可见
                rejectTexture:true,//是否屏蔽自定义地图的纹理
                color1: 'ff99ff00',//楼顶颜色
                color2: 'ff99ff00',//楼面颜色
                // path: [[112.93,23.76],[114.95,23.75],[112.93,21.74],[114.96,21.74]]
                path:[[113.919256,22.723792], [113.926999,22.724525], [113.928236,22.718062], [113.919403,22.716432]]
        }]
    };
    buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
  map = new AMap.Map('container', {
    rotateEnable:true,
    pitchEnable:true,
    zoom: 17,
    pitch: 50,
    rotation: -15,
    viewMode:'3D', //开启3D视图,默认为关闭
    zooms:[2,20],
    // center:[113.332226,22.997245],
    center:[113.917124,22.730673],
    mapStyle: 'amap://styles/grey',
    // roofColor: '#2c2c2c',
    // wallColor: '#161616',
    layers: [
            // 高德默认标准图层
            new AMap.TileLayer(),
            buildingLayer
        ],
        features:['bg','point','road'],
  });
  new AMap.Polygon({
        bubble:true,
        fillOpacity:0.4,
        strokeWeight:1,
        path:options.areas[0].path,
        map:map
    })
    new AMap.Polygon({
        bubble:true,
        fillColor:'green',
        fillOpacity:0.4,
        strokeWeight:1,
        path:options.areas[1].path,
        map:map
    })
  // 添加建筑物
  // const building = new AMap.Buildings({
  //     zooms: [0,20],
  //     merge: true,
  //     alpha: 1
  //   })
  //   var options = 
  //    {
  //         hideWithoutStyle:false,//是否隐藏设定区域外的楼块
  //         areas:[{ //围栏1
  //               //visible:false,//是否可见
  //               rejectTexture:true,//是否屏蔽自定义地图的纹理
  //               color1: 'ffffff00',//楼顶颜色
  //               color2: 'ffffcc00',//楼面颜色
  //               path: [[113.473606,22.995997],[113.473005,22.995482],[113.472442,22.994971],[113.472267,22.994801],[113.471307,22.995442],[113.471242,22.995446],[113.471133,22.995403],[113.4703,22.994622],[113.469916,22.994315],[113.469194,22.993719],[113.469032,22.993863],[113.468815,22.994108],[113.468625,22.994355],[113.468471,22.99466],[113.468421,22.994811],[113.468366,22.995156],[113.468306,22.996157],[113.468308,22.996557],[113.468483,22.996884],[113.468834,22.997188],[113.469481,22.997764],[113.470511,22.998708],[113.471404,22.999517],[113.471553,22.999568],[113.471713,22.999563],[113.471929,22.999463],[113.473228,22.998584],[113.474008,22.998046],[113.474541,22.997674],[113.474541,22.997576],[113.474604,22.997049],[113.474586,22.996895],[113.474179,22.996516],[113.473585,22.995997],[113.473606,22.995997]]
  //       }, { //围栏2
  //               color1: 'ff99ff00',
  //               color2: 'ff999900',
  //               path: [[113.474609,22.993478],[113.474489,22.993495],[113.473693,22.994009],[113.472898,22.994546],[113.472837,22.9946],[113.4728,22.994653],[113.472779,22.994745],[113.47282,22.994815],[113.47491,22.99655],[113.475041,22.996607],[113.47525,22.996643],[113.475715,22.996686],[113.475947,22.996688],[113.476103,22.996658],[113.477228,22.995932],[113.477261,22.995833],[113.477264,22.995729],[113.477205,22.995625],[113.47642,22.994899],[113.474854,22.993558],[113.47469,22.99348],[113.474609,22.993478]]
  //       }]
  //   };
  //   building.setStyle(options); //此配色优先级高于自定义mapStyle
    // building.setMap(map)
  // var controlBar = new AMap.ControlBar({
  //   position:{
  //     right:'10px',
  //     top:'10px'
  //   }
  // });
  // controlBar.setMap(map);
  
  // var toolBar = new AMap.ToolBar({
  //   position:{
  //     right:'40px',
  //     top:'110px'
  //   }
  // });
  // toolBar.setMap(map);
}
mapInit()
</script>
</body>
</html>