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

随机推荐

自定义资源支持：K8s Device Plugin 从原理到实现
本文主要分析 k8s 中的 device-plugin 机制工作原理,并通过实现一个简单的 device-plugin 来加深理解. 1. 背景默认情况下,k8s 中的 Pod 只能申请 CPU 和 ...
git 基础操作 && 在"develop"分支修改动但不想提交切换到"master"分支(最后)
测试学习准备条件:一个目录,含不含有文件都可以,创建一个test.txt 1. 创建空仓库 git init 2. 修改过后,添加到本地仓库添加指定的文件,如果一个以上,文件名空格隔开 git ad ...
3.QMainWindow
QMainWindow介绍 QMainWindow是一个为用户提供主窗口程序的类,包含一个菜单栏(menu bar),多个工具栏(tool bars),多个铆接部件(dock widgets),一个状 ...
用Python让两组数据纵向排序
一.引言在数据处理和分析中,排序是一项非常基础且重要的操作.排序可以帮助我们更好地理解数据,发现数据中的模式和规律.在Python中,我们可以使用多种方法对数据进行排序.本文将详细介绍如何使用Pyt ...
LiquibaseException java.lang.ClassCastException: class java.time.LocalDateTime cannot be cast to class java.lang.String
https://forum.liquibase.org/t/liquibaseexception-java-lang-classcastexception-class-java-time-locald ...
【Mybatis-Plus进阶学习（八）】SQL注入器
使用SQL注入器就可以自定义例如selectById的默认方法. 实现步骤Step1:创建定义方法的类:Step2:创建注入器:Step3:在Mapper中加入自定义方法. 自定义注入器的简单使用第 ...
Qt音视频开发15-动态切换解码内核的设计
一.前言动态切换解码内核这个需求也是源自客户的真实需求,既然是动态切换,那肯定是运行期间切换,而不是通过改变标志位重新编译程序来切换,最开始做的就是这种方式,这样就是实现起来简单,但是用起来不够方便 ...
即时通讯技术文集（第26期）：实时音视频技术合集(Part1) [共16篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第26 期. [- 1 -] 实时语音聊天中的音频处理与编码压缩技术简述 [链接] http:/ ...
阿里IM技术分享(六)：闲鱼亿级IM消息系统的离线推送到达率优化
本文由阿里闲鱼技术团队逸昂分享,原题"消息链路优化之弱感知链路优化",有修订和改动,感谢作者的分享. 1.引言闲鱼的IM消息系统作为买家与卖家的沟通工具,增进理解.促进信任,对闲 ...
winform 引用AForge调用摄像头拍照
Nuget安装这个2个: AForge.Controls; AForge.Video.DirectShow; code: namespace WindowsFormsApp1 { partial cl ...

OpenLayers 绘制带箭头的LineString

RESULT:

Reference:

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

随机推荐

热门专题