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