OpenLayers 绘制带箭头的LineString
<!--********************************************************************
* Copyright 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiledMapLayer3857"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
var map,
url =
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
'/iserver/services/map-china400/rest/maps/China';
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
// ol.supermap.initMap(url, {
// mapOptions: {
// controls: ol.control
// .defaults({ attributionOptions: { collapsed: false } })
// .extend([new ol.supermap.control.Logo()])
// }
// });
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
3.调用 ol.Map 创建地图
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
*/
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
const mapObj = serviceResult.result;
window.maps = map = new ol.Map({
target: 'map',
controls: ol.control
.defaults({ attributionOptions: { collapsed: false } })
.extend([new ol.supermap.control.Logo()]),
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
//
// #################################################################################################
// 从这里 往上的 都是
// https://iclient.supermap.io/examples/openlayers/editor.html#01_tiledMapLayer3857
// 的原本内容
// 往下的，才是绘制箭头
// #################################################################################################
//
const coords = [[-1986139.7429620195, 78271.51696402021], [4070118.882129064, -596820.3168506557], [821850.928122214, 870770.6262247274], [-3492866.4445194136, 1399103.365731866]] // 该地图所用为3857底图，坐标值不是经纬度
const sourceVector = new ol.source.Vector()
const feature = new ol.Feature({
geometry: new ol.geom.LineString([coords[0], coords[1], coords[2], coords[3]])
})
sourceVector.addFeature(feature)
const styleFunction = function (feature) {
const geometry = feature.getGeometry();
const styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2,
}),
}),
];
geometry.forEachSegment(function (start, end) {
const dx = end[0] - start[0];
const dy = end[1] - start[1];
const rotation = Math.atan2(dy, dx);
const coord = [start[0] + dx/2, start[1] + dy / 2]
// arrows
styles.push(
new ol.style.Style({
geometry: new ol.geom.Point(coord),
image: new ol.style.Icon({
src: 'https://bpic.51yuansu.com/pic2/cover/00/48/42/5815eb37ed3d8_610.jpg',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 0.03
}),
})
);
});
return styles;
};
//#######################################################################################//
//# !!!IMPORTANT:在layer初始化时传入了style配置，设置的风格函数，会返回一个style #//
//#######################################################################################//
const layerVector = new ol.layer.Vector({
source: sourceVector,
style: styleFunction,// !!!IMPORTANT
})
map.addLayer(layerVector);
});
</script>
</body>
</html>
RESULT:
Reference:
OpenLayers 绘制带箭头的LineString的更多相关文章
- OpenLayer——绘制带箭头的线
绘制带箭头的线,计算相对复杂,多少是有点影响性能了.更简单的做法:初始.目标点用不同的点进行强调即可. <!DOCTYPE html> <html lang="en&quo ...
- 如何在 Matlab 中绘制带箭头的坐标系
如何在 Matlab 中绘制带箭头的坐标系 如何在 Matlab 中绘制带箭头的坐标系 实现原理 演示效果 完整代码 实现原理 使用 matlab 的绘制函数时,默认设置为一个方框形的坐标系, 图1 ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- Turtle绘制带颜色和字体的图形（Python3）
转载自https://blog.csdn.net/wumenglu1018/article/details/78184930 在Python中有很多编写图形程序的方法,一个简单的启动图形化程序设计的方 ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- iOS重写drawRect方法实现带箭头的View
创建一个UIView的子类,重写drawRect方法可以实现不规则形状的View,这里提供一个带箭头View的实现代码: ArrowView.h #import <UIKit/UIKit.h&g ...
- OpenLayers绘制图形
OpenLayers绘制图形 OpenLayers的显示构成由外向内为: ol.Map:地图对象. ol.layer.Vector:图层对象layer.Map含有多个layer,最终的显示效果是由 ...
- Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker
前面写了篇文章,mapboxgl实现带箭头轨迹线,介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果. 下图是我基于leaflet实现的效果. 接下来分享一下在我基于leaflet实现该效果时 ...
- 不得不吐槽的Android PopupWindow的几个痛点（实现带箭头的上下文菜单遇到的坑）
说到PopupWindow,我个人感觉是又爱又恨,没有深入使用之前总觉得这个东西应该很简单,很好用,但是真正使用PopupWindow实现一些效果的时候总会遇到一些问题,但是即便是人家的api有问题, ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
随机推荐
- Pytest接口自动化测试框架Python自动化测试开发
一.引言 在软件开发过程中,接口测试是确保软件各个组件之间数据传输和功能交互正常工作的重要环节.通过接口测试,可以提高软件的整体质量和稳定性.Pytest是一个流行的Python自动化测试框架,提供了 ...
- 使用腾讯云对象存储 COS 作为 Velero 后端存储，实现集群资源备份和还原
Velero(以前称为 Heptio Ark)是一个开源工具,可以安全地备份和还原,执行灾难恢复以及迁移 Kubernetes 集群资源和持久卷,可以在 TKE 集群或自建 Kubenetes 集群中 ...
- 题解：P11007 『STA - R7』Odtlcsu
有个很显然的结论,题目中的 $x$ 与 $y$ 奇偶性相同. 有个更简单的证明,奇数的平方为奇数,偶数的平方为偶数,所以 $x$ 与 $y$ 奇偶性相同. 思路就显而易见了,考虑构造一个长度为 $y$ ...
- 【Python】【Pandas】将符合条件行的某列数值改为负数
萌狼蓝天情景还原: 支付宝/微信导出的账单,不管支出还是收入都是正数. 我想把支出的金额改成负数,其他不变就这样. 解决办法 这里用到的是pandas.apply e--下面的写法虽然比较麻烦,但是 ...
- 巧用mask属性创建一个纯CSS图标库
说明 mask 是CSS中的一个属性,它允许开发者在元素上设置图像作为遮罩层.这个属性的强大之处,在于它可以接受多种类型的值,包括关键字值.图像值.渐变色,甚至可以设置多个属性值. SVG(Scala ...
- Qt编写地图综合应用36-覆盖物折线
一.前言 折线图目前应用最广的也是用来绘制各种轨迹,折线图其实就是后面动态轨迹图.飞机航线图的前身,公用的一个方法addPolyline,折线图可以设置颜色.粗细.透明度等属性,如果开启了悬浮绘图工具 ...
- ANOSIM分析
ANOSIM分析(analysis of similarities)即相似性分析,主要用于分析高维数据组间相似性,为数据间差异显著性评价提供依据.在一些高维数据分析中,需要使用PCA.PCoA.NMD ...
- Django_使用汇总(1)
使用django(4.1.5) 搭建股票信息后台,显示股票信息: Stock -> models.py class Stock(models.Model): symbol = models.Ch ...
- Windows 风格的个人网盘，支持OnlyOffice、支持音视频聊天、支持自动更新
一年前,我开源了这个网盘,详见Windows风格的个人网盘,支持文档在线编辑,这一年期间,这个网盘进行了大量的更新,具体如下: 新增支持的功能如下: 支持 OnlyOffice (Word.Excel ...
- java技术架构图
架构图有哪几种 业务架构:需求初期业务的结果和过程描述一般比较模糊,可能来自于某个老板.运营或用户的反馈.客户说海尔洗衣机洗土豆会堵,海尔立马设计专门的土豆洗衣机 业务方向往往是定方向和结果的叫战略, ...