OpenLayers教程：图形绘制之设置图形的样式

最新推荐文章于 2024-07-17 19:00:30 发布

不睡觉的怪叔叔

最新推荐文章于 2024-07-17 19:00:30 发布

阅读量6.3k

点赞数 3

分类专栏：开源GIS

本文链接：https://blog.csdn.net/qq_35732147/article/details/97764760

版权

开源GIS 专栏收录该内容

80 篇文章 354 订阅

订阅专栏

OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。

OpenLayers的ol.style.Style类用于设置样式，它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式，另外ol.style.Text类用于设置要素注记。

来看示例：

样式效果：

graphicStyle.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置几何图形样式</title>
    <link rel="stylesheet" href="../v5.3.0/css/ol.css" />
    <script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <label>Shape type &nbsp;</label>
    <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="Square">Square</option>
        <option value="Box">Box</option>
        <option value="None">None</option>
    </select>

    <script>
        let vectorSource = new ol.source.Vector();
        let vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            // 设置图层样式
            style: new ol.style.Style({
                // 将点设置成圆形样式
                image: new ol.style.Circle({
                    // 点的颜色
                    fill: new ol.style.Fill({
                        color: '#F00'
                    }),
                    // 圆形半径
                    radius: 5
                }),
                // 线样式
                stroke: new ol.style.Stroke({
                    color: '#0F0',
                    lineCap: 'round',       // 设置线的两端为圆头
                    width: 5                
                }),
                // 填充样式
                fill: new ol.style.Fill({
                    color: '#00F'
                })
            })
        });

        let map = new ol.Map({
            target: 'map',                          
            layers: [
                new ol.layer.Tile({                 // 瓦片图层
                    source: new ol.source.OSM()     // OpenStreetMap数据源
                }),
                vectorLayer
            ],
            view: new ol.View({                     // 地图视图
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 0
            })
        });
        let typeSelect = document.getElementById('type');
        let draw;
        function addInteraction(){
            let type = typeSelect.value;
            if(type !== 'None'){
                let geometryFunction;
                switch(type){   
                    case "Square": 
                        type = 'Circle';
                        // 生成规则的四边形的图形函数
                        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                        break;
                    case 'Box':
                        type = 'Circle';
                        // 生成盒形状的图形函数
                        geometryFunction = ol.interaction.Draw.createBox();
                        break;
                    default:break;
                }
                
                // 初始化Draw绘图控件
                console.log(type);
                draw = new ol.interaction.Draw({
                    source: vectorSource,
                    type: type,
                    geometryFunction: geometryFunction
                });
                // 将Draw绘图控件加入Map对象
                map.addInteraction(draw);
            }
        }

        typeSelect.addEventListener('change', () => {
            // 移除Draw绘图控件
            map.removeInteraction(draw);
            addInteraction();
        });

        addInteraction();
    </script>
</body>
</html>

不睡觉的怪叔叔

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers教程：图形绘制之设置图形的样式

OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。 OpenLayers的ol.style.Style类用于设置样式，它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式，另外ol.style.Text类用于设置要素注...
复制链接

扫一扫

专栏目录