地图增加 网格

fengxiang

2018-08-13 c338b90c3dad1549ddc1eac1d1e2641dc8d332fd

 src/app/routes/grid-trace/grid-trace.component.ts

@@ -1,8 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { MapOptions, HeatmapData, HeatmapOptions, NavigationControlOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';
import { ViewEncapsulation } from '@angular/compiler/src/core';
import { BMapLib } from 'angular2-baidu-map/types/BMapLib';

@Component({
  selector: 'app-grid-trace',
@@ -16,26 +14,32 @@
    ) { 
        this.options = {
            minZoom: 3,
            maxZoom: 13,
            maxZoom: 20,
            cursor: 'default',
            centerAndZoom: { 
              lng: 121, 
              lat: 31.4,
              zoom: 17
              zoom: 15
            },
            enableKeyboard: true
          };  
    }
    loadMap(map: any) {      
        this._map = map;
        this.showGrid();
        this._map.addEventListener(
            'tilesloaded', () => {
                this.showGrid();
            }
        )
    }
    navigationOpts: NavigationControlOptions;
    //热力图
    heatData: HeatmapData = {
        data: [
            {"lng":121,"lat":31.4,"count":99},
            {"lng":121.02,"lat":31.38,"count":95},
            {"lng":120.96,"lat":31.39,"count":95},
            {"lng":120.99,"lat":31.399,"count":95},
            {"lng":121.002,"lat":31.392,"count":80},
        ],
        max: 100
    };
@@ -55,4 +59,50 @@
            type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
          };
    }
    //map为地图对象
    // TODO 临时
    bs() {
        var bs = this._map.getBounds();  //获取当前地图范围的经纬度
        // var bssw = bs.getSouthWest();      //获取西南角的经纬度(左下端点)
        // var bsne = bs.getNorthEast();      //获取东北角的经纬度(右上端点)
        return { 'x1': bs.Ol.lng, 'y1': bs.Ol.lat, 'x2': bs.xl.lng, 'y2': bs.xl.lat };
    }
    /**
     * 显示网格
     */
    // TODO 临时
    private showGridPolygons = [];
    showGrid(){
        const XY = this.bs();
        console.log(XY);
        let polygons = [];
        for (let i = XY.x1; i < XY.x2; i = i + 0.0063) {
            for (let j = XY.y2; j > XY.y1; j = j - 0.0048) {
                //此类表示绘制一个多边形覆盖物（注意:一定要下面的Point列表为多变形的顶点,描线顺序为从上到下,从左到右，顺序乱了,绘制出来的多边形也会乱，如图二所示，图二是将顶点的顺序给错了（网格左上端点,网格左下端点，网格右上端点，网格右下端点））
                const polygon = new window.BMap.Polygon([
                    new window.BMap.Point(i, j),    //网格左上端点
                    new window.BMap.Point(i, j-0.0048),  //网格左下端点
                    new window.BMap.Point(i+0.0063, j-0.0048),    //网格右下端点
                    new window.BMap.Point(i+0.0063, j)         //网格右上端点
                ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.1});
                // polygon .addEventListener("click",function clickFunction(){
                //     alert("你居然敢点我");
                // });
                // _map.addOverlay(polygon);
                polygons.push(polygon);
            }
        }        
        if(!!this.showGridPolygons && this.showGridPolygons.length > 0){
            this.showGridPolygons.forEach(
                polygon => {
                    this._map.removeOverlay(polygon);
                }
            );
        }
        // this._map.addOverlays(polygons);
        polygons.forEach(polygon=>{
            this._map.addOverlay(polygon);
        });
        this.showGridPolygons = polygons;
    }
}