百度地圖（23）-GL 地圖屬性

1. GL 的庫提供了一些針對地圖屬性的設置函數，我估計二維的庫里也有，只不過當時寫的時候，沒有特意把這個總結出來。

　三維的庫demo特意把這個作為一個功能點總結了一下。

 

2.  主要有設置級別、縮小一級、放大一級、獲取當前級別、顯示POI文字、隱藏POI文字，顯示POI的icon，隱藏POI的icon，

顯示覆蓋物、隱藏覆蓋物、顯示3D建築物、隱藏3D建築物、顯示圖層、隱藏圖層。

其中圖層是 TileLayer。

 

3. 

function setNewZoom() {
  var zoom = document.getElementById('zoominput').value;
  map.setZoom(zoom);
}
function getMapZoom() {
  alert(map.getZoom());
}

function setNewCenter(){
  var lng = 116.514 + Math.floor(Math.random() * 589828) / 1e6;
  var lat = 39.416 + Math.floor(Math.random() * 514923) /1e6;
  var point = new BMMapGL.Point(lng,lat);
  map.setCenter(point);
}
function getMapCenter() {
  var cen = map.getCenter();
  alert('地圖中心點:(' + cen.lng.toFixed(5) + ',' + cen.lat.toFixed(5) + ')');
}

function setMapZoom1() {
  map = new BMapGL.Map('allmap',{
    minZoom:5,
    maxZoom:20
  });
}

function setMapZoom2() {
  map.setMinZoom(4);
  map.setMaxZoom(20);
}

function set3DView(){
  map.setHeading(64.5);
  map.setTilt(73);
}

function showPoi() {
  map.setDisplayOptions({
    poi: true       //是否顯示POI信息
  })
}

function hidePoi() {
  map.setDisplayOptions({
    poi: false       //是否顯示POI信息
  })
}

function showText() {
  map.setDisplayOptions({
    poiText: true
  })
}
function hideText() {
  map.setDisplayOptions({
    poiText: false
  })
}
function showIcon() {
  map.setDisplayOptions({
    poiIcon: true
  })
}
function hideIcon() {
  map.setDisplayOptions({
    poiIcon: false
  })
}

/**
 * 顯示覆蓋物
 */

function showOverlay(){

  var pt = new BMapGL.Point(116.404,39.915);
  map.centerAndZoom(pt,15);
  var marker = new BMapGL.Marker(pt);
  map.addOverlay(marker);

  map.setDisplayOptions({
    overlay:true
  })
}

function hideOverlay() {
  map.setDisplayOptions({
    overlay:false
  })
}

function addTilelay() {
  tilelayer.zIndex = 110;
  tilelayer.getTilesUrl = function (point, level) {
    if(!point || level <0){
      return null;
    }

    var row = point.x;
    var col = point.y;
    var url = '//mapsv0.bdimg.com/tile/?udt=' + udtVersion + '&qt=tile&styles=' + tstyle
      + '&x=' + row + '&y=' + col + '&z=' + level;
    return url;
  }
  map.addTileLayer(this.tilelayer);
}

/**
 * 顯示圖層
 */
function showTilelay() {
  addTilelay();
  // map.setDisplayOptions({
  //   layer:true
  // })
}

function hideTilelay() {
  map.removeTileLayer(this.tilelayer);
  // map.setDisplayOptions({
  //   layer:false
  // })
}

var isTilePng = true;
var tileSize = 256;
var tstyle = 'pl';
var udtVersion = '20190102';
var tilelayer = new BMapGL.TileLayer({
  transparentPng:isTilePng
});

function show3Dbuild() {
  map.setDisplayOptions({
    building:true
  })
};

function hide3Dbuild() {
  map.setDisplayOptions({
    building:false
  })
}


function setMarkerVisible(){

  map.setDisplayOptions({
    overlay:false,
    layer:false,
    building:false
  })


}

function showRoadNet() {
  map.setMapType(BMAP_EARTH_MAP);
  map.setTilt(73);
  map.setDisplayOptions({
    street:true
  })
}

function hideRoadNet() {
  map.setDisplayOptions({
    street:false
  })
}

function setSkyColor() {
  map.setDisplayOptions({
    skyColors:['rgba(186,0,255,0)','rgba(186,0,255,0.2)']
  })
}

 

4. 頁面顯示

 

 

5 . 代碼參考

https://github.com/WhatGIS/bdMap