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

随机推荐

vue全局事件总线
首先在main.js中app实例中使用生命周期钩子添加组件 new Vue({ router, render: h => h(App), beforeCreate() { Vue.prototy ...
openEuler欧拉部署gitbook
安装nodejs10 参见<openEuler欧拉安装指定版本的nodejs> 安装Gitbook n 16 # 选择高版本的node npm config set registry ht ...
manim边学边做--旋转
本篇介绍Manim中的两个旋转类的动画,名称差不多,分别是Rotate和Rotating. Rotate类主要用于对图形对象进行指定角度.围绕特定点的精确旋转,适用于几何图形演示.物理模拟和机械运动展 ...
【C#】【平时作业】习题-4-流程控制
T1 创建一个Windows应用程序,先输入年龄值,再判断是否大于18,最后显示判断结果,运行效果如图所示. 提示: 注意保持逻辑完整: 引用数据需要明确出处. [程序代码] private void ...
Jackson ObjectMapper - 指定对象属性的序列化顺序
注释很有用,但在任何地方应用起来都会很痛苦.您可以配置整个 ObjectMapper 以这种方式工作当前杰克逊版本: objectMapper.configure(MapperFeature.SOR ...
【杂谈】Kafka的无锁设计
前言在分布式消息队列系统中,Kafka 的无锁设计是其高吞吐量和高并发的核心优势之一.通过避免锁的竞争,Kafka 能够在高并发和大规模的生产环境中保持高效的性能.为了更好地理解 Kafka 的无锁 ...
Qt编写地图综合应用文章导航
文章链接 1-闪烁点图 https://qtchina.blog.csdn.net/article/details/105310274 2-迁徙图 https://qtchina.blog.csdn ...
error C2664: “HANDLE FindFirstFileW(LPCWSTR,LPWIN32_FIND_DATAW)”: 无法将参数 1 从“const _Elem *”转换为“LPCWSTR”
Error 30 error C2664: 'HANDLE FindFirstFileW(LPCWSTR,LPWIN32_FIND_DATAW)' : 不能将参数 1 从"char [260 ...
[转]Visual Studio调试模式下添加命令行参数的方法
在VS中向命令行添加参数,即向main()函数传递参数的方法: 右键单击:添加参数的工程-->属性-->配置属性-->调试,在右侧"命令参数"栏输入要添加的参数, ...
[转]在WorldWind中加入*.x格式的三维模型
Nasa支持的WorldWind项目最近推出了1.4RC5版,可以加入三维模型,效果如下图所示: 点击查看大图 WW1.4对XML配置文件增加了许多新的元素,其中ModelFeature就是用来增加三 ...

OpenLayers 绘制带箭头的LineString

RESULT:

Reference:

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

随机推荐

热门专题