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> < ...
随机推荐
- BigDecimal数据处理方法总结
前言 BigDecimal是Java编程语言中位于java.math包中的一个类,主要用于进行高精度的十进制数计算.它提供了对任意精度的十进制数进行精确计算的能力,适用于需要保持精度和执行准确计算 ...
- 打破格式壁垒 ！COS助力腾讯文档优化在线预览效果
说起腾讯文档,相信大家对此并不陌生.在新冠疫情防控期间,腾讯文档在人员流动排查.健康信息收集.居家学习.协同办公等场景发挥了巨大的作用. 腾讯文档不仅支持新建word.excel.ppt.思维导图.流 ...
- mysql5.7配置文件详解
8核心32G独立mysql服务器的配置文件如下: [client] port = 3306 socket = /data/mysql/mysql.sock [mysql] prompt = " ...
- docker容器内使用sudo 报错bash: sudo: command not found
解决办法: 先查看linux系统版本: cat /proc/version 1.RedHat系主要有RedHat,Fedora,CentOs等: RedHat系列的包管理工具是yum,执行 yum i ...
- Qt/C++开发经验小技巧281-285
悬停窗体QDockWidget默认在标题栏右键会弹出悬停模块的显示隐藏菜单,如果需要去掉,会发现设置Qt::NoContextMenu或者事件过滤器拦截都是无效的,必须设置 dockWidget-&g ...
- Qt编写的项目作品23-推流综合应用示例
一.功能特点 支持各种本地音视频文件和网络音视频文件,格式包括mp3.aac.wav.wma.mp4.mkv.rmvb.wmv.mpg.flv.asf等. 支持各种网络音视频流,网络摄像头,协议包括r ...
- Qt音视频开发47-通用视频控件
一.前言 自从视频监控系统的内核不断增加,从最初的vlc到ffmpeg然后到mpv,后面还陆续增加了海康sdk等,每次增加一个内核,整个视频监控系统就有三五个代码文件需要修改,而且大部分是重复的代码, ...
- Qt音视频开发32-Onvif网络设置
一.前言 用onvif协议来对设备的网络信息进行获取和设置,这个操作在众多的NVR产品中,用的很少,绝大部分用户都还是习惯直接通过摄像机的web页面进去配置,其实修改网络配置的功能在大部分的NVR中都 ...
- Qt编写的项目作品34-雷达模拟仿真工具(雨田哥作品)
一.功能特点 支持音频频谱显示. 支持任意随机添加模拟点. 支持自定义添加模拟点. 支持方位.航向角.距离.速度.目标体真实图自定制. 支持危险区域范围显示. 支持激光发射模拟. 支持雷达图放大缩小显 ...
- 即时通讯技术文集（第32期）：IM开发综合技术合集(Part5) [共12篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第32 期. [- 1 -] IM开发干货分享:如何优雅的实现大量离线消息的可靠投递 [链接] ...