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 | 62 ++++++++++++++++++++++++++++---
1 files changed, 56 insertions(+), 6 deletions(-)
diff --git a/src/app/routes/grid-trace/grid-trace.component.ts b/src/app/routes/grid-trace/grid-trace.component.ts
index 3d17648..5180555 100644
--- a/src/app/routes/grid-trace/grid-trace.component.ts
+++ b/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;
+ }
}
--
Gitblit v1.8.0