openlayer 图形样式编辑

来源：互联网发布：vb延时函数编辑：程序博客网时间：2024/05/21 08:52

1、一个完整的绘制图层应该包含（从里到外）

（1）ol.geom.Geometry：地理空间对象的几何实体

（2）ol.Feature：要素，包含地理空间对象的几何实体

（3）ol.source.Vector：绘制层数据源，包含地图要素（ol.source.Source的子类）

（4）ol.style.Style：样式类

（5）ol.layer.Vector：绘制层，包含绘制层数据源、样式

2、地理空间对象的几何实体（ol.geom.Geometry的孙类）

（1）ol.geom.Circle：圆
（2）ol.geom.LinearRing：线性环
（3）ol.geom.LineString：线
（4）ol.geom.MultiLineString：多线条
（5）ol.geom.MultiPoint：多点
（6）ol.geom.MultiPolygon：多面
（7）ol.geom.Point：点
（8）ol.geom.Polygon：多边形

3、要素参数

（1）geometry：几何图形

（2）name：名称

4、绘制层数据源参数

（1）features：地图要素

5、关于Openlayer的样式，通过ol.style.Style类进行设置，主要参数有

（1）fill：填充样式（ol.styleFill）

（2）image：图像样式（ol.style.image）

（3）stroke：边界线样式（ol.style.stroke）

（4）text：文本样式（ol.style.Text）

6、绘制层参数

（1）source：绘制层数据源

（2）style：样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="libs/ol/ol.css"/>    <script src="libs/ol/ol-debug.js"></script></head><body>    <div id="map"></div></body><script>    //卫星图层    var satlayer = new ol.layer.Tile({        source: new ol.source.XYZ({            title: "卫星图",            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'        })    });    //卫星图标注层    var satannolayer = new ol.layer.Tile({        title: "卫星图标注",        source: new ol.source.XYZ({            url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'        })    });    // 文本样式    var textStyle = new ol.style.Text({        textAlign:'Center',        textBaseline:'Top',        font:'Arial',        text:'你要的不是我',        fill: new ol.style.Fill({color: 'green'}),        stroke: new ol.style.Stroke({            color: 'red',            width:3        }),        offsetX: 0,        offsetY: 1,        rotation: 0    });    //绘制点    //点要素    var pointFeature = new ol.Feature({        geometry: new ol.geom.Point([0, 0]),        name: '点要素'    });    //点要素样式    var pointStyle = new ol.style.Style({        image: new ol.style.Circle({            radius: 10,            fill: new ol.style.Fill({color: 'blue'}),            stroke: new ol.style.Stroke({                color: 'red',                width: 4            })        }),        text: textStyle    });    //点要素绘制图层    var vectorPoints = new ol.layer.Vector({        source: new ol.source.Vector({            features:[pointFeature]        }),        style:pointStyle    });    //绘制线    //线要素    var lineFeature = new ol.Feature({        geometry: new ol.geom.LineString([[1e7,1e6],[1e6,3e6]]),        name: '线要素'    });    //线要素样式    var lineStyle = new ol.style.Style({        stroke: new ol.style.Stroke({            color: 'red',            width: 3        }),        text: textStyle    });    //先要素绘制图层    var vectorLines = new ol.layer.Vector({        source: new ol.source.Vector({            features: [lineFeature]        }),        style:lineStyle    });    //绘制区要素    //区要素    var polygonFeature = new ol.Feature({        geometry: new ol.geom.Polygon(            [[[1e6, -1e6],[1e6, 1e6], [3e6, 1e6], [3e6, -1e6],[1e6, -1e6]]]        ),        name: '区要素'    });    //区要素样式    var polygonStyle = new ol.style.Style({        stroke: new ol.style.Stroke({            color: 'blue',            width: 3        }),        fill: new ol.style.Fill({            color: 'red'        }),        text: textStyle    });    var vectorPolygons = new ol.layer.Vector({        source: new ol.source.Vector({            features: [polygonFeature]        }),        style:polygonStyle    });    //实例化Map对象加载地图    var map = new ol.Map({        layers: [satlayer, satannolayer,vectorPoints, vectorLines, vectorPolygons],        target: 'map',        view:new ol.View({            center: [0, 0],            zoom: 3,            maxZoom: 18,            minZoom: 1        })    });</script></html>

阅读全文

0 0