OpenLayers教程：图形绘制之设置图形的样式_openlayers控件样式配置项_不睡觉的怪叔叔的博客

相关文章推荐

可爱的小蝌蚪 · 科学生活：感冒药为什么不能随便吃？· 1 年前 ·

另类的手链 · 祝贺！上海建桥学院，潘笑卓获得2021ACA ...· 1 年前 ·

近视的桔子 · 电动摩托车摩托车【行情价格评价正品行货】-京东· 1 年前 ·

骑白马的包子 · 资料：电视剧《越王勾践》剧情简介_影音娱乐_新浪网· 1 年前 ·

谦和的手电筒 · 世卫组织将在印度成立全球传统医学中心· 1 年前 ·

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

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

来看示例：

样式效果：

graphicStyle.html:

<!DOCTYPE html>
<html lang="en">
    <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>
    <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>

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

文章目录1. 写在前面2. ol.style 属性及子类3. ol.style使用栗子 1. 写在前面地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。了解更多矢量图层可以参考： openlayers 6【十三】地图矢量图层 Vector 详解 2. ol.style 属性及子类 1.1 可以配置的选项 * @typedef {{ * geometry: (undefined|

在 openlayers 中画虚线主要是通过设置 Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现规律过来记录一下这个属性。 lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果：再举个例子：lineDash: [20, 10, 40, 20] 代码如下： // 创建线因素 const wireFeature = new Feature({

OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers 的开发旨在进一步利用各种地理信息。它是完全免费的开源JavaScript，根据。 npm install ol 导入您所需的应用程序： import Map from 'ol/Map' ; import View from 'ol/View' ; import TileLayer from 'ol/layer/Tile' ; import XYZ from 'ol/source/XYZ' ; new Map

矢量图层：矢量图层是用来渲染矢量数据的图层类型，在 OpenLayers 里，它是可以定制的，可以控制它的透明度，颜色，以及加载在上面的要素形状等。常用于从数据库中请求数据，接受数据，并将接收的数据解析成图层上的信息。如将鼠标移动到中国，相应的区域会以红色高亮显示出来，高亮便是矢量图层的行为。 1、 HTML文件的进化

问题描述：底图（矢量切片图层的url）不变，但是需要添加上不同的style形成动画轮播的效果。给图层更换样式不难，找到对应的feature，使用feature.setStyle就可以了。但是我在项目中遇到的问题是获取不到feature，或者获取到的feature不可用（我一同事就遇到了使用feature.setStyle不生效的情况，最后也没有找到原因，最后每次更换样式时添加不同样式的图层，然后添加了一堆的layers,导致地图非常庞大）。这篇文章就是讲的就是没有feature的时候如何更换样式 ——l

全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。 06-11