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> < ...

随机推荐

StarBlog博客Vue前端开发笔记：(2)页面路由
前言 Vue.js 使用虚拟 DOM 处理单页面,然后使用 Webpack 打包.通过上一篇文章的例子,读者也许已经发现,无论语法和写法如何不同,Vue.js 程序打包后都是一个单一的 HTML 文件 ...
Git for windows下Filename too long
前情 Git(读音为/gɪt/)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理,我公司目前都是基于Git来管理项目代码的. 坑位最近在拉取代码时报如下错误,其中有句 ...
Http请求报文(请求行，请求头、请求体)
Http请求报文: http请求报文由3部分组成,请求行,请求头,请求体. 一.请求行: 请求方法.URL地址.协议版本请求方法:POST.GET.DELETE.PUT.HEAD.OPTIONS.T ...
2024-12-21：从魔法师身上吸取的最大能量。用go语言，在一个神秘的地牢里，有 n 名魔法师排成一列。每位魔法师都有一个能量属性，有的提供正能量，而有的则会消耗你的能量。你被施加了一种诅咒，吸
2024-12-21:从魔法师身上吸取的最大能量.用go语言,在一个神秘的地牢里,有 n 名魔法师排成一列.每位魔法师都有一个能量属性,有的提供正能量,而有的则会消耗你的能量. 你被施加了一种诅咒,吸 ...
【MyBatis】学习笔记07：模糊查询
[Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 [MyBatis]学习笔记03:配置文件进一步解读(非常重要) [MyBatis]学习笔记04:配 ...
X64\X86\X86-64的区别
x86是指intel的开发的一种32位指令集,从386开始时代开始的,一直沿用至今,是一种cisc指令集,所有intel早期的cpu,amd早期的cpu都支持这种指令集,ntel官方文档里面称为&qu ...
SpringBoot配置文件敏感信息加密，springboot配置文件数据库密码加密jasypt
使用过SpringBoot配置文件的朋友都知道,资源文件中的内容通常情况下是明文显示,安全性就比较低一些.打开application.properties或application.yml,比如mysq ...
Qt音视频开发36-超时检测和自动重连的设计
一.前言如果网络环境正常设备正常,视频监控系统一般都是按照正常运行下去,不会出现什么问题,但是实际情况会很不同,奇奇怪怪七七八八的问题都会出现,就比如网络出了问题都有很多情况(交换机故障.网线故障. ...
Qt开发经验小技巧121-130
QLineEdit除了单纯的文本框以外,还可以做很多特殊的处理用途. 限制输入只能输入IP地址. 限制输入范围,强烈推荐使用 QRegExpValidator 正则表达式来处理. //正在表达式限制输 ...
9.24java wab实现创建新界面验证码
<!DOCTYPE html> <html> <head> <title>User Login</title> <style> ...

OpenLayers 绘制带箭头的LineString

RESULT:

Reference:

OpenLayers 绘制带箭头的LineString的更多相关文章

随机推荐

热门专题