首页 > 代码库 > angular2之地图

angular2之地图

2024-10-13 23:26:02   217人阅读

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‘; // 高德

angular2之地图


联系
我们