地图增加 网格

fengxiang

2018-08-13 c338b90c3dad1549ddc1eac1d1e2641dc8d332fd

地图增加 网格

 .angular-cli.json

@@ -24,7 +24,9 @@
            "../node_modules/@antv/g2/dist/g2.min.js",
            "../node_modules/@antv/data-set/dist/data-set.min.js",
            "../node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
            "../node_modules/echarts/dist/echarts.min.js"
            "../node_modules/echarts/dist/echarts.min.js",
            "../node_modules/echarts/map/js/china.js",
            "../node_modules/echarts/dist/extension/bmap.js" 
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {

 src/app/routes/forecasting-warning/forecasting-warning.component.html

@@ -31,5 +31,12 @@
    <!-- 15天 -->

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_temp_day" style="height: 300px; width: 100%"></div></div>

    <!-- <div nz-col [nzSpan]="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div> -->



</div>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

</div>

 src/app/routes/forecasting-warning/forecasting-warning.component.ts

@@ -8,7 +8,7 @@


@Component({

  selector: 'app-forecasting-warning',

  templateUrl: './forecasting-warning.component.html',

  templateUrl: './forecasting-warning.component.html'

})

export class ForecastingWarningComponent implements OnInit {




 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;
    }
}

 src/app/routes/home-page/home-page/home-page.component.html

@@ -93,7 +93,7 @@
                监控站点GIS分布
                <small class="text-sm font-weight-normal">总共: 128</small>
            </ng-template>
            <iframe style="width: 100%; height: 500px;" target="_top" src="http://monitor-api2.7drlb.com/screen/map-page?areaCode=320583&accountId=1"
            <iframe style="width: 100%; height: 500px;" target="_top" src="http://monitor-api2.7drlb.com/screen/map-page?areaCode=320583&accountId=1&mapType=BMAP_SATELLITE_MAP&isShowGrid=true"
                frameborder="0"></iframe>
        </nz-card>
    </div>

 src/app/routes/sand-table/sand-table.component.html

@@ -5,3 +5,6 @@
        <heatmap [dataset]="heatData" [options]="heatOption" (loaded)="loadHeatmap($event)"></heatmap>
        <control type="navigation" [options]="navigationOpts"></control>
</baidu-map>
<nz-row nzGutter="8">
        <div nz-col nzXs="24" nzSm="24" nzMd="24"><div id="map_temp" style="height: 800px; width: 600px;"></div></div>
</nz-row>

 src/app/routes/sand-table/sand-table.component.ts

@@ -4,7 +4,7 @@

@Component({
  selector: 'app-sand-table',
  templateUrl: './sand-table.component.html',
  templateUrl: './sand-table.component.html'
})
export class SandTableComponent implements OnInit {
    options: MapOptions;

 src/assets/app-data.json

@@ -20,6 +20,11 @@
              "link": "/home-page"
            },
            {
              "text": "网格溯源",
              "icon": "icon-support",
              "link": "/grid-trace"
            },
            {
              "text": "预报预警",
              "icon": "icon-pie-chart",
              "link": "/forecasting-warning"
@@ -65,11 +70,6 @@
                }]
            },
            {
              "text": "网格溯源",
              "icon": "icon-support",
              "link": "/grid-trace"
            },
            {
              "text": "运维运营",
              "icon": "icon-wrench",
              "children": [
@@ -88,27 +88,6 @@
                  "link": "/operation/device-maintenance"
                }
          ]
            },
            {
              "text": "扬尘监控",
              "icon": "icon-flag",
              "children":[
                {
                  "text": "实时监控和警告",
                  "link": "/raise-dust/real-time"
                },{
                  "text": "统计查询和分析",
                  "link": "/raise-dust/statistical-query"
                },{
                  "text": "图像抓拍",
                  "link": "/raise-dust/image-grabbing"
                }
              ]
            },
            {
              "text": "会商沙盘",
              "icon": "icon-people",
              "link": "/sand-table"
            }
          ]
        }

 src/environments/environment.ts

@@ -9,5 +9,5 @@
    production: false,
    hmr: false,
    useHash: true,
    SERVER_BASH_URL: `http://monitor-api2.7drlb.com/`
    SERVER_BASH_URL: `http://127.0.0.1:8080/`
};