高德地图 Web JS API示例学习笔记（6）——图层（图层通用接口、高德官方图层、简易行政区图）图层通用接口图层透明度高德官方图层简易行政区图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var satellite = new AMap.TileLayer.Satellite({
	map: map,
});

//绑定按钮事件
function addLayer() {
    satellite.setMap(map);
}

function rmLayer() {
    satellite.setMap(null);
}

function showLayer() {
    satellite.show();
}

function hideLayer() {
    satellite.hide();
}

1
2
3
4
5
6
7
var satellite = new AMap.TileLayer.Satellite({
	map: map,
    zIndex: 12,
    opacity: 0.8
});
satellite.setzIndex(16);

1
2
3
4
5
6
var satellite = new AMap.TileLayer.Satellite({
	map: map,
    opacity: opacity
});
satellite.setOpacity(0.6);

1
2
3
4
5
6
7
8
var map = new AMap.Map('container', {
	center: [116.397428, 39.90923],
    layers: [//只显示默认图层的时候，layers可以缺省
        new AMap.TileLayer()//高德默认标准图层
    ],
    zoom: 13
});

1
2
3
4
5
6
//实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    trafficLayer.setMap(map);

1
2
3
4
5
6
var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [new AMap.TileLayer.Satellite()],
        zoom: 13
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var map = new AMap.Map('container', {
      center: [116.397428, 39.90923],
      viewMode: '3D',
      pitch: 60,
      rotation: -35,
      // 隐藏默认楼块
      // features: ['bg', 'road', 'point'],
      mapStyle: 'amap://styles/light',
      layers: [
        // 高德默认标准图层
        new AMap.TileLayer.Satellite(),
        // 楼块图层
        new AMap.Buildings({
          // 通过zooms控制图层的显示层级
          zooms: [16, 18],
          zIndex: 10,
          heightFactor: 2 //2倍于默认高度，3D下有效
        })
      ],
      zoom: 16
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var disCountry = new AMap.DistrictLayer.Country({
 zIndex: 10,
 // SOC国家代码、名称、Bounds对照表可参考如下链接
 // https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
 SOC: 'CHN',
 // depth字段设定数据的层级深度，depth为0的时候只显示国家面，depth为1的时候显示省级，当国家为中国时设置depth为2的可以显示市一级
 depth: 2,
 styles: {
   // 国境线
   'nation-stroke': '#22ffff',
   // 海岸线
   'coastline-stroke': [0.85, 0.63, 0.94, 1],
   // 省界
   'province-stroke': 'white',
   // 市界
   'city-stroke': 'rgba(255,255,255,0.5)', //中国特有字段
   // 填充
   'fill': function (props) { //中国特有字段
     return getColorByDGP(props.adcode_pro)
   }
 }
})
var map = new AMap.Map("container",{
   zooms: [3, 10],
   showIndoorMap:false,
   zoom: 3,
   isHotspot:false,
   defaultCursor:'pointer',
   touchZoomCenter:1,
   pitch: 0,
   layers:[
       disCountry,
       new AMap.TileLayer.Satellite()
   ],
   viewMode:'3D',
   resizeEnable: true
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 创建省份图层
    var disProvince;
    // code为行政区代码
    // dep为显示行政区的深度，2表示显示当前层级的下2级
    // 如当前为省级，2表示显示县/区
    function initPro(code, dep) {
      dep = typeof dep == 'undefined' ? 2 : dep;
      adCode = code;
      depth = dep;

      disProvince && disProvince.setMap(null);

      disProvince = new AMap.DistrictLayer.Province({
        zIndex: 12,
        adcode: [code],
        depth: dep,
        styles: {
          'fill': function (properties) {
            // properties为可用于做样式映射的字段，包含
            // NAME_CHN:中文名称
            // adcode_pro
            // adcode_cit
            // adcode
            var adcode = properties.adcode;
            // 根据属性值赋颜色
            return getColorByAdcode(adcode);
          },
          'province-stroke': 'cornflowerblue',
          'city-stroke': 'white', // 中国地级市边界
          'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
        }
      });
      // 将省级数据添加到map中
      disProvince.setMap(map);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
   var nationStroke = 'rgba(20, 20, 120, 0.6)';
    var nationFill = 'rgba(20, 120, 230, 0.3)';

    // 绘制世界地图国家轮廓
    var disWorld = new AMap.DistrictLayer.World({
      zIndex: 10,
      styles: {
        // 颜色格式: #RRGGBB、rgba()、rgb()、[r, g, b, a]
        // 国境线
        //'nation-stroke': nationStroke,
        // 海岸线
        //'coastline-stroke': '',
        // 填充
        'fill': function (props) {
          if (props.SOC == 'CHN') {
            updateInfo(props);
            return nationFill;
          } else {
            return 'white'
          }
        }
      }
    });

    var map = new AMap.Map('container', {
      zooms: [3, 18],
      center: [110, 30],
      showIndoorMap: false,
      zoom: 3,
      isHotspot: false,
      defaultCursor: 'pointer',
      touchZoomCenter: 1,
      pitch: 0,
      layers: [
        disWorld
      ],
      viewMode: '3D',
      resizeEnable: true
    });

    map.on('click', function (ev) {
      var px = ev.pixel;
      // 拾取所在位置的行政区
      var props = disWorld.getDistrictByContainerPos(px);

      if (props) {
        var SOC = props.SOC;
        if (SOC) {
          // 重置行政区样式
          disWorld.setStyles({
            // 国境线
            //nation-stroke': nationStroke,
            // 海岸线
            //'coastline-stroke': '',
            'fill': function (props) {
              return props.SOC == SOC ? nationFill : 'white';
            }
          });
          updateInfo(props);
        }
      }
    });

    function updateInfo(props) {
      document.getElementById('name').innerText = props.NAME_CHN;
      document.getElementById('eng-name').innerText = props.NAME_ENG;
      document.getElementById('soc').innerText = props.SOC;
    }