From c338b90c3dad1549ddc1eac1d1e2641dc8d332fd Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Mon, 13 Aug 2018 15:44:44 +0800
Subject: [PATCH] 地图增加 网格
---
src/app/routes/grid-trace/grid-trace.component.ts | 101 ++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 96 insertions(+), 5 deletions(-)
diff --git a/src/app/routes/grid-trace/grid-trace.component.ts b/src/app/routes/grid-trace/grid-trace.component.ts
index 10972ac..5180555 100644
--- a/src/app/routes/grid-trace/grid-trace.component.ts
+++ b/src/app/routes/grid-trace/grid-trace.component.ts
@@ -1,17 +1,108 @@
import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
+import { MapOptions, HeatmapData, HeatmapOptions, NavigationControlOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';
@Component({
selector: 'app-grid-trace',
templateUrl: './grid-trace.component.html',
})
export class GridTraceComponent implements OnInit {
-
+ options: MapOptions;
+ private _map: any;
constructor(
private http: _HttpClient
- ) { }
-
- ngOnInit() {
+ ) {
+ this.options = {
+ minZoom: 3,
+ maxZoom: 20,
+ cursor: 'default',
+ centerAndZoom: {
+ lng: 121,
+ lat: 31.4,
+ 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":120.99,"lat":31.399,"count":95},
+ {"lng":121.002,"lat":31.392,"count":80},
+ ],
+ max: 100
+ };
+ heatOption: HeatmapOptions = {
+ radius: 100
+ };
+ heatmapOverlay :any;
+ /**
+ * loadHeatmap
+ */
+ public loadHeatmap(heatmapOverlay) {
+ this.heatmapOverlay = heatmapOverlay;
+ }
+ ngOnInit() {
+ this.navigationOpts = {
+ anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,
+ 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;
+ }
}
--
Gitblit v1.8.0