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

随机推荐

IO介绍-上
IO IO系统管理的主要对象是IO设备和相应的设备控制器.其主要任务是,完成用户提出的IO请求,提高IO效率,以及提高设备的利用率.并能为更高层的进程方比那使用这些设备提供手段. IO系统的基本功能 ...
LLM应用实战-财经新闻自动聚合
1. 背景这段时间项目比较忙,所以本qiang~有些耽误了学习,不过也算是百忙之中,抽取时间来支撑一个读者的需求,即爬取一些财经网站的新闻并自动聚合. 该读者看了之前的<AI资讯的自动聚合及报 ...
c++的OJ练习一
1.1599.米老鼠偷糖果 2.1323.扩建花圃问题 3.P1425.小鱼的游泳时间 4.1598.文具店的折扣 5.P5706.再分肥宅水 6.1345.玫瑰花圃 7.P3954.NOIP2017 ...
Docker容器共享磁盘
需求:.NET程序需要监控一个FTP上的文件变化并进行操作,在linux上使用原生目录时,不管怎么切换后台运行,总是会在一段时间运行后死掉. 方案:远程也不好debug,想了一下,干脆直接使用dock ...
Shell_Shell 脚本中字符串的相关操作
在我们的shell 编程中,一个必不可少的操作就是针对于字符串的操作, 重要有字符串替换,计算字符串长度等等... 原文地址: https://blog.csdn.net/github_337369 ...
Spring Boot 2.4 中文
Spring Boot 2.4 中文 https://runebook.dev/zh-CN/docs/spring_boot/spring-boot-features
Qt音视频开发45-视频传输TCP版
一.前言做音视频开发,会遇到将音视频重新转发出去的需求,当然终极大法是推流转发,还有一些简单的场景是直接自定义协议将视频传出去就行,局域网的话速度还是不错的.很多年前就做过类似的项目,无非就是将本地 ...
Datawhale冬令营第二期！😀Task 1
Datawhale冬令营第二期-Task1:动手体验AI辅助编程:番茄钟对应链接:https://www.datawhale.cn/activity/116/23/94?rankingPage=1 ...
IM跨平台技术学习(三)：vivo的Electron技术栈选型、全方位实践总结
本文由vivo技术团队Yang Kun分享,原题"electron 应用开发优秀实践",本文有修订. 1.引言在上篇<Electron初体验(快速开始.跨进程通信.打包.踩 ...
一级缓存和二级缓存--mybatis|hibernate
一级缓存和二级缓存的区别: 主要的不同是它们的作用范围不同. 一级缓存是session级别的. 也就是只有在同一个session里缓存才起作用,当这个session关闭后这个缓存就不存在了. 而二级缓 ...

OpenLayers 绘制带箭头的LineString

RESULT:

Reference:

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

随机推荐

热门专题