openlayers-06-坐标添加点、线、面

添加绘制层

//如果想画画，首先需要有一张纸或者画布，地图则需要一个绘制层
//创建一个矢量图层Vector 作为绘制层，ol.source.Vector是用来设置矢量图层数据来源的
var source = new ol.source.Vector();
//创建一个图层 ol.layer.Vector矢量图层类
var vector = new ol.layer.Vector({
    source: source
});
//将绘制层添加到地图容器中
map.addLayer(vector);		

添加点

//创建地图实例时，使用的是 EPSG:4326 投影坐标，以下的方法均采用经纬度坐标坐标点进行实现

//添加点
var point = new ol.Feature({
    geometry: new ol.geom.Point([118.26, 37.35])
});
//设置点1的样式信息(Feature对象 只能 通过setStyle方法设置style属性)
point.setStyle(new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
        color: '#4a8fff',
        width: 2
    }),
    //形状
    image: new ol.style.Circle({
        radius: 17,
        fill: new ol.style.Fill({
            color: '#4a8fff'
        })
    })
}));
//将创建的 点 元素 添加到图层
source.addFeature(point);

添加线

//添加线
//创建一个线
var Line = new ol.Feature({
    geometry: new ol.geom.LineString([[118.25,36.17], [113.56, 35.11]])
});

//设置线的样式
Line.setStyle(new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
        color: 'rgba(74, 143, 255, 0.2)'
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
        color: '#4a8fff',
        width: 5
    }),
    //形状
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#4a8fff'
        })
    })
}));
//将创建的 线 元素 添加到图层
source.addFeature(Line);

添加圆

//添加圆
//创建一个圆
var Circle = new ol.Feature({
    geometry: new ol.geom.Circle([116.53,34.23], 0.1)//0.01表示1公里
});

Circle.setStyle(new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.5)'
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
        color: '#4a8fff',
        width: 3
    }),
    //形状
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#4a8fff'
        })
    })
}));
//将创建的 圆 元素 添加到图层
source.addFeature(Circle);

添加正方形

var CircleForSquare = new ol.geom.Circle([115.63,37.82], 0.1);//创建一个圆
//根据圆获取多边形

var Square = new ol.Feature({
    //fromCircle() 通过圆矢量特性创建一个多边形矢量特性,(圆矢量特性,多边形的边数（默认32）,第一个顶点的多边形角弧度)
    geometry: new ol.geom.Polygon.fromCircle(CircleForSquare, 4, 150)
});

Square.setStyle(new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.8)'
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
        color: 'green',
        width: 2
    }),
    //形状
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#4a8fff'
        })
    })
}));
//将创建的 正方形 元素 添加到图层
source.addFeature(Square);

添加矩形

//添加矩形
//根据范围获取多边形
var Rectangle = new ol.Feature({
    geometry: new ol.geom.Polygon.fromExtent([116.35,36.77,118.89,35.89])
});

Rectangle.setStyle(new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'rgba(123, 237, 159,0.5)'
    }),
    stroke: new ol.style.Stroke({
        color: '#4a8fff',
        width: 4
    }),
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#4a8fff'
        })
    })
}));
//将创建的 矩形 元素 添加到图层
source.addFeature(Rectangle);

添加多边形

//创建一个多变形
var Polygon = new ol.Feature({
    geometry: new ol.geom.Polygon([[[117.56,35.32], [118.25, 36.23], [117.82, 37.25]]])
});
//设置区样式信息
Polygon.setStyle(new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
        color: 'rgba(237, 193, 166, 0.5)'
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
        color: '#e54ced',
        width: 2
    }),
    //形状
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#e54ced'
        })
    })
}));
//将创建的 多变形 元素 添加到图层
source.addFeature(Polygon);

示例代码