angular2之地图

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

})

});

}

}

 

 

export const DITU_SERVER_URL = 'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'; // 高德