oplayers中点线面基本样式的写法

1.点

（1）以一个圆来表示点

 new Style({

              image: new CircleStyle({

                radius: 5,//半径

                fill: //填充的颜色

　　　　new Fill({

                color: 'rgba(0, 0, 255, 0.1)'

                //color: feature.values_.fill,

              }),

               stroke: new Stroke({color: 'red',  1}),//外围线的颜色

              })

            })

（2）以一个图标来表示点

new Style({

          image: new Icon({

            src: '../../assets/images/map/juminqu.svg',

            scale: 0.08

          })

        })

 

2.线

（1）基本的线样式

 new Style({

                      stroke: new Stroke({

                        color: 'rgba(255,0,0, 1)',//线的颜色

　　　　　　 lineDash: [4],//线的颜色设置为虚线，虚线间隔为4

                         4//线的宽度

                      })

                    })

（2）末尾以箭头形式表示的线

 style:

          function (feature) {

            var geometry = feature.getGeometry();

            var styles = [

              new Style({

                stroke: new Stroke({

                  color: 'rgb(160,82,45)',

                  lineDash: [8],

                   5,

                }),

              })];

            let length = geometry.flatCoordinates.length;

            var dx = geometry.flatCoordinates[length - 2] - geometry.flatCoordinates[length - 4];

            var dy = geometry.flatCoordinates[length - 1] - geometry.flatCoordinates[length - 3];

            var rotation = Math.atan2(dy, dx);

            styles.push(

              new Style({

                geometry: new Point([geometry.flatCoordinates[length - 2], geometry.flatCoordinates[length - 1]]),

                image: new Icon({

                  src: '../../../../../assets/images/map/arrow.svg',

                  anchor: [0.75, 0.5],

                  rotateWithView: true,

                  rotation: -rotation,

                  scale: 0.12

                }),

              })

            );

            return styles;

          }

3.面

 return new Style({

                      stroke: new Stroke({//面的边界线的样式

                        color: 'yellow',

                        lineDash: [4],

                         3,

                      }),

                      fill: new Fill({//面的填充

                        color: 'rgba(0, 0, 255, 0.1)',

                      }),

                    })

4.文字注记

 style: function (feature) {

            return new Style({

              text: new TextStyle({

                text: `${feature.waterLength}`,//文字内容

                fill: new Fill({//文字颜色

                  color: 'rgba(0, 0, 0)'

                }),

                offsetX: 0,//文字注记偏移位置

                offsetY: 18//文字注记偏移位置

                // backgroundStroke: new Stroke({//背景框样式

                //   color: 'rgba(255,0,0, 0.7)',

                //    1

                // })

              })

            })

          }