openlayers4 自定义矢量图层的样式

最新推荐文章于 2024-09-14 11:07:52 发布
最新推荐文章于 2024-09-14 11:07:52 发布
阅读量6.8k 收藏 23
点赞数 4
分类专栏： Openlayers4笔记 openlayers开发 文章标签： openlayers style 样式 地图 矢量图层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012413551/article/details/87303530
版权

先看一个简单加载GeoJSON格式的矢量数据的方法。例如，现有一份全国各城市的点数据，要求将其以点形式展示在地图上。

文章目录

var mystyle = new ol.style.Style({
    	image: new ol.style.Circle({
    		radius: 10,
 		    fill: new ol.style.Fill({
            	color: '#ffff00'
        	})
    	})
    });
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    	url: 'src/data/city.geojson',
    	format: new ol.format.GeoJSON()
    }),
    style: mystyle
});
var view = new ol.View({
    center: [114,34],
    zoom: 5,
    projection: 'EPSG:4326'
});

var controls = new ol.control.defaults();

var map = new ol.Map({
    layers:[vectorLayer],
    view: view,
    controls: controls,
    target: 'map'
})

上面代码中，第1句定义了一个ol.style.Style对象，然后在第2句定义了一个ol.layer.Vector（矢量图层）对象，并将第1句定义的style样式应用到图层上。style样式的应用非常灵活，为了加深记忆及方便使用，下面先简单记录下其用法。

点样式

形状-ol.style.Circle（圆点）

在地图上展示一些圆点，用 #ffff00 颜色进行填充圆，用 #fff 来描边。样式代码如下：

var style = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
            color: '#ffff00',
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 1
        })
    })
});

点样式

图标-ol.style.Icon

var style = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 1],		
        src: '/icon/site1.png',//图标路径
        rotation: 0			//旋转角度
    })
});

图标

标注样式 - ol.style.Text

var style = new ol.style.Text({
    font: '12px serif',	//字体及字体大小
    text: '西安',		//标注文字
    fill: new ol.style.Fill({
        color: '#000'
    })

标注

线样式 - ol.style.Stroke

 var style = new ol.style.Style({
     stroke: new ol.style.Stroke({
         color: '#000000',
         width: 2
     })
 })

在这里插入图片描述

面样式 - ol.style.Fill

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#fff',
        width: 2
    }),
    fill: new ol.style.Fill({
        color:[38,155,0,0.3]	//使用了一个数组，[r,g,b,a]
    })
})

在这里插入图片描述

将要素的属性值应用到样式

ol.layer.Vector（矢量图层）对象的style属性，可以接受一个ol.style.Style对象，也可以接受一个ol.styleFunction函数对象。ol.styleFunction可以将矢量图层的feature作为参数传入函数内部，从而可以获得feature上的属性值并应用到样式中。

下面代码，会在地图上绘制一些带文字标注的图标。

function styleFunc(feature){
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: '#ffff00',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        }),
        text: new ol.style.Text({
            font: '12px serif',
            text: feature.get('AQI').toString(),
            fill: new ol.style.Fill({
                color: '#000'
            })
        })
    });
    return style;
}

完整测试代码如下

js代码：

var baseLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
});
var view = new ol.View({
    center: [114,34],
    zoom: 5,
    projection: 'EPSG:4326'
});

var controls = new ol.control.defaults();

var map = new ol.Map({
    layers:[baseLayer,vectorLayer],
    view: view,
    controls: controls,
    target: 'map'
})

/**
 * 点样式
 */
function showPoint(){
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: '#ffff00',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    });
    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 标注样式
 */
function showPointLabel(){
    function styleFunc(feature){
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: '#ffff00',
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 1
                })
            }),
            text: new ol.style.Text({
                font: '12px serif',
                text: feature.get('AQI').toString(),
                fill: new ol.style.Fill({
                    color: '#000'
                })
            })
        });
        return style;
    }

    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 图标样式
 */
function showIcon(){
    //图标列表
    var icons = [];
    for(var i = 1; i < 13;i++){
        icons.push('/icon/level' + i.toString() + '.png');
    }
    function styleFunc(feature){
        var power = feature.get('windpower');
        if(power === 0 || power >12){
            return null;
        }
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: icons[power - 1],//不同风力图标
                rotation: feature.get('winddirection')
            })
        });
        return style;
    }

    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 边线样式
 */
function showStroke(){
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#000000',
            width: 2
        })
    })

    $.getJSON('/data/r_china.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 填充样式及边线
 */
function showFill(){
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
        }),
        fill: new ol.style.Fill({
            color:[38,155,0,0.3]
        })
    })

    $.getJSON('/data/r_china.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

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">
    <link rel="stylesheet" href="/js/source/ol4/v4.6.5-dist/ol.css" />
    <title>Document</title>  
    <style>
        html,body,#map{
            width: 100%;
            height: 100%;
            border: 0pc;
            background-color: black
        }
    </style>
    <script src="/js/source/jquery/jquery-3.3.1.min.js"></script>
    <script src="/js/source/ol4/v4.6.5-dist/ol.js"></script>
</head>
<body>
    <div>
        <button id = "point" onclick="showPoint()">点</button>
        <button id = "label" onclick="showPointLabel()">标注</button>
        <button id = "label" onclick="showIcon()">图标</button>
        <button id = "line" onclick="showStroke()">线</button>
        <button id = "polygon" onclick="showFill()">面</button>
    </div>
    <div id="map"></div>
    <script src="/js/stydy/ts-style.js"></script>
</body>
</html>
此爱如少年
关注
专栏目录
Openlayers 教程 13 - 图层对象的常用操作（添加移除、显示隐藏、层级调整、定位等）
linzi19900517的博客
04-15 2738
在 Openlayers 中，图层是非常基础的对象，这里汇总介绍一下图层常用的操作，主要包括：添加移除、显示隐藏、层级调整、定位。
6. OpenLayers 实现矢量元素选择功能 (结合Vue 详细教程)
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-24 871
本教程详细介绍了如何在Vue和OpenLayers项目中实现矢量要素的选择功能。我们将向您展示如何在已有的Vue和OpenLayers项目中添加选择交互，并自定义选中要素的样式。
openlayers 矢量图层注记
01-03
openlayers 中利用矢量图层添加注记的示例。
Openlayers学习笔记——Vector Layer Style
隔壁老瓦的专栏
04-13 1790
我们了解到Vector layer能够完成很多工作，这节将更深入的探讨在矢量图层上怎样定制要素的外观，定制矢量要素的外观工作与control的外观定制非常相似，但是在矢量要素外观的定制上采用Style和StyleMap对象来代替CSS，由于矢量图层不使用栅格图像，我们可以用这种方式定制矢量图层。指定SVG（或者VML或Canvas）元素的样式。 我们很容易通过修改默认样式文件来改变...
:style 静态、动态样式绑定，动态修改伪元素样式
最新发布
lurenlinshen的博客
09-14 839
动态修改伪元素样式；绑定内联样式；:style动态绑定
openlayer style text
weixin_41792006的博客
04-20 1507
options 1. font （string） 字体 字体样式作为CSS的“字体”值，请参见：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/Font。默认值为“10px无衬线” 2.maxAngle （number） 最大角度 当 文本放置 设置为“line...
OpenLayers WebGL瓦片图层和样式
GIS小虫的博客
03-24 3806
OpenLayers WebGL瓦片图层简介和样式
openlayers修改样式,OpenLayers修改要素样式而不会覆盖交互样式
weixin_28716769的博客
12-22 2165
Is there any way to modify a single feature's style without modifying default style on select interaction?Here is a simple piece of code showing my problem and a jsfiddleMinimal html :And a simple scr...
OpenLayers3教程：矢量图层样式与配置
在OpenLayers 3中，矢量图层样式是关键的组成部分，它们允许开发者自定义地图上矢量要素的外观。矢量图层可以由一个`ol.style.Style`对象、一组`ol.style.Style`对象或者返回这些对象的方法来配置。 **基础样式配置...
OpenLayers3实现图层控件功能
10-14
- **加载图层**：首先，我们需要加载多个图层，例如OSM瓦片图层、MapQuest影像图层以及JSON和KML格式的矢量图层。这可以通过创建`ol.layer.Tile`和`ol.layer.Vector`对象并将其添加到地图实例的`layers`集合中来...
OpenLayers 3教程：设置矢量图层样式
"这篇资源是关于微前端架构体系的一个示例，主要讲解如何设置OpenLayers 3中的矢量图层样式。示例中展示了如何加载KML格式的矢量数据来呈现建筑平面图，并提供了相应的HTML和JavaScript代码片段。此外，资源还提及了...
OpenLayers3入门：矢量图层格式与样式解析
在矢量图层格式部分，讨论了如何处理不同类型的矢量数据格式，而矢量图层样式则涉及如何定制化地图元素的外观。" OpenLayers3是一个强大的开源JavaScript库，用于构建基于Web的GIS应用。在"矢量图层格式"这一部分，...
openlayers 实现鼠标移动要矢量要素上高亮显示
gis_sss的博客
09-06 6553
一、鼠标移动到矢量要素上实现高亮显示的思路 （1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。 （2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
openlayer矢量查询并弹出框显示-基于overlay
08-26 1901
效果图： 代码实现： <template> <div class="_leftTop"> <div id="map"></div> <div id="popup" class="olPopup"> <div style="text-align: right;"> <span @click="overlayer.setPosition(undefined)" class="p
Vue下OpenLayers中Style-Icon的图片路径
Moon Star
10-23 2388
OpenLayers加载图片的方式
OpenLayers实操Vue3（点线面文字标注热力图聚合点地图打印等等...）
ThreeKims的博客
04-01 2114
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，主要还是以面向对象进行开发的。
OpenLayers学习——Style及StyleMap（二）
GIS平台设计与开发
05-21 6263
参考官网例子，做一个随比例一起缩放的矢量符号的
openlayers 地图上加图标_openlayers地图添加标志物
weixin_29658015的博客
01-28 1195
openlayers是最好的开源地图引擎，我们开发主要在地图上标记兴趣点，画区域，任意图形，运动轨迹等等。在ol地图上画东西其实非常简单，只需要按以下步骤执行Pointpoint是一个ol坐标点，例如根据经纬度来转为ol对应的坐标var lonLat = [114.158648, 22.284701];var transPoint = ol.proj.fromLonLat(lonLat);Feat...
在OpenLayer3中添加图标有两种方式
热门推荐
07-20 1万+
  在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。 下面就是用这种方式加载一个锚点的示例：   &lt;div id="map" style="width: 100%"&gt;&lt;/div&...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值