OpenLayers 教程

工作中有时候会遇到图形要素 Feature 高亮或者闪烁的需求，高亮一般是设置差异比较明显的样式，这里介绍一下闪烁的实现方式。

笔者通过改变样式 Style 来实现闪烁功能，这里以面状图形要素为例。

Openlayers 图形要素 Feature 闪烁

<html lang="en">
<head><meta charSet="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>Feature flash</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: 4,maxZoom: 18,minZoom: 1,})});// 创建矢量图层var layer = initVectorLayer();// 创建多边形图形要素var feature = getFeatureByWKT("POLYGON((115.90444759396966 40.272870298116445,116.25601009396966 40.833173032491445,117.13491634396966 40.701337094991445,117.43154720334466 40.184979673116445,116.95913509396966 39.525799985616445,116.13516048459466 39.371991391866445,115.64077571896966 39.910321469991445,115.90444759396966 40.272870298116445))");// 添加图形要素layer.getSource().addFeatures([feature]);// 获取图层范围var extent = layer.getSource().getExtent();// 定位map.getView().fit(extent, {duration: 1,//动画的持续时间,callback: null,});/*** @todo 矢量图层* @returns {VectorLayer}* @constructor*/function initVectorLayer() {//实例化一个矢量图层Vector作为绘制层let source = new ol.source.Vector();//创建一个图层let customVectorLayer = new ol.layer.Vector({source: source,zIndex: 2,//设置样式style: new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'gray',width: 2,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(0, 0, 0, 0.3)',}),}),});//将绘制层添加到地图容器中map.addLayer(customVectorLayer);return customVectorLayer;}/*** @todo wkt格式数据转化成图形对象* @param {string} wkt   "POINT(112.7197265625,39.18164062499999)" 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKT(wkt, sourceCode, targetCode) {try {let view = map.getView();if (!wkt) {return null;}let format = new ol.format.WKT();let feature;feature = format.readFeature(wkt, {featureProjection: targetCode || view.getProjection(),dataProjection: sourceCode || view.getProjection(),});return feature;} catch (e) {console.log(e);return null;}}let interval;// 闪烁方法function flash(speed) {var flashStyle1 = new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'red',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(255, 255, 0, 0.3)',}),})var flashStyle2 = new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'blue',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(0, 0, 255, 0.3)',}),})//停止闪烁的标志let flag = 0;interval && clearInterval(interval);//闪烁方法对象interval = setInterval(function () {//闪烁次数if (flag <= 3 * 200) {if (flag % 2 == 0) {feature.setStyle(flashStyle1);} else {feature.setStyle(flashStyle2);}flag++;} else {//停止闪烁,还原样式,删除间隔对象feature.setStyle(stylePolygon);window.clearInterval(interval);}//间隔时间}, (speed) * 100);}
</script>
<button id="flash1" onclick="flash(2)">闪烁慢</button>
<button id="flash2" onclick="flash(0.8)">闪烁快</button>
</body>
</html>

在线示例

Openlayers 图形要素 Feature 闪烁：Openlayers feature flash

Openlayers 图形要素 Feature 闪烁相关推荐

Openlayers 图形要素 Feature 移动和编辑
Openlayers 图形要素 Feature 移动和编辑 OpenLayers 教程 Openlayers 图形要素 Feature 移动和编辑在线示例 OpenLayers 教程 Openlay ...
lisp读写cass属性_130507Auto Lisp在CASS图形要素规范化中的应用
Auto Lisp 在 CASS 图形要素规范化中的应用黄太山 1 , 2 ( 1. 安徽理工大学安徽淮南 232001 : 2 :福建省国土测绘院福建厦门 361012 ) 摘要: CAS ...
openlayers给要素加文字注记
在项目中,需要给每个行政市区的中心加上该行政区的name,我之前的实现方法都是用一个新的图层,专门来加文字注记,但是有一点,需要知道这个图形的中心位置,如果是规则的图形的话,可以很方便的找出中心位置, ...
vue+openlayers图形交互，实现多边形绘制、编辑和保存
知识点: 1.绘制多边形,实例化ol.interaction.Draw对象 draw_inter = new ol.interaction.Draw({source: source_draw,//矢量 ...
Openlayers中将某个feature置于最上层
场景 Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度): Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片 ...
Openlayers 圆的操作
Openlayers 圆的操作 OpenLayers 教程 Openlayers 圆的操作在线示例 OpenLayers 教程最开始接触地图的时候,对圆的理解不正确,以为也是面状的:实际上 Ope ...
Openlayers 各种定位：定位点、线、面以及图层等
Openlayers 各种定位 OpenLayers 教程 Openlayers 定位功能在线示例 OpenLayers 教程地图定位是非常常用的功能,定位实现方式也是各种各样,而定位到线和面状图 ...
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例 ol-ext 简介版本说明打包后体积集成方式在线示例最近打算重新封装一下 Openlayers,方便前端人员使用, ...
openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

Openlayers 图形要素 Feature 闪烁

Openlayers 图形要素 Feature 闪烁

OpenLayers 教程

Openlayers 图形要素 Feature 闪烁

在线示例

Openlayers 图形要素 Feature 闪烁相关推荐

最新文章

热门文章