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
|
) {
|
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() {
|
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;
|
/**
|
* 显示网格
|
*/
|
// TODO 临时
|
private showGridPolygons = [];
|
showGrid(){
|
if(this._map.getZoom()<14){
|
return;
|
}
|
const XY = this.bs();
|
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 = 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-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("你居然敢点我");
|
// });
|
// _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;
|
}
|
}
|
