1+ import ol from "openlayers" ;
2+ import { CommonUtil } from "@supermap/iclient-common" ;
3+ import { Util } from '../../core/Util' ;
4+
5+ //获取某像素坐标点pixelP绕中心center逆时针旋转rotation弧度后的像素点坐标。
6+ function rotate ( pixelP , rotation , center ) {
7+ let x = Math . cos ( rotation ) * ( pixelP [ 0 ] - center [ 0 ] ) - Math . sin ( rotation ) * ( pixelP [ 1 ] - center [ 1 ] ) + center [ 0 ] ;
8+ let y = Math . sin ( rotation ) * ( pixelP [ 0 ] - center [ 0 ] ) + Math . cos ( rotation ) * ( pixelP [ 1 ] - center [ 1 ] ) + center [ 1 ] ;
9+ return [ x , y ] ;
10+ }
11+
12+ //获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
13+ function scale ( pixelP , center , scaleRatio ) {
14+ let x = ( pixelP [ 0 ] - center [ 0 ] ) * scaleRatio + center [ 0 ] ;
15+ let y = ( pixelP [ 1 ] - center [ 1 ] ) * scaleRatio + center [ 1 ] ;
16+ return [ x , y ] ;
17+ }
18+
19+ /**
20+ * @private
21+ * @class GraphicCanvasRenderer
22+ * @classdesc 高效率点图层 canvas渲染器。
23+ * @category Visualization Graphic
24+ * @extends L.Layer{@linkdoc-leaflet/#layer }
25+ * @param layer - {Array<L.supermap.graphicLayer>} 高效率点图层
26+ * @param {Object } options - 图层参数。
27+ * @param {number } options.width - 地图宽度
28+ * @param {number } options.height - 地图高度
29+ * @param {HTMLElement } options.container - 放置渲染器的父元素
30+ *
31+ * @param {Array<number> } options.color - 颜色,目前只支持rgba数组。默认[0, 0, 0, 255],
32+ * @param {number } options.radius - 半径,默认10
33+ * @param {number } options.opacity - 不透明度,默认0.8
34+ * @param {Array } options.highlightColor - 高亮颜色，目前只支持rgba数组
35+ * @param {number } options.radiusScale - 点放大倍数
36+ * @param {number } options.radiusMinPixels - 半径最小值(像素)
37+ * @param {number } options.radiusMaxPixels - 半径最大值(像素)
38+ * @param {number } options.strokeWidth - 边框大小
39+ * @param {boolean } options.outline - 是否显示边框
40+ *
41+ * @param {function } options.onClick - 点击事件
42+ * @param {function } options.onHover - 悬停事件
43+ */
44+ export class GraphicCanvasRenderer extends ol . Object {
45+ constructor ( layer , options ) {
46+ super ( ) ;
47+ this . layer = layer ;
48+ this . map = layer . map ;
49+ let opt = options || { } ;
50+ CommonUtil . extend ( this , opt ) ;
51+ this . highLightStyle = this . layer . highLightStyle ;
52+
53+ let _pixelRatio = this . pixelRatio ;
54+ let _size = this . size ;
55+
56+ this . mapWidth = _size [ 0 ] * _pixelRatio ;
57+ this . mapHeight = _size [ 1 ] * _pixelRatio ;
58+ this . width = this . map . getSize ( ) [ 0 ] * _pixelRatio ;
59+ this . height = this . map . getSize ( ) [ 1 ] * _pixelRatio ;
60+
61+ this . context = Util . createCanvasContext2D ( this . mapWidth , this . mapHeight ) ;
62+ this . canvas = this . context . canvas ;
63+ }
64+
65+ update ( ) {
66+ this . layer . changed ( ) ;
67+ }
68+
69+ _clearBuffer ( ) {
70+ }
71+
72+
73+ /**
74+ * @private
75+ * @function GraphicCanvasRenderer.prototype.getCanvas
76+ * @description 返回画布
77+ * @return {HTMLCanvasElement } canvas对象
78+ */
79+ getCanvas ( ) {
80+ return this . canvas ;
81+ }
82+
83+ /**
84+ * @private
85+ * @function GraphicCanvasRenderer.prototype.drawGraphics
86+ * @description 绘制点要素
87+ */
88+ drawGraphics ( graphics ) {
89+ this . graphics_ = graphics || [ ] ;
90+
91+ let pixelRatio = this . pixelRatio ;
92+ let mapWidth = this . mapWidth ;
93+ let mapHeight = this . mapHeight ;
94+ let width = this . width ;
95+ let height = this . height ;
96+
97+ let offset = [ ( mapWidth - width ) / 2 / pixelRatio , ( mapHeight - height ) / 2 / pixelRatio ] ;
98+ let vectorContext = ol . render . toContext ( this . context , {
99+ size : [ mapWidth , mapHeight ] ,
100+ pixelRatio : 1
101+ } ) ;
102+
103+ let me = this , layer = me . layer , map = layer . map ;
104+ graphics . map ( function ( graphic ) {
105+ let style = graphic . getStyle ( ) ;
106+ if ( me . selected === graphic ) {
107+ let defaultHighLightStyle = style ;
108+ if ( style instanceof ol . style . Circle ) {
109+ defaultHighLightStyle = new ol . style . Circle ( {
110+ radius : style . getRadius ( ) ,
111+ fill : new ol . style . Fill ( {
112+ color : 'rgba(0, 153, 255, 1)'
113+ } ) ,
114+ stroke : style . getStroke ( ) ,
115+ snapToPixel : style . getSnapToPixel ( )
116+ } ) ;
117+ } else if ( style instanceof ol . style . RegularShape ) {
118+ defaultHighLightStyle = new ol . style . RegularShape ( {
119+ radius : style . getRadius ( ) ,
120+ radius2 : style . getRadius2 ( ) ,
121+ points : style . getPoints ( ) ,
122+ angle : style . getAngle ( ) ,
123+ snapToPixel : style . getSnapToPixel ( ) ,
124+ rotation : style . getRotation ( ) ,
125+ rotateWithView : style . getRotateWithView ( ) ,
126+ fill : new ol . style . Fill ( {
127+ color : 'rgba(0, 153, 255, 1)'
128+ } ) ,
129+ stroke : style . getStroke ( )
130+ } ) ;
131+ }
132+ style = me . highLightStyle || defaultHighLightStyle ;
133+ }
134+ vectorContext . setStyle ( new ol . style . Style ( {
135+ image : style
136+ } ) ) ;
137+ let geometry = graphic . getGeometry ( ) ;
138+ let coordinate = geometry . getCoordinates ( ) ;
139+ let pixelP = map . getPixelFromCoordinate ( coordinate ) ;
140+ let rotation = - map . getView ( ) . getRotation ( ) ;
141+ let center = map . getPixelFromCoordinate ( map . getView ( ) . getCenter ( ) ) ;
142+ let scaledP = scale ( pixelP , center , pixelRatio ) ;
143+ let rotatedP = rotate ( scaledP , rotation , center ) ;
144+ let result = [ rotatedP [ 0 ] + offset [ 0 ] , rotatedP [ 1 ] + offset [ 1 ] ] ;
145+ let pixelGeometry = new ol . geom . Point ( result ) ;
146+ vectorContext . drawGeometry ( pixelGeometry ) ;
147+ return graphic ;
148+ } ) ;
149+ }
150+
151+
152+ }
0 commit comments