高德地圖如何繪制3D邊界效果的省市區域圖 ？

 

 

實現3D邊界效果的省市區域圖 ，我們可以按照高德地圖提供的3D繪圖方式來進行實現，大致分為如下幾個步驟：

1、繪制地圖底圖。

2、設置光照

3、設置平行光源

4、添加Object3DLayer 專門承載 Object3D對象的圖層

5、搜索行政區域獲取行政邊界。

6、正式繪制3D圖形。

 

具體可參考官方網站：  https://lbs.amap.com/demo/javascript-api/example/mesh/prism

/*
 * @Description:
 * @Autor: George Zhang
 * @Date: 2021-10-11 11:46:55
 * @LastEditTime: 2021-10-27 16:46:05
 */
// 繪制地圖及省份
let zoom = 7.7;
var map = new AMap.Map("map", {
  zoom: zoom,
  center: [118.027115, 35.718297],
  pitch: 60,
  viewMode: "3D",
});
map.setFeatures(["bg", "road"]);

// 2d視圖，可以按照如下信息繪制省市的邊界區域
// var disProvince = new AMap.DistrictLayer.Province({
//   zIndex: 12,
//   adcode: ["370000"],
//   depth: 1,
//   styles: {
//     fill: function (properties) {
//       return "#AAAAAA";
//       // return "#B3B3B3";
//     },
//     "city-stroke": "white", //中國地級市邊界
//     "province-stroke": "#646D7D", //中國區縣邊界
//   },
// });
// disProvince.setMap(map);
// 設置光照
map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
// 設置平行光源
map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

// 添加Object3DLayer 專門承載 Object3D對象的圖層
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);

// 搜索行政區域
new AMap.DistrictSearch({
  subdistrict: 0, //返回下一級行政區
  extensions: "all", //返回行政區邊界坐標組等具體信息
  level: "city", //查詢行政級別為 市
}).search("山東省", function (status, result) {
  var bounds = result.districtList[0].boundaries;
  var height = 50000; //3d側邊的高度
  var color = "#0088ffcc"; // rgba
  var prism = new AMap.Object3D.Prism({
    path: bounds,
    height: height,
    color: color,
  });
  // 開啟透明度支持
  prism.transparent = true;
  object3Dlayer.add(prism);
});