项目要点
- key必须是web(jsAPI)的应用,web服务的key是无效的;
- 只保留可视区域,可以选择行政区划效果,也可以卫星地图效果,但是好看的效果一定是精心设计过的最佳风格展示;
js调用
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed***&plugin=Map3D,AMap.DistrictSearch"></script>
完整代码
var opts = { subdistrict: 0, extensions: 'all', level: 'city' }; //利用行政区查询获取边界构建mask路径 //也可以直接通过经纬度构建mask路径 var district = new AMap.DistrictSearch(opts); district.search('宁波市', function (status, result) { var bounds = result.districtList[0].boundaries; var mask = [] for (var i = 0; i < bounds.length; i += 1) { mask.push([bounds[i]]) } var map = new AMap.Map('container', { mask: mask, center: [121.54816, 29.807034], viewMode: '3D', showLabel: true, labelzIndex: 130, pitch: 40, zoom: 9, mapStyle: 'amap://styles/grey', /*layers: [ new AMap.TileLayer.RoadNet({ //rejectMapMask:true }), new AMap.TileLayer.Satellite() ]*/ }); var maskerIn = new AMap.Marker({ position: [121.54816, 29.807034], map: map }) var maskerOut = new AMap.Marker({//区域外的不会显示 position: [121.54816, 29.807034], map: map }) //添加高度面 var object3Dlayer = new AMap.Object3DLayer({zIndex: 1}); map.add(object3Dlayer) var height = -7000; var color = '#00000cc';//rgba var wall = new AMap.Object3D.Wall({ path: bounds, height: height, color: color }); wall.transparent = true object3Dlayer.add(wall) //添加描边 for (var i = 0; i < bounds.length; i += 1) { new AMap.Polyline({ path: bounds[i], strokeColor: '#FFF', strokeWeight: 4, map: map }) } });
Done!