OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）

一、示例简介

二、代码详解

三、总结

一、示例简介

为每一个线串（LineString）的子线段绘制箭头。

二、代码详解

<!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>LineString Arrows</title><link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /><script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body><div id="map"></div><script>// Open Street Map地图var raster = new ol.layer.Tile({    source: new ol.source.OSM()});// 用于绘制线串的矢量图层源var source = new ol.source.Vector();// 用于绘制线串的矢量图层var vector = new ol.layer.Vector({source: source,style: styleFunction});var map = new ol.Map({target: 'map',layers: [raster, vector],view: new ol.View({center: [-11000000, 4600000],zoom: 4})});// 添加一个绘制线串的控件map.addInteraction(new ol.interaction.Draw({source: source,type: 'LineString'}));// 用于设置线串所在的矢量图层样式的函数var styleFunction = function(feature){var geometry = feature.getGeometry();var styles = [new ol.style.Style({                    // 线串的样式stroke: new ol.style.Stroke({color: '#FC3',width: 2})})];// 对线段的每一个子线段都设置箭头样式geometry.forEachSegment(function(start, end){var dx = end[0] - start[0];var dy = end[1] - start[1];var rotation = Math.atan2(dy, dx);      // 获取子线段的角度（弧度）//arrowsstyles.push(new ol.style.Style({        // 与线串的各个子线段对应的样式geometry: new ol.geom.Point(end),image: new ol.style.Icon({src: 'data/arrow.png',anchor: [0.75, 0.5],        // 图标锚点rotateWithView: true,       // 与地图视图一起旋转// 设置子线段箭头图标样式的角度rotation: rotation         // 因为角度以顺时针旋转为正值，所以前面添加负号})}));});return styles;};</script>
</body>
</html>

三、总结

这个示例不太难。。不总结了

OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）相关推荐

OpenLayers官方示例详解七之图层的最小、最大分辨率（Layer Min/Max Resolution）
目录一.示例简介二.代码详解一.示例简介这个示例加载了一个MapBox的瓦片图层和一个Open Street Map的瓦片图层,同时使用最小.最大分辨率限制图层加载的比例级别. 使用鼠标放大两 ...
Unity之表皮着色器官方示例详解
下面是一些表面着色器(Surface Shaders)的示例.下面的示例都是使用的内置光照模式(lighting models),关于如何实现自定义光照模式可以参考表面着色器光照范例(Surface ...
php reactphp wss_workerman的基本用法（示例详解）
workerman是什么? Workerman是一个异步事件驱动的PHP框架,具有高性能,可轻松构建快速,可扩展的网络应用程序.支持HTTP,Websocket,SSL和其他自定义协议.支持libev ...
java网络编程阻塞_Java网络编程由浅入深三一文了解非阻塞通信的图文代码示例详解...
本文详细介绍组成非阻塞通信的几大类:Buffer.Channel.Selector.SelectionKey 非阻塞通信的流程ServerSocketChannel通过open方法获取ServerSo ...
mysql讲事物写到数据库_CookBook/1-MySQL数据库读写锁示例详解、事务隔离级别示例详解.md at master · Byron4j/CookBook · GitHub...
MySQL数据库读写锁示例详解.事务隔离级别示例详解锁性能分:乐观(比如使用version字段比对,无需等待).悲观(需要等待其他事务) 乐观锁,如它的名字那样,总是认为别人不会去修改,只有在提交 ...
java reflections_Java反射框架Reflections示例详解
MAVEN 坐标 org.reflections reflections 0.9.10 Reflections 的作用 Reflections通过扫描classpath,索引元数据,并且允许在运行时查 ...
史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
python中3or5什么意思_示例详解Python3 or Python2 两者之间的差异
每门编程语言在发布更新之后,主要版本之间都会发生很大的变化. 在本文中,Vinodh Kumar 通过示例解释了 Python 2 和 Python 3 之间的一些重大差异,以帮助说明语言的变化. 本 ...
python的用途实例-python assert的用处示例详解
使用assert断言是学习python一个非常好的习惯,python assert 断言句语格式及用法很简单.在没完善一个程序之前,我们不知道程序在哪里会出错,与其让它在运行最崩溃,不如在出现错误条件 ...

OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）

一、示例简介

二、代码详解

三、总结

OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）相关推荐

最新文章

热门文章