1.ts代码

/**

* @version:1.0.0

* @author: zb

* @创建时间: 2017-05-25 18:22:35

*/

import { Component, OnInit, OnDestroy } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Http, Response, URLSearchParams, RequestOptionsArgs, Headers } from '@angular/http';

import { Router } from '@angular/router';

import { WrRvRec } from './wrRvRec.model';

import { WrRvRecService } from './wrRvRec.service';

import { MapService } from '../shared/map/map.service';

import { API_URL, FILE_URL, GEO_SERVER } from '../app.constants';

import { SessionStorageService } from 'ng2-webstorage';

import { WrRvLogMgmtDialogComponent } from "./wrRvLog-management-dialog.component";

import { WrRvRecModalService } from "./wrRvRec-modal.service";

 

@Component({

selector: 'jhi-wrRvRec-mgmt-detail',

styles:[`

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

:host >>> .modal-body.table {

position: relative;

-webkit-box-flex: 1;

-webkit-flex: 1 1 auto;

-ms-flex: 1 1 auto;

flex: 1 1 auto;

padding: 0px;

}

`],

templateUrl: './wrRvRec-management-detail.component.html'

})

export class WrRvRecMgmtDetailComponent implements OnInit, OnDestroy {

 

private subscription: any;

wrRvRec: any;

rvRec : any;

rvLine:any;

wrRvLogList : any;

private urlval :any = `${FILE_URL}`;

// mapType:string = '天地图矢量图';

mapType:string = 'vector';

 

constructor(

private wrRvRecModalService: WrRvRecModalService,

private wrRvRecService: WrRvRecService,

private http: Http,

private route: ActivatedRoute,

private mapService: MapService,

private router: Router,//路由

private $sessionStorage: SessionStorageService,

) {

}

 

ngOnInit() {

this.subscription = this.route.params.subscribe(params => {

this.load(params['id']);

});

}

 

/**

* 通过id获取列表对象

* @param id

*/

load (id) {

this.wrRvRecService.findByRecId(id).subscribe(wrRvRec => {

console.log(wrRvRec);

this.wrRvRec = wrRvRec;

this.rvRec = this.wrRvRec.rvRec;

this.rvLine = this.wrRvRec.rvLine;

if(this.rvLine != null && this.rvLine.linePList) {

this.rvRec.points = this.rvLine.linePList == null?'0':this.rvLine.linePList.length;//巡查点数量

} else {

this.rvRec.points = '0';

}

if(this.rvRec != null && this.rvRec.pids) {

this.rvRec.pids = this.rvRec.pids == null ?'0':this.rvRec.pids.split(',').length;//已经巡查点的数量

} else {

this.rvRec.pids = '0';

}

if(this.rvRec != null && this.rvRec.wrRvLogList) {

this.rvRec.shangbao =this.rvRec.wrRvLogList == null?'0': this.rvRec.wrRvLogList.length;//上报数量

} else {

this.rvRec.shangbao = '0';

}

 

 

this.wrRvLogList = this.rvRec ==null || this.rvRec.wrRvLogList==null?[]:this.rvRec.wrRvLogList;

// p-lightbox标签用到的数组 可以放大显示图片

if (this.wrRvLogList) {

let index:number = 1;

for (let m = 0; m<this.wrRvLogList.length; m++) {

let ImageList: any = [];

if (this.wrRvLogList[m].wrRvFileList != null) {

for (let n=0; n<this.wrRvLogList[m].wrRvFileList.length; n++) {

if (this.wrRvLogList[m].wrRvFileList[n].tp == 1) {

let file: any = {};

file.source = this.urlval + this.wrRvLogList[m].wrRvFileList[n].flPath; // 实际图

file.thumbnail = this.urlval + this.wrRvLogList[m].wrRvFileList[n].thu; // 缩略图

file.title = '';

 

ImageList.push(file);

}

}

}

this.wrRvLogList[m].ImageList = ImageList;

 

if(this.wrRvLogList[m].eventNm == null) { //巡查点名称为空的，自定义名称， 巡河上报问题1.2....

this.wrRvLogList[m].eventNm = '巡河上报问题'+index;

index +=1;

}

if(this.wrRvLogList[m].eventTpNm == null) {//部件类型为空

let description:string = this.wrRvLogList[m].description;

if(description != null && description !='') {

if(description.indexOf('公示牌')>-1) {

this.wrRvLogList[m].eventTpNm = '公示牌';

}

if(description.indexOf('水面')>-1) {

this.wrRvLogList[m].eventTpNm = '水面';

}

if(description.indexOf('排污口')>-1) {

this.wrRvLogList[m].eventTpNm = '排污口';

}

if(description.indexOf('取水口')>-1) {

this.wrRvLogList[m].eventTpNm = '取水口';

}

if(description.indexOf('界桩界碑')>-1) {

this.wrRvLogList[m].eventTpNm = '界桩界碑';

}

if(description.indexOf('河岸')>-1) {

this.wrRvLogList[m].eventTpNm = '河岸';

}

}

}

}

}

//规划线路

let lines = this.rvLine== null || this.rvLine.tra==null ? [] : JSON.parse(this.rvLine.tra.toString());

let points = [];

if(this.rvLine != null && this.rvLine.linePList){

for(let i = 0; i<this.rvLine.linePList.length;i++){

let point:any = {};

point.longitude = this.rvLine.linePList[i].lon;

point.latitude = this.rvLine.linePList[i].lat;

points.push(point);

}

}

//巡河轨迹

let guiJiLines = this.rvRec== null || this.rvRec.tra==null ? [] : JSON.parse(this.rvRec.tra.toString());

let guiJipoints = [];

if(this.rvRec != null && this.rvRec.linePList){

for(let i = 0; i<this.rvRec.linePList.length;i++){

let point:any = {};

point.longitude = this.rvRec.linePList[i].lon;

point.latitude = this.rvRec.linePList[i].lat;

guiJipoints.push(point);

}

}

//中心点设置

let centerP = this.rvLine == null || this.rvLine.staTra==null ? {} : JSON.parse(this.rvLine.staTra.toString());

// points.push(centerP);

// this.mapService.init(lines, points,guiJiLines,guiJipoints, centerP);

// console.log(points);

this.mapService.init();

if(centerP.longitude && centerP.latitude){

this.mapService.setCenter([centerP.longitude, centerP.latitude]);

} else {

for (let i = 0; i < guiJiLines.length; i++) {

let element = guiJiLines[i];

if(element) {

this.mapService.setCenter([element[0].longitude, element[0].latitude]);

break;

}

}

}

if(lines && lines.length > 0) {

this.mapService.addLine(lines, 'expect');

}

if(points && points.length > 0) {

this.mapService.addPoint(points, 'expect');

}

if(guiJiLines && guiJiLines.length > 0) {

console.log(guiJiLines);

this.mapService.addLine(guiJiLines, 'real');

}

if(guiJipoints && guiJipoints.length > 0) {

this.mapService.addPoint(guiJipoints, 'real');

}

// this.mapService.switchMap('vector');

if(this.rvRec.rvSegId && this.rvRec.rvSegId != null) {

this.rvRec.rvSegId = 'F3AE2B00000R500153001006';

this.http.get(GEO_SERVER+'/cq/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cq:tb_wr_rv_seg&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=RV_SEG_ID=%27'+this.rvRec.rvSegId+'%27&propertyName=GEOM')

.map((res: Response) => res.json())

.subscribe(response => this.onSegSuccess(response));

}

});

 

}

onSegSuccess(response){

console.log(response);

let features = response.features;

if(features != null) {

console.log(JSON.stringify(features[0].geometry.coordinates.toString()));

if(features[0].geometry != null && features[0].geometry.coordinates

&& (features[0].geometry.type == "MultiLineString"

|| features[0].geometry.type == 'CompoundCurve'

|| features[0].geometry.type == 'Polygon'

|| features[0].geometry.type == 'CurvePolygon')

) {

let coordinates = features[0].geometry.coordinates;

let rvSegGuiJiLine:any = [];

coordinates.forEach(element => {

let guiJiTemplete:any[]=[];

element.forEach(ele => {

let point:any = {};

point.longitude = ele[0];

point.latitude = ele[1];

guiJiTemplete.push(point);

});

rvSegGuiJiLine.push(guiJiTemplete);

});

this.mapService.addLine(rvSegGuiJiLine,'rvSeg');

}

if(features[0].geometry != null && features[0].geometry.coordinates

&& (features[0].geometry.type == "LineString"

|| features[0].geometry.type == 'MultiPoint'

|| features[0].geometry.type =='Point'

||　features[0].geometry.type =='CircularString') ) {

let coordinates = features[0].geometry.coordinates;

let rvSegGuiJiLine:any = [];

let guiJiTemplete:any[]=[];

coordinates.forEach(element => {

let point:any = {};

point.longitude = element[0];

point.latitude = element[1];

guiJiTemplete.push(point);

});

rvSegGuiJiLine.push(guiJiTemplete);

this.mapService.addLine(rvSegGuiJiLine,'rvSeg');

}

}

}

 

/**

* 查看问题详情

*/

lookWrRvLog(wrRvLog){

this.$sessionStorage.store('wrRvRecLog',wrRvLog);

// this.router.navigate(['/', { outlets: { popup: 'wrRvRec-RvLog'} }]);

this.wrRvRecModalService.openRvLog(WrRvLogMgmtDialogComponent);

}

 

previousState() {

window.history.go(-1);

}

 

switchMap(type) {

this.mapType = type;

this.mapService.switchMap(type);

}

 

ngOnDestroy() {

this.subscription.unsubscribe();

}

 

}

 

 

2.map.service

import { Injectable } from '@angular/core';

 

import * as ol from 'openlayers';

import * as coordtransform from 'coordtransform';

 

import { DITU_SERVER_URL, CQ_DITU_SERVER, GEO_SERVER } from '../../app.constants';

 

@Injectable()

export class MapService {

map: ol.Map;

defaultCenter = [106.499258, 29.535594];

type = 'vector'; // 地图类型

baseLayers = [];

features;

linesCache;

pointsCache;

rvSegId:string;

featureLayer = new ol.layer.Vector();

// 规划点样式

expectPointStyle = new ol.style.Style({

image: new ol.style.Icon({

// color: '#8959A8',

// src: 'https://openlayers.org/en/v4.1.1/examples/data/dot.png'

crossOrigin: 'anonymous',

src: '/images/icon/xun021.png'

})

});

// 规划线样式

expectLineStyle = new ol.style.Style({

stroke: new ol.style.Stroke({

color: 'red',

width: 10

})

});

// 巡河点样式

 

realPointStyle = new ol.style.Style({

image: new ol.style.Icon({

// color: '#9959A8',

// src: 'https://openlayers.org/en/v4.1.1/examples/data/dot.png'

crossOrigin: 'anonymous',

src: '/images/icon/xun021.png'

})

});

// 巡河线样式

realLineStyle = new ol.style.Style({

stroke: new ol.style.Stroke({

color: 'blue',

width: 10

})

});

 

// 河段线样式

rvSegLineStyle = new ol.style.Style({

stroke: new ol.style.Stroke({

color: '#16a5ff',

width: 10

})

});

 

/**

* 初始化地图

*/

init(rvSegId?:any) {

this.features = [];

this.linesCache = [];

this.pointsCache = [];

this.featureLayer = new ol.layer.Vector();

 

//天地图矢量图

// var tdt_vec = new ol.layer.Tile({

// name: '天地图矢量图',

// source: new ol.source.XYZ({

// url: 'http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}',

// projection: 'EPSG:3857'

// }),

// visible: true

 

// });

// this.baseLayers.push(tdt_vec);

// var tdt_cva = new ol.layer.Tile({

// name: '天地图矢量图',

// source: new ol.source.XYZ({

// url: 'http://t{0-6}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}',

// projection: 'EPSG:3857'

// }),

// visible: true

// });

// this.baseLayers.push(tdt_cva);

 

//重庆市矢量图

let gridSetsParams = this.gridSetsParams('EPSG:4326', 18, false); // 市资源共享交换平台的坐标系均为4326，最高缩放级别为18

let tileGrid = new ol.tilegrid.WMTS({

origin: gridSetsParams.origin,

resolutions: gridSetsParams.resolutions,

matrixIds: gridSetsParams.matrixIds

});

 

let vector = new ol.layer.Tile({

name: 'vector',

source: new ol.source.WMTS({

url: CQ_DITU_SERVER + '/8ca72f6bd53144f4859018c180843e18/af8551534a4b4b13ab60eac366ba44ef',

layer: 'ZHSQ_IMG1',

style: 'default',

matrixSet: 'CQMap_IMG',

projection: 'EPSG:4326',

tileGrid: tileGrid,

format: 'image/mixed'

}),

visible: true

});

 

this.baseLayers.push(vector);

 

//高德

let gaodeMap = new ol.layer.Tile({

source: new ol.source.XYZ({

url: DITU_SERVER_URL

}),

name: 'gaode',

visible: false

});

this.baseLayers.push(gaodeMap);

 

if (this.map) {

this.map.getTargetElement().innerHTML = '';

this.map = null;

}

//显示河段

if(rvSegId) {

this.rvSegId = rvSegId;

// this.rvSegId = 'F3AE2B00000R500153001006';

let rvSegGeoUrl = GEO_SERVER+'/cq/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cq:tb_wr_rv_seg&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=RV_SEG_ID=%27'+this.rvSegId+'%27&propertyName=GEOM';

let vectorSource = new ol.source.Vector({

projection: 'EPSG:4326',

format: new ol.format.GeoJSON(),

url: rvSegGeoUrl

});

let rvSegVector = new ol.layer.Vector({

name:'rvSegVector',

source: vectorSource,

// style: 'classed rivers(different width)'

style: new ol.style.Style({

stroke: new ol.style.Stroke({

color: '#16a5ff',

width: 10

})

})

});

this.baseLayers.push(rvSegVector);

}

this.map = new ol.Map({

target: 'map',

layers: this.baseLayers,

view: new ol.View({

center: ol.proj.transform(this.defaultCenter, 'EPSG:4326', 'EPSG:3857'),

zoom: 14

})

});

 

this.map.addLayer(this.featureLayer);

}

 

/**

* 设置中心点

* @param center 中心点

*/

setCenter(center) {

if (!center) {

return;

}

 

if (this.type === 'gaode') {

center = coordtransform.wgs84togcj02(center[0], center[1]);

} else {

center = coordtransform.gcj02towgs84(center[0], center[1]);

}

 

this.map.getView().setCenter(ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857'))

}

 

/**

* 添加点

* @param point 点坐标

* @param style 点样式

*/

addPoint(points?, style?) {

if (!points) {

if (!this.pointsCache) {

return;

}

let arrPoints = this.pointsCache;

this.pointsCache = [];

arrPoints.forEach(objPoints => {

this.addPoint(objPoints.points, objPoints.style);

});

} else {

this.pointsCache.push({

points: points,

style: style

});

for (let i = 0; i < points.length; i++) {

let point = points[i];

if (this.type !== 'gaode') {

point = coordtransform.gcj02towgs84(point.longitude, point.latitude);

} else {

point = [point.longitude, point.latitude]

// point = coordtransform.wgs84togcj02(point.longitude, point.latitude);

}

let pointFea = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat(point))

});

 

pointFea.setStyle(this[style + 'PointStyle']);

this.features.push(pointFea);

}

 

this.updateFeatureLayer();

}

}

 

// addRvSeg(rvSegId?:any){

// // let layerSeg = new ol.layer.Vector({

// // source: new ol.source.Vector({

// // format: new ol.format.GeoJSON(),

// // url:`${GEO_SERVER}`+'/cq/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cq:tb_wr_rv_seg&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=RV_SEG_ID='+rvSegId+'&propertyName=GEOM'

// // }),

// // style: 'classed rivers(different width)'

// // });

// if(rvSegId) {

// this.rvSegId = rvSegId;

// }

// let feature = new ol.Feature(new ol.source.Vector({

// format: new ol.format.GeoJSON(),

// url:`${GEO_SERVER}`+'/cq/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cq:tb_wr_rv_seg&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=RV_SEG_ID=%27'+this.rvSegId+'%27&propertyName=GEOM'

// }));

// feature.setStyle('classed rivers(different width)');

// this.features.push(feature);

// this.updateFeatureLayer();

// }

 

/**

* 添加线

* @param line 线坐标

* @param style 线样式

*/

addLine(lines?, style?) {

if (!lines) {

if (!this.linesCache) {

return;

}

 

let arrLines = this.linesCache;

this.linesCache = [];

arrLines.forEach(linesObj => {

this.addLine(linesObj.lines, linesObj.style);

});

} else {

this.linesCache.push({

lines: lines,

style: style

});

for (let i = 0; i < lines.length; i++) {

let arr = lines[i];

let pointList = [];

if(!arr){

continue;

}

for (let j = 0; j < arr.length; j++) {

let p = arr[j];

let point;

if (this.type !== 'gaode') {

if(style == 'rvSeg') {

point = [p.longitude, p.latitude];

} else {

point = coordtransform.gcj02towgs84(p.longitude, p.latitude);

}

} else {

if(style == 'rvSeg') {

point = coordtransform.wgs84togcj02(p.longitude, p.latitude);

} else {

point = [p.longitude, p.latitude];

}

}

pointList.push(ol.proj.fromLonLat(point));

}

let feature = new ol.Feature(new ol.geom.LineString(pointList));

feature.setStyle(this[style + 'LineStyle']);

this.features.push(feature);

}

 

this.updateFeatureLayer();

}

}

 

updateFeatureLayer() {

let source = this.featureLayer.getSource();

if (source) {

source.clear();

source.addFeatures(this.features);

} else {

this.featureLayer.setSource(new ol.source.Vector({

features: this.features

}));

}

}

 

/**

* 切换底图

* @param type 类型

*/

switchMap(type) {

if (this.type === type) {

return;

}

this.type = type;

this.baseLayers.forEach(layer => {

let name = layer.get('name');

if (name === type) {

layer.setVisible(true);

} else {

layer.setVisible(false);

if(name === 'rvSegVector') {

layer.setVisible(true);

}

}

});

 

let center = this.map.getView().getCenter();

center = ol.proj.toLonLat(center);

this.setCenter(center);

 

this.features = [];

this.addLine();

this.addPoint();

}

 

/**

* 交互平台地图配置

* @param pro

* @param zoomStop

* @param matrixIdWithProCode

*/

gridSetsParams(pro, zoomStop, matrixIdWithProCode) {

pro = (typeof pro) === 'string' ? pro : pro.getCode();

let projection = ol.proj.get(pro); // 由WMTS服务的数据源创建图层，WMTS数据源参数手动设置

let projectionExtent = projection.getExtent();

let size = ol.extent.getWidth(projectionExtent) / 256;

let resolutions = new Array();

let matrixIds = new Array();

for (let z = 0; z <= zoomStop; ++z) {

resolutions[z] = size / Math.pow(2, z);

matrixIds[z] = matrixIdWithProCode ? (pro + ':' + z) : z;

}

return {

origin: ol.extent.getTopLeft(projectionExtent),

resolutions: resolutions,

matrixIds: matrixIds

}

}

}