WebGIS原理及开发——基于开源框架的WebGIS技术 课件 08-OpenLayers进阶.pptx

基于开源框架的WebGIS技术;1.WebGIS概述

2.WebGIS基础技术

3.WebGIS技术原理

4.WebGIS的Web服务;;8.1图形绘制

;点绘制;constlineCoor=[315499168,3562866.9013162893],

315499168,3562866.9013162893]]

conststyle=newStyle({

stroke:newStroke({color:yellow,width:10})

})

//创建一个线要素对象

constlineFeature=newFeature(newLineString(lineCoor))

constvectorLayer=newVectorLayer({

source:newVectorSource({

features:[lineFeature]

}),

style

});constpolygonCoor=[[

315499168,3562866.9013162893],

315499168,3562866.9013162893],

315499168,3563166.9013162893],

315499168,3562866.9013162893]

]]

conststyle=newStyle({

fill:newFill({color:blue})

})

//创建一个面要素对象

constpolygonFeature=newFeature(new

Polygon(polygonCoor))

constvectorLayer=newVectorLayer({

source:newVectorSource({

features:[polygonFeature]

}),

style

});letparams=

{

pntStart:315499168,3562866.9013162893],//起点

pntEnd:315499168,3562866.9013162893],//终点

points:[315499168,3563166.9013162893]],//控制点

pntCount:10//插入平滑点的个数，点越多曲线越平滑

}

letlineCoor=MathBase.getBezierCurveCoors(params)

conststyle=newStyle({

stroke:newStroke({color:yellow,width:10})

})

//创建一个线要素对象

constlineFeature=newFeature(newLineString(lineCoor))

constvectorLayer=newVectorLayer({

source:newVectorSource({

features:[lineFeature]

}),

style

});//贝塞尔曲线的数学实现方式

staticgetBezierCurveCoors(param)

{

param=Object.assign({pntStart:[0,0],pntEnd:[0,1],points:[[1,0]],pntCount:30},param)

//1、构造所有的控制点的集合。

letctrlPnts=[param.pntStart].concat(param.points).concat([param.pntEnd])

letctrlPntsStr=JSON.stringify(ctrlPnts)

//2、获取每个贝塞尔曲线点的坐标

letbserPoints=[]

lett,coor

for(leti=0;iparam.pntCount;i++)

{

t=Math.round((i/(param.