bigmap的2d与3d地图初始化，多图层。

最新推荐文章于 2025-02-27 21:53:26 发布

汪小君

最新推荐文章于 2025-02-27 21:53:26 发布

阅读量650

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Function_JX_/article/details/120283414

版权

  function init_2d_map() {

    BM.Config.HTTP_URL = window.BIGMAP_HTTP_URL;
    var map = BM.map('map', null, {zoom: 17, zoomControl: true});
    // var la = BM.tileLayer('bigemap.a3f639zf');
    // la.addTo(map);

    var la = BM.tileLayer('bigemap.0sikq61h');
    la.addTo(map);

    var wrap = BM.tileLayer('bigemap.blg15q29');
    wrap.addTo(map);




    var layer = BM.tileLayer('bigemap.bvlgot6a');
    layer.addTo(map);


    var layerMini = BM.tileLayer('bigemap.1h0tngwb');
    layerMini.addTo(map);


    map.fitBounds([[38.27956008911133, 106.35529327392578], [38.48396301269531, 106.63665008544922]]);

    mapInstance = map
  }

  function init_3d_map() {

    bmgl.Config.HTTP_URL = window.BIGMAP_HTTP_URL;

    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.0sikq61h',requestRenderMode:false})


    satellite = viewer.imageryLayers.get(0);

    var wrap = new bmgl.ImageryLayer(new bmgl.BMImageryProvider({
      mapId: 'bigemap.blg15q29',
    }));
    viewer.imageryLayers.add(wrap);


    streets = new bmgl.ImageryLayer(new bmgl.BMImageryProvider({
      mapId: 'bigemap.bvlgot6a',
    }));
    viewer.imageryLayers.add(streets);

    streetsMini = new bmgl.ImageryLayer(new bmgl.BMImageryProvider({
      mapId: 'bigemap.1h0tngwb',
    }));
    viewer.imageryLayers.add(streetsMini);


    viewer.camera.setView({
      destination: bmgl.Rectangle.fromDegrees(106.35529327392578, 38.27956008911133, 106.63665008544922, 38.48396301269531)
    });

    //取消默认的点击事件
    viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);

    //禁止默认的地形遮挡
    viewer.scene.globe.depthTestAgainstTerrain=false;



    viewerInstance = viewer
  }

创建标记点（坐标均为高德地图获取）

//2d
 var marker = BM.marker({lat,lng,title:username,...ext}).addTo(mapInstance);

//3d
var markerOjb = {
              id:point.id,
              position: bmgl.Cartesian3.fromDegrees(lng,lat),
              billboard:{
                heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
                image:'/static/icon/map/marker-icon.png'
              },
              // point: {
              //     pixelSize: 20,
              //     color: bmgl.Color.YELLOW
              // },
              label:{
                text:username,
                font:'16px',
                pixelOffset:new bmgl.Cartesian2(0, 30)
              },
              ext:point
            }
             var instance = viewerInstance.entities.add(markerOjb);

            staffInstance3DList.push(instance)


          }