技术标签： openlayers闪烁 openlayers教程 Openlayers 学习教程 闪烁面 feature闪烁
工作中有时候会遇到图形要素 Feature 高亮或者闪烁的需求，高亮一般是设置差异比较明显的样式，这里介绍一下闪烁的实现方式。
笔者通过改变样式 Style 来实现闪烁功能，这里以面状图形要素为例。
<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
转载自 http://hi.baidu.com/drunkdream/item/ffb74fb81ff57af063388ed41. 安装VS2010,WDK7.60（GRMWDK_EN_7600_1）2. 新建VC 控制台项目(选择为空项目)3. 新建项目配置“driver” ，点击下拉按钮-点击（配置管理器）输入名称（dr
F5 配置手册2016 年12 月目录1. 设备登录31.1 图形化界面31.2 命令行界面32. 基础网络配置32.1 创建vlan 32.2 创建self ip42.3 创建静态路由43. 应用负载配置63.1 pool 配置63.2 Virtual Server 配置74. 双机84.1 双机同步配置84.2 主备机状态切换91. 设备登录1.1 图形化界面通...
当某个应用获得用户的认可后，会不断的发展。发展体现在两方面，一是系统多元化，二是系统访问量，这两方面也会带来一些问题。 第一个发展带来的问题是，当要修改某部分时，所有系统都要修改。解决方法：可采用对各个系统的共用逻辑的部分进行抽象的方法，形成多个按领域划分的共用业务逻辑系统。 第二个系统访问量带来的问题，通常采用拆分系统的方法来解决。------- 在构建了共用业务...
http://hihocoder.com/problemset/problem/1466建出A串和B串的两个后缀自动机对后缀自动机的每个状态求出sg值。求出B串的\(sum(x)\)，表示B有多少子串的sg值等于x（用拓扑序求）。对A串的每个状态，求出B串有多少子串的sg值不等于这个状态的sg值，再按拓扑序递推一下。接下来就类似SPOJ 7258这道题了从A串开始走，按字典序...
本文转自barry的博客(http://blog.chinaunix.net/space.php?uid=8527621&do=blog&id=2030165)，内容有所改进，修改了部分bug.TABLES: sscrfields.DATA: serverfile(100) , file(80), router(120).* 定义屏幕字段内表
1：直接使用HTML代码写<select name="year"> <option value="2011">2010</option> <option value="2012">2011</option> <option value="2013">2012</option...
我们如何设置字节输入流、字节输出流的编码和解码格式？在字节输入流（InputStream）、字节输出流（OutputStream）中，并没有提供设置编码和解码格式的方法。InputStream的API文档如下：因为字节输入输出流并没有提供相应的方法，让我们对编码和解码格式进行设置。那么我们就要使用转换流，来对字节流的编码进行设置。何为转换流？通过API...
FAQ1.How can i get a sample ?You need place sample order to us.We will arrange the sample production for you.2.Could you do design for us?Yes, we can do artwork including printing, logo etc. for you, ...
在第二章的程序清单2-1中，第一次出现了一个.awk文件，一开始对这个文件一头雾水，后来百度了一下，awk是用于在linux/unix下对文本和数据进行处理。它处理的数据可以来自标准输入、一个或多个文件，或其它命令的输出。关于awk的更多细节，可以查阅（http://man.lupaworld.com/content/manage/ringkee/awk.htm）。知道了这一点，剩下的
ubuntu wifi适配器找不到首先在终端输入 nmcil device 命令，查看是否托管如果没有，编辑NetworkManager.conf ，将其中的managed设为true重启network-manger服务
利用dbstart和dbshut在开关机时自动启动和关闭db使用chkconfig增加服务1、编辑/etc/oratab文件TEST:/u01/app/oracle/product/9.2.0:Y (把原来的N改为Y)2...
入门案例IoCIoC：Inverse of Control 反转控制的概念，就是将原本在程序中手动创建HelloService对象的控制权，交由Spring框架管理，简单说，就是创建HelloService对象控制权被反转到了Spring框架1、导入jar包4 + 1 ： 4个核心（beans、core、context、expression） + 1个依赖（commons-...