openlayers二：添加矢量图形文字

openlayers可方便的在地图上添加圆、多边形、文字等矢量内容，修改这些矢量内容的样式也很简单。

首先需要添加一个向量图层：

     initVectorLayer: function () {
         this.vectorSource = new ol.source.Vector({
             wrapX: false //不在地图上重复
         });
         this.vectorLayer = new ol.layer.Vector({
             source: this.vectorSource,
             style: new ol.style.Style({ //默认样式
                 fill: new ol.style.Fill({
                     color: 'rgba(255, 204, 51, 0.5)'
                 }),
                 stroke: new ol.style.Stroke({
                     color: '#ffcc33',
                     width: 0
                 }),
                 image: new ol.style.Circle({
                     radius: 7,
                     fill: new ol.style.Fill({
                         color: '#ffcc33'
                     })
                 })
             })
         });
         this.map.addLayer(this.vectorLayer);
     },

默认情况下，地图是横向无限重复，而添加在上面的向量默认也是包裹所有横向地图的，如何所示：

如果想让矢量元素不包裹所有横向地图，可以设置 wrapX: false 

添加圆：

     addCircle: function (lonlat, radius, colorName) {
         var circle = new ol.geom.Circle(ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857'), radius);
         var circleFeature = new ol.Feature(circle);
         circleFeature.setStyle(
             new ol.style.Style({
                 fill: new ol.style.Fill({
                     color: '#0a3399CC'
                 }),
                 text: new ol.style.Text({
                     text: '圆',
                     scale: 1.3,
                     fill: new ol.style.Fill({
                       color: '#000000'
                     }),
                     stroke: new ol.style.Stroke({
                       color: '#FFFF99',
                       width: 3.5
                     })
                 })
             })
         );
         this.vectorSource.addFeature(circleFeature);
     },

添加多边形：

 addPolygon: function (values) {
         var polygon = new ol.geom.Polygon(values);
         polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
         var feature = new ol.Feature(polygon);
         feature.setStyle(
             new ol.style.Style({
                 fill: new ol.style.Fill({
                     color: 'rgba(255, 204, 51, 0.5)'
                 }),
                 text: new ol.style.Text({
                     text: '多边形',
                     scale: 1.3,
                     fill: new ol.style.Fill({
                       color: '#000000'
                     }),
                     stroke: new ol.style.Stroke({
                       color: '#FFFF99',
                       width: 3.5
                     })
                 })
             })
         );
         this.vectorSource.addFeature(feature);
     },

整体效果：

整体代码：
链接: https://pan.baidu.com/s/1nFf59C4LDmYztDrcq7Hnxg 密码: 2eu2