实验平台：
codeblocks+opencv1.0

划线算法：
划线时考虑三种情况：
1. 当用户输入的起点坐标和终点坐标的x相同时，随着纵坐标增加1，横坐标保持不变，画出一条竖直的线

 if(x0==x1&&y0!=y1){
                x=x0;y=y0;
            for(;y<=y1;x++)
			{
				imagdraw(x0,y);
				y+=1;
			}
        }
测试结果：

                          

2. 当用户输入的起点坐标和终点坐标的y相同时，随着像素点横坐标增加1，纵坐标保持不变，画出一条水平的线

 if(y0==y1&&x0!=x1){
                x=x0;y=y0;
            for(;x<=x1;x++)
			{
				imagdraw(x,y0);
				x+=1;
			}
        }
测试结果：

                                    

3. 当用户输入的起点坐标和终点坐标的x和y不相同时（即所画直线有斜率），设直线通过点P1（x1,y1)


和
P2(x2,y2)，则直线方程可表示为：K=(y2-y1)/(x2-x1)
，当随着x增加一，将y取近，在y轴方向取离得近的那个像素点。
	k = dy/dx;
	if(abs(k)>=1)
	{
		if(y0<=y1)
		{
			x=x0;
			y=y0;
			for(;y<=y1;y++)
			{
				imagdraw(int(x+0.5),y);
				x += 1/k;
			}
		}
		else
		{
			x=x1;y=y1;
			for(;y<=y0;y++)
			{
				imagdraw(int(x+0.5),y);
				x += 1/k;
			}
		}
	}
	if(abs(k)<1)
	{
		if(x0<=x1)
		{
			x=x0;y=y0;
			for(;x<=x1;x++)
			{
				imagdraw(x,int(y+0.5));
				y+=k;
			}
		}
		else
		{
			x=x1;y=y1;
			for(;x<=x0;x++)
			{
				imagdraw(x,int(y+0.5));
				y+=k;
			}
		}
	}
	}


测试结果：

                               

在很多APP售卖的界面中经常看到有打折之前的价钱被添加了一条线条，本人在很多平台中找了方法，自己亲自码了几次，研究总结，分享这篇包括了所有方法，浅显易懂，和大家一起进步。（觉得有用就点击“喜欢”啦。）

UILabel添加线条.png

方法一：用RTLabel开源的富文本
  //首先创建一个Label
  label = [[UILabel alloc]initWithFrame:CGRectMake(130, 300, 180, 80)];
  label.font = [UIFont systemFontOfSize:35];
  label.backgroundColor = [UIColor yellowColor];
  [self.view addSubview:label];
  //设置显示的价格
  NSString *oldPrice = @"¥ 12345";
  //获取字符串的长度
  NSUInteger length = [oldPrice length];

  //从这里开始就是设置富文本的属性
  NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:oldPrice];

  //下面开始是设置线条的风格：
  //第一个参数addAttribute:是设置要中线（删除线）还是下划线。
  //NSStrikethroughStyleAttributeName：这种是从文本中间穿过，也就是删除线。
  //NSUnderlineStyleAttributeName：这种是下划线。

  //第二个参数value：是设置线条的风格：虚线，实现，点线......
  //第二参数需要同时设置Pattern和style才能让线条显示。

  //第三个参数range:是设置线条的长度，切记，不能超过字符串的长度，否则会报错。
  [attri addAttribute:NSStrikethroughStyleAttributeName value:@(NSUnderlinePatternSolid | NSUnderlineStyleSingle)  range:NSMakeRange(0, length)];

  //下列是设置线条的颜色
  //第一个参数就是选择设置中线的颜色还是下划线的颜色，如果上面选择的是中线，这里就要选择中线，否则颜色设置不上去。
  //第二个参数很简单，就是颜色而已。
  //第三个参数：同上。
  [attri addAttribute:NSStrikethroughColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, length)];

  [label setAttributedText:attri];
方法一总结：方法一是最常用的，最方便的一种。
方法二：重写drawRect:(CGRect)rect方法
说明：这种方法较复杂，逼格较高。再说明一下重绘，重绘操作是在在drawRect方法中完成，但是苹果不允许直接调用drawRect方法。苹果要求我们调用UIView类中的setNeedsDisplay方法，则程序会自动调用drawRect方法进行重绘。

在UIView中,重写drawRect: (CGRect) aRect方法,可以自己定义想要画的图案.且此方法一般情况下只会画一次.也就是说这个drawRect方法一般情况下只会被调用一次.

开始讲解：首先我们要创建一个继承UIView的子类：

然后在这个子类里面重写drawRect:(CGRect)rect方法，上代码：
#import "ViewSon.h"
@implementation ViewSon
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
       CGContextFillRect(context, CGRectMake(0, CGRectGetHeight(self.frame) - 0.5, CGRectGetWidth(self.frame), 0.5));
} 
@end
再者，在一个界面中添加UILabel，导入那个子类的头文件添加这个子类。
 label = [[UILabel alloc]initWithFrame:CGRectMake(130, 300, 180, 80)];
 label.text = @"   ¥258";
 label.font = [UIFont systemFontOfSize:35];
 [self.view addSubview:label];

  ViewSon * viewson = [[ViewSon alloc]initWithFrame:CGRectMake(35,100, 65, 4)];
viewson.backgroundColor = [UIColor redColor];
[viewson setNeedsDisplay];//这句就是调用方法，程序会自动调用重写了得那个方法。
[label addSubview:viewson];
方法二的使用性很广泛，可不是单单的添加删除线和下划线，利用这种方法可以绘制出各种各样的图案。利用它添加删除线的时候，需要设置下划线添加在哪里，线条的长度也是随意的设置，并不一定需要和显示的字符串一样长。

使用css样式布局价格划线，价钱中划线效果，优惠前原价格中间使用删除线一样效果样式
各大电商平台，个人商城也好，各大产品买卖也好，都会用原价格和优惠后价格形成对比，让用户产生购买下单欲望。通常会布局显示出原价格与优惠后价格，而原价格使用中划线(价格中间用一道横线删除线)。
优惠价格显示正常，原价格使用中划线样式
中划线在HTML标签中可以使用删除线实现。如果要CSS样式布局，就采用text-decoration样式实现。
需要对价格数字划线的时候，对其设置text-decoration:line-through即可。
这里CSS5采用HTML删除划线标签与CSS划线(中间划线)实现对促销原来价格进行中划线布局。
1、实例完成html css代码
价格划线CSS布局 CSS5
.huaxian{text-decoration:line-through}
优惠价格：100元，原价：200元
优惠价格：80元，原价：220元
2、划线布局截图
html标签价格划线与CSS样式价格划线实例截图
在实际HTML布局中，无论选择CSS样式布局中划线，还是HTML标签布局中划线也好，选择不重要，重要根据需求合理选择适合布局方式，html删除线贯穿线标签和CSS贯穿线中划线样式均可使用。
作者：css5原创

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

}

}

}