import { Injectable } from ‘@angular/core‘;
import { Http } from ‘@angular/http‘;
import { Observable } from ‘rxjs/Rx‘;
import { DITU_SERVER_URL } from ‘../app.constants‘;
import * as ol from ‘openlayers‘;
@Injectable()
export class MapService {
map: ol.Map;
constructor(private http: Http) { }
// methods
init(lines, points, guiJiLines, guiJiPoints, centerP) {
// let url = ‘http://10.172.71.206:6080/arcgis/rest/services/hzz/hzzditu/MapServer‘;
// let url = ‘http://192.168.0.148:6080/arcgis/rest/services/hzz/hzzditu/MapServer‘;
let url = `${DITU_SERVER_URL}`;
if ((!centerP) || centerP == null || centerP.longitude == null) {
centerP.longitude = 106.499258;
centerP.latitude = 29.535594;
}
let lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: ‘red‘,
width: 10
})
});
let pointStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
color: ‘#8959A8‘,
crossOrigin: ‘anonymous‘,
src: ‘https://openlayers.org/en/v4.1.1/examples/data/dot.png‘
}))
});
let guiJiLinesStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: ‘blue‘,
width: 10
})
});
let guiJiPointsStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
color: ‘#8959A8‘,
crossOrigin: ‘anonymous‘,
src: ‘https://openlayers.org/en/v4.1.1/examples/data/dot.png‘
}))
});
let features = [];
for (let i = 0; i < lines.length; i++) {
let arr = lines[i];
let pointList = [];
for (let j = 0; j < arr.length; j++) {
let p = arr[j];
pointList.push(ol.proj.fromLonLat([new Number(p.longitude), new Number(p.latitude)]));
}
let feature = new ol.Feature(new ol.geom.LineString(pointList));
feature.setStyle(lineStyle);
features.push(feature);
}
for (let i = 0; i < points.length; i++) {
let point = points[i];
let pointFea = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([new Number(point.longitude), new Number(point.latitude)]))
});
pointFea.setStyle(pointStyle);
features.push(pointFea);
}
let source = new ol.source.Vector({
features: features
});
let layer = new ol.layer.Vector({
source: source
});
//巡河轨迹
let features2 = [];
for (let i = 0; i < guiJiLines.length; i++) {
let arr = guiJiLines[i];
let pointList = [];
for (let j = 0; j < arr.length; j++) {
let p = arr[j];
pointList.push(ol.proj.fromLonLat([new Number(p.longitude), new Number(p.latitude)]));
}
let feature = new ol.Feature(new ol.geom.LineString(pointList));
feature.setStyle(guiJiLinesStyle);
features2.push(feature);
}
for (let i = 0; i < guiJiPoints.length; i++) {
let point = guiJiPoints[i];
let pointFea = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([new Number(point.longitude), new Number(point.latitude)]))
});
pointFea.setStyle(guiJiPointsStyle);
features2.push(pointFea);
}
let source2 = new ol.source.Vector({
features: features2
});
let layer2 = new ol.layer.Vector({
source: source2
});
if (this.map) {
this.map.getTargetElement().innerHTML = ‘‘;
this.map = null;
}
this.map = new ol.Map({
target: ‘map‘,
layers: [
// new ol.layer.Tile({
// source: new ol.source.OSM()
// }),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: url
})
}),
layer,
layer2
],
view: new ol.View({
center: ol.proj.fromLonLat([new Number(centerP.longitude), new Number(centerP.latitude)]),
// center: ol.proj.fromLonLat([106.499258, 29.535594]),
zoom: 14
})
});
}
}
