百度离线地图与angularjs4的结合

预实现效果：在内部局域网（无外网）的情况下，以百度地图为底图，可放大缩小，业务指标在不同范围内显示指定颜色标识，同时展示相应数据信息；

方案分析：如果必须以百度地图为底图，则需要采用地图瓦片（瓦片下载器结合百度ak）拼接底图，利用离线api，同时结合地图Marker点添加图标Icon，标注Label等；

项目目录结构：

瓦片图片：src/assets/MapTiles；

地图离线api：src/dist/apiv2.0.min.js、src/dist/getmodules2.0.js；具体参考https://my.oschina.net/smzd/blog/548538，demo下载后修改瓦片路径和图片路径即可；

在.angular-cli.json中引入api的js文件；

说明：本文中使用经纬度定位；放大缩小级别为11~13级；地图底图的拼接是在api的方法中实现；

html

<div class="row">
        <div class="col-md-6" style="padding-right:1vw;">
            <div class="left-box">
                <div class="left-title">地图</div>
                <div class="left-main">
                    <div id="container" style="width:94%;height:116vh;margin:20px auto;"></div>
                </div>
            </div>
        </div>
    </div>

ts中declare var BMap引入BMap；

ngOnInit() {
    this.getBusinessPost();

    this.openTime = setInterval(()=>{
        this.getBusinessPost();
    },30000);
  }

  ngOnDestroy(){
    clearInterval(this.openTime);
  }

  changeIconLabel(dataAll){
    var _self = this;
    _self.map = new BMap.Map("container");      //设置底图
    var point = new BMap.Point(113.030409,23.053647);    // 创建点坐标
    _self.map.centerAndZoom(point,11); 
    _self.map.setMinZoom(11);
    _self.map.setMaxZoom(13);

    // _self.map.addControl(new BMap.NavigationControl({
    //     anchor: BMAP_ANCHOR_TOP_RIGHT, 
    //     type: BMAP_NAVIGATION_CONTROL_LARGE, 
    // }));

    // _self.map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    _self.map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
    _self.map.enableKeyboard(); 

    for (var i = 0; i < dataAll.length; i ++) {
        let iconImg;
        if(parseInt(dataAll[i].TIME)/1500 >= 1){
            iconImg = "../../assets/mapIcon3.png";
        }else if(parseInt(dataAll[i].TIME)/1200 >= 1){
            iconImg = "../../assets/mapIcon2.png";
        }else{
            iconImg = "../../assets/mapIcon1.png";
        }
        var points = new BMap.Point(dataAll[i].AREA_X,dataAll[i].AREA_Y);
        // 创建图标对象
        var myIcon = new BMap.Icon(iconImg, new BMap.Size(23, 25), {});  
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(points,{icon: myIcon});
        _self.map.addOverlay(marker); 
        var label = new BMap.Label(dataAll[i].NAME, { offset: new BMap.Size(30, -10) });
        marker.setLabel(label);
        label.setStyle({
            color: "White",
            fontSize: "14px",
            backgroundColor: "#5CACEE",
            border: "0"
        }); 
        if(dataAll[i].COUNT == null){
            marker.setTitle(dataAll[i].NAME+"\r\n"+"正在XX人数：0人");
        }else{
            marker.setTitle(dataAll[i].NAME+"\r\n"+"正在XX人数："+dataAll[i].COUNT+"人");
        }
    }
}

  getBusinessPost(){

    var _self = this;
    //地图数据
    _self.mapsData = [
      {NAME:'地点1',COUNT:10,TIME:10,AREA_X:113.14214,AREA_Y:23.003358},
      {NAME:'地点2',COUNT:10,TIME:10,AREA_X:113.123815,AREA_Y:23.041593},
      {NAME:'地点3',COUNT:10,TIME:1300,AREA_X:113.189009,AREA_Y:22.988988},
      {NAME:'地点4',COUNT:10,TIME:1300,AREA_X:113.116995,AREA_Y:23.119467},
      {NAME:'地点5',COUNT:10,TIME:10000,AREA_X:113.157242,AREA_Y:23.184999},
      {NAME:'地点6',COUNT:10,TIME:10000,AREA_X:113.058614,AREA_Y:23.066398},
    ];
    _self.changeIconLabel(_self.mapsData);
}

实现效果

注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢

百度离线地图与angularjs4的结合

猜你喜欢