固定网格

fengxiang

2018-08-14 e967b16bd4517f98a8e9306a4c6092e2dea6a567

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

@@ -62,11 +62,18 @@
    //map为地图对象
    // TODO 临时
    bs() {
        debugger;
        var bs = this._map.getBounds();  //获取当前地图范围的经纬度
        // var bssw = bs.getSouthWest();      //获取西南角的经纬度(左下端点)
        // var bsne = bs.getNorthEast();      //获取东北角的经纬度(右上端点)
        if(!this.topLeftAnchor){
            this.topLeftAnchor = {x0:0,y0:0};
            this.topLeftAnchor.x0 =  bs.Ol.lng;
            this.topLeftAnchor.y0 =  bs.xl.lat;
      }
        return { 'x1': bs.Ol.lng, 'y1': bs.Ol.lat, 'x2': bs.xl.lng, 'y2': bs.xl.lat };
    }
    private topLeftAnchor = null;
    /**
     * 显示网格
     */
@@ -74,16 +81,26 @@
    private showGridPolygons = [];
    showGrid(){
        const XY = this.bs();
        console.log(XY);
        var X1 = XY.x1;
        var Y2 = XY.y2;
        var X0 = this.topLeftAnchor.x0;
        var Y0 = this.topLeftAnchor.y0;
        var width = 0.0063;
        var height = 0.0048;
        // var multiple = 1000000;
        if(!!this.topLeftAnchor) {
            X1=X0 + Math.ceil((X1-X0)/width-1)*width;
            Y2=Y0 + Math.ceil((Y2-Y0)/height)*height;
      }
        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) {
        for (let i = X1; i < XY.x2; i = i + width) {
            for (let j = Y2; j > XY.y1; j = j - height) {
                //此类表示绘制一个多边形覆盖物（注意:一定要下面的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)         //网格右上端点
                    new window.BMap.Point(i, j-height),  //网格左下端点
                    new window.BMap.Point(i+width, j-height),    //网格右下端点
                    new window.BMap.Point(i+width, j)         //网格右上端点
                ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.1});
                // polygon .addEventListener("click",function clickFunction(){
                //     alert("你居然敢点我");