Openlayer3用canvas绘制圆角矩形标注

一、最终结果图下图所示

圆角矩形效果图

二、用canvas绘制圆角矩形
代码如下：

var canvas=document.getElementsByTagName("canvas")[0];
var context=canvas.getContext("2d");
context.strokeStyle="rgba(0,255,0,0.5)"//矩形边框颜色
context.beginPath();//开始绘制
context.lineTo(200,100);//移动到某个点
context.lineTo(300,100);
context.lineTo(300,200);
context.lineTo(200,200);
context.closePath();
context.stroke();
context.strokeStyle="rgba(255,255,0,1)"
context.beginPath();
context.moveTo(218,100);
context.arcTo(300,100,300,200,18);
context.arcTo(300,200,200,200,18);
context.arcTo(200,200,200,100,18);
context.arcTo(200,100,300,100,18);
context.closePath();
context.stroke();

效果如下：

黄色为圆角矩形，绿色为原始矩形

总结：绘制圆角矩形的arcTo方法参数为x1坐标y1坐标，x2坐标y2坐标；第五个参数为圆角半径。圆角的绘制其实是
三、canvas和Ol3结合绘制圆角矩形标注

           var layer = new ol.layer.Tile({
                   source: new ol.source.XYZ({
                   url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'
                     })
                });
   var vector=new ol.layer.Vector({
        source:new ol.source.Vector()
           });

    var view = new ol.View({
        center: new ol.proj.fromLonLat([120, 30]),
        zoom: 7
    });
    var map = new ol.Map({
        layers: [layer,vector],
        view: view,
        target: "map",
        logo: false
    });

    var feature=new ol.Feature({
        geometry:new ol.geom.Point(new ol.proj.fromLonLat([120,30]))
        });
      //绘制圆角矩形
   var roundRect = function (x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        this.beginPath();
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        this.closePath();
        this.fillStyle = "rgba(108,159,67,1)";
        this.fill();
        return this;
    }
    var canvas = document.createElement("canvas");//创建一个canvas标签
    canvas.width = 75;
    canvas.height = 20;
    var context = canvas.getContext("2d");
    context.roundRect = roundRect;
    context.roundRect(0, 0, 75, 20, 8);
    var style = new ol.style.Style({
        image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height]
        }),
        text: new ol.style.Text({
            text: "我是圆角矩形",
            font: "12px 微软雅黑",
            fill: new ol.style.Fill({ color: "#ffffff" })
        })
    });
    feature.setStyle(style);
    vector.getSource().addFeature(feature);

四、根据不同长度的中文，创建圆角矩形

  function createRectStyle(text) {
        var canvas, context, length;
        canvas = document.createElement("canvas");
        context = canvas.getContext("2d");
        length = text.length;
        canvas.width = length * 13;
        canvas.height = 20;
        var x = 0, y = 0, w = canvas.width, h = canvas.height, r = 8;
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        context.beginPath();
        context.moveTo(x + r, y);
        context.arcTo(x + w, y, x + w, y + h, r);
        context.arcTo(x + w, y + h, x, y + h, r);
        context.arcTo(x, y + h, x, y, r);
        context.arcTo(x, y, x + w, y, r);
        context.closePath();
        context.fillStyle = "rgba(108,159,67,1)";
        context.fill();
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                img: canvas,
                imgSize: [w, h]
            }),
            text: new ol.style.Text({
                text: text,
                font: "12px 微软雅黑",
                fill: new ol.style.Fill({ color: "#ffffff" })
            })
        });
        return style;
    }

使用方法：

           var feature2 = new ol.Feature({
                 geometry: new ol.geom.Point(new ol.proj.fromLonLat([120.1, 30.1]))
             });
         feature.setStyle(createRectStyle("少的"));

使用如上方法自动创建不同长度的圆角矩形