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> < ...
随机推荐
- 【Web前端】【JavaScript】实现表格隔行变色
方法1:原生JavaScript 设置CSS table td{ border:red solid 1px; } .tr1{ color:white; background: black; } .tr ...
- 如何在 Linux 中使用 grep 命令的排除功能
来自grep 是一种强大的命令行工具,用于在一个或多个输入文件中搜索与正则表达式匹配的行,并将匹配的行标准输出.在本文中介绍如何在使用 grep 搜索时排除一个或多个单词或目录. 排除单词或多个条 ...
- 记一次简单的存储过程和Pivot行转列
首先我很讨厌写存储过程,其次我很讨厌 没办法,主要是需要进行 行转列,项目经理说可以用Pivot.我不是很精通sql,但是我会百度呀~ pivot需要有确定的列名.那我这个项目里面没办法确定,最后问了 ...
- DVWA靶场Weak Session IDs(弱会话) 漏洞所有级别通关教程及源码审计
Weak Session IDs(弱会话) Weak Session IDs(弱会话ID)漏洞是一种安全漏洞,涉及在 web 应用程序中使用不安全或容易被猜测的会话标识符(Session IDs).会 ...
- 浅谈Spring Data ElasticSearch
Spring Data Spring Data 帮助我们避免了一些样板式代码,比如我们要定义一个接口,可以直接继承接口ElasticSearchRepository接口,这样Spring Data就帮 ...
- 2022 年万圣节 Github 彩蛋
记录每年 Github 万圣节彩蛋,也记录有来项目成长历程. 2022 万圣节彩蛋 2021 万圣节彩蛋 2020 万圣节彩蛋
- 深入解析 Spring AI 系列：剖析OpenAI接口接入组件
今天我们将继续探讨如何在Spring AI中接入大语言模型,以OpenAI为例,详细分析其接入过程.我们将逐步探讨OpenAI是如何与Spring AI系统对接的,具体包括如何配置接口.如何封装接口参 ...
- Kotlin：【继承】：继承、函数重载、类型检测、as类型转换、智能类型转换、Kotlin层次
- 面向对象(下)的阶段性复习：关键字abstract、模板方法的设计模式、关键字interface、代理模式、工厂的设计模式、类的结构内部类
关键字:abstract abstract: 抽象的1.可以用来修饰:类.方法2.具体的:abstract修饰类:抽象类 * > 此类不能实例化 * > 抽象类中一定有构造器,便于子类实例 ...
- playwright相关
Playwright 介绍 Playwright 是一个用于自动化浏览器操作的开源工具,由 Microsoft 开发和维护.它支持多种浏览器(包括 Chromium.Firefox 和 WebKit) ...