OpenLayers基础教程——军事箭头标绘

最新推荐文章于 2024-03-27 15:08:06 发布
最新推荐文章于 2024-03-27 15:08:06 发布
阅读量793 收藏 9
点赞数 8
分类专栏： JavaScript 文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/135845108
版权
本文详细描述了如何在OpenLayers中利用三角函数计算坐标，实现军事箭头的标绘，并给出了具体的代码示例。作者还提到了GIS开发中其他可能的拓展方向。
摘要由CSDN通过智能技术生成

1、前言

最近有同志询问如何在OpenLayers中实现军事箭头的标绘，我在这里做了一个例子，效果如下图所示：

在这里插入图片描述

2、实现方法

其实绘制军标并不难，关键是找准坐标点。先来看一张图：
在这里插入图片描述
上图中红色的线为连接起点和终点所得，我们需要根据这条线确定序号0-6的七个点的坐标，排除一些特殊情况，如红线平行于X轴或Y轴，想要得到这七个点的坐标并不困难，你可以用一次函数的方法算解析式，也可以用三角函数。我这里采用三角函数计算，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>军标绘制</title>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });

        // 东北
        var p1 = getPoints([120.2, 30.2], [120.6, 30.6], 0.08, 0.22, 0.65)
        var f1 = new ol.Feature({
            geometry: new ol.geom.Polygon([p1])
        });
        f1.setStyle(getStyle('red'));
        layer.getSource().addFeature(f1);

        // 西北
        var p2 = getPoints([119.8, 30.2], [119.4, 30.6], 0.08, 0.22, 0.65)
        var f2 = new ol.Feature({
            geometry: new ol.geom.Polygon([p2])
        });
        f2.setStyle(getStyle('green'));
        layer.getSource().addFeature(f2);

        // 西南
        var p3 = getPoints([119.8, 29.8], [119.4, 29.4], 0.08, 0.22, 0.65)
        var f3 = new ol.Feature({
            geometry: new ol.geom.Polygon([p3])
        });
        f3.setStyle(getStyle('blue'));
        layer.getSource().addFeature(f3);

        // 东南
        var p4 = getPoints([120.2, 29.8], [120.6, 29.4], 0.08, 0.22, 0.65)
        var f4 = new ol.Feature({
            geometry: new ol.geom.Polygon([p4])
        });
        f4.setStyle(getStyle('yellow'));
        layer.getSource().addFeature(f4);

        // 正北
        var p5 = getPoints([120.0, 30.2], [120.0, 30.7], 0.08, 0.22, 0.65)
        var f5 = new ol.Feature({
            geometry: new ol.geom.Polygon([p5])
        });
        f5.setStyle(getStyle('Magenta'));
        layer.getSource().addFeature(f5);

        // 正南
        var p6 = getPoints([120.0, 29.8], [120.0, 29.3], 0.08, 0.22, 0.65)
        var f6 = new ol.Feature({
            geometry: new ol.geom.Polygon([p6])
        });
        f6.setStyle(getStyle('Sienna'));
        layer.getSource().addFeature(f6);

        // 正西
        var p7 = getPoints([120.2, 30.0], [120.7, 30.0], 0.08, 0.22, 0.65)
        var f7 = new ol.Feature({
            geometry: new ol.geom.Polygon([p7])
        });
        f7.setStyle(getStyle('Indigo'));
        layer.getSource().addFeature(f7);

        // 正东
        var p8 = getPoints([119.8, 30.0], [119.3, 30.0], 0.08, 0.22, 0.65)
        var f8 = new ol.Feature({
            geometry: new ol.geom.Polygon([p8])
        });
        f8.setStyle(getStyle('Teal'));
        layer.getSource().addFeature(f8);

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120.3, 30.3],
                zoom: 10
            })
        });

        // 获取坐标点
        function getPoints(start, end, r1, r2, r3) {
            var array = [];
            var angle = Math.atan(Math.abs(end[1] - start[1]) / Math.abs(end[0] - start[0]));
            var split = [start[0] + (end[0] - start[0]) * r3, start[1] + (end[1] - start[1]) * r3];

            var length = Math.sqrt(Math.pow(end[1] - start[1], 2) + Math.pow(end[0] - start[0], 2));
            var h1 = length * r1;
            var h2 = length * r2;

            if (start[0] < end[0] && start[1] < end[1]) {
                // 东北方向
                // 0、6、7
                array[0] = [start[0] - h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];
                array[6] = [start[0] + h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];
                array[7] = [start[0] - h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];

                // 1、5
                array[1] = [split[0] - h1 * Math.sin(angle), split[1] + h1 * Math.cos(angle)];
                array[5] = [split[0] + h1 * Math.sin(angle), split[1] - h1 * Math.cos(angle)];

                // 2、4
                array[2] = [split[0] - h2 * Math.sin(angle), split[1] + h2 * Math.cos(angle)];
                array[4] = [split[0] + h2 * Math.sin(angle), split[1] - h2 * Math.cos(angle)];

                // 3
                array[3] = [end[0], end[1]];
            } else if (start[0] > end[0] && start[1] < end[1]) {
                // 西北方向
                // 0、6、7
                array[0] = [start[0] - h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];
                array[6] = [start[0] + h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];
                array[7] = [start[0] - h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];

                // 1、5
                array[1] = [split[0] - h1 * Math.sin(angle), split[1] - h1 * Math.cos(angle)];
                array[5] = [split[0] + h1 * Math.sin(angle), split[1] + h1 * Math.cos(angle)];

                // 2、4
                array[2] = [split[0] - h2 * Math.sin(angle), split[1] - h2 * Math.cos(angle)];
                array[4] = [split[0] + h2 * Math.sin(angle), split[1] + h2 * Math.cos(angle)];

                // 3
                array[3] = [end[0], end[1]];
            } else if (start[0] > end[0] && start[1] > end[1]) {
                // 西南方向
                // 0、6、7
                array[0] = [start[0] + h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];
                array[6] = [start[0] - h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];
                array[7] = [start[0] + h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];

                // 1、5
                array[1] = [split[0] + h1 * Math.sin(angle), split[1] - h1 * Math.cos(angle)];
                array[5] = [split[0] - h1 * Math.sin(angle), split[1] + h1 * Math.cos(angle)];

                // 2、4
                array[2] = [split[0] + h2 * Math.sin(angle), split[1] - h2 * Math.cos(angle)];
                array[4] = [split[0] - h2 * Math.sin(angle), split[1] + h2 * Math.cos(angle)];

                // 3
                array[3] = [end[0], end[1]];
            } else if (start[0] < end[0] && start[1] > end[1]) {
                // 东南方向
                // 0、6、7
                array[0] = [start[0] + h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];
                array[6] = [start[0] - h1 * Math.sin(angle), start[1] - h1 * Math.cos(angle)];
                array[7] = [start[0] + h1 * Math.sin(angle), start[1] + h1 * Math.cos(angle)];

                // 1、5
                array[1] = [split[0] + h1 * Math.sin(angle), split[1] + h1 * Math.cos(angle)];
                array[5] = [split[0] - h1 * Math.sin(angle), split[1] - h1 * Math.cos(angle)];

                // 2、4
                array[2] = [split[0] + h2 * Math.sin(angle), split[1] + h2 * Math.cos(angle)];
                array[4] = [split[0] - h2 * Math.sin(angle), split[1] - h2 * Math.cos(angle)];

                // 3
                array[3] = [end[0], end[1]];
            } else if (start[0] == end[0] && start[1] != end[1]) {
                if (start[1] < end[1]) {
                    // 正北方向
                    // 0、6、7
                    array[0] = [start[0] - h1, start[1]];
                    array[6] = [start[0] + h1, start[1]];
                    array[7] = [start[0] - h1, start[1]];

                    // 1、5
                    array[1] = [split[0] - h1, split[1]];
                    array[5] = [split[0] + h1, split[1]];

                    // 2、4
                    array[2] = [split[0] - h2, split[1]];
                    array[4] = [split[0] + h2, split[1]];

                    // 3
                    array[3] = [end[0], end[1]];
                } else {
                    // 正南方向
                    // 0、6、7
                    array[0] = [start[0] + h1, start[1]];
                    array[6] = [start[0] - h1, start[1]];
                    array[7] = [start[0] + h1, start[1]];

                    // 1、5
                    array[1] = [split[0] + h1, split[1]];
                    array[5] = [split[0] - h1, split[1]];

                    // 2、4
                    array[2] = [split[0] + h2, split[1]];
                    array[4] = [split[0] - h2, split[1]];

                    // 3
                    array[3] = [end[0], end[1]];
                }
            } else if (start[0] != end[0] && start[1] == end[1]) {
                if (start[0] < end[0]) {
                    // 正东方向
                    // 0、6、7
                    array[0] = [start[0], start[1] + h1];
                    array[6] = [start[0], start[1] - h1];
                    array[7] = [start[0], start[1] + h1];

                    // 1、5
                    array[1] = [split[0], split[1] + h1];
                    array[5] = [split[0], split[1] - h1];

                    // 2、4
                    array[2] = [split[0], split[1] + h2];
                    array[4] = [split[0], split[1] - h2];

                    // 3
                    array[3] = [end[0], end[1]];
                } else {
                    // 正西方向
                    // 0、6、7
                    array[0] = [start[0], start[1] - h1];
                    array[6] = [start[0], start[1] + h1];
                    array[7] = [start[0], start[1] - h1];

                    // 1、5
                    array[1] = [split[0], split[1] - h1];
                    array[5] = [split[0], split[1] + h1];

                    // 2、4
                    array[2] = [split[0], split[1] - h2];
                    array[4] = [split[0], split[1] + h2];

                    // 3
                    array[3] = [end[0], end[1]];
                }
            } else {
                // 起点与终点重合
                array = [[], [], [], [], [], [], [], []];
            }

            return array;
        }

        // 创建样式
        function getStyle(colorName) {
            return new ol.style.Style({
                fill: new ol.style.Fill({
                    color: colorName
                })
            })
        }
    </script>
</body>
</html>

3、结语：

本文主要介绍了OpenLayers中军标箭头的绘制方法。其实GIS开发中的绘制功能可以拓展的地方还是很多的。比如可以在箭头尾部加个点，如下图所示，有兴趣的同志可以自行拓展。

在这里插入图片描述

HerryDong
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
openlayers：实现态势箭头（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 101
openlayers：实现态势箭头（附完整源码）
27-openlayers添加带箭头的线
最新发布
fxshy的博客
05-20 67
openlayers添加带箭头的线
基于openlayer的军事动态标绘.7z
01-20
基于openlayer的军事动态标绘
238：vue+openlayers 绘制扩展，弓形、曲线、扇形、双箭头、进攻方向...
大剑师兰特的GIS世界
05-16 1248
第238个本示例的目的是介绍演示如何在vue+openlayers中利用ol-plot插件进行绘制图形扩展，可以绘制弓形、弧形、标志旗、战斗进攻图形等等。
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
OpenLayers实战，Openlayers实现绘制箭头，Openlayers绘制轨迹路径箭头，可调箭头角度和箭头长度
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-31 1467
在此之前，我们已经实现了基本图形（点、线、圆、多边形）的绘制（OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形），本章实现一个计算稍微麻烦一点的图形（箭头）来实现Openlayers绘制箭头，Openlayers绘制轨迹路径箭头，还支持箭头角度和箭头长度可调整。
openlayers：实现进击箭头（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 42
openlayers：实现进击箭头（附完整源码）
ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形
热门推荐
Cp459584547的博客
11-18 2万+
ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形
基于Cesium的军事标绘，支持淡入淡出、生长动画
ethan_zf的博客
03-27 874
基于Cesium的军事标绘，支持淡入淡出、生长动画
openlayers 态势箭头、进击箭头等
02-28
在"openlayers 态势箭头、进击箭头等"这个主题中，我们将深入探讨如何在OpenLayers地图上添加动态的态势箭头和进击箭头，以实现更丰富的地图展示效果。 首先，我们需要理解OpenLayers中的矢量图层（Vector Layer）...
实现OpenLayers3版本的动态标绘API
09-20
动态标绘API则是OpenLayers3的一个重要特性，允许用户在地图上动态地绘制点、线和面等地理元素，极大地增强了地图应用的交互性和功能性。 实现OpenLayers3的动态标绘API，首先要理解其核心概念和API。以下是一些...
动态标绘演示系统1.0（for OpenLayers3）
10-08
基于OpenLayers3实现动态标绘API，初始版本，仅支持标绘符号绘制。
openlayers基础系列教程
03-13
OpenLayers 基础系列教程 OpenLayers 是一个强大的、开源的 JavaScript 库，用于开发基于 WebGIS 的应用系统。它提供了强大的地图处理能力，支持多种数据源，包括矢量和栅格图层，可以满足各种 GIS 应用的需求。 ...
基于ol-plot的openlayers 5 的标绘地图
qq_38000851的博客
08-01 2389
代码基于以下版本做修改获得，因为公司的原因，并不是用vue.js开发，用的是jquery，别问为什么，问就是公司技术不肯革新，公司小，没成本和人力做新技术的引进和研发。 https://github.com/sakitam-fdd/ol-plot/tree/master https://sakitam-fdd.github.io/ol-plot/ 据说一下版本支持ol6 https://github.com/worlddai/plot_ol 因为原本支持的是ol3跟ol4，然后再ol5版本存在一些问题，具体
openlayers实现箭头轨迹线
github_31946551的博客
04-26 2916
使用的setStyle 方法，轨迹线可以由实线+多个箭头icon组成。setStyle可以接收一个function回调方法，根据分辨率，设定每个箭头间隔的像素，计算线要素Feature的长度，根据总长度计算箭头个数。还要计算每个箭头的位置Point，箭头的方向，将其转化成Style对象。
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 685
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
openlayers：实现图层箭线 arrow line（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 65
openlayers：实现图层箭线 arrow line（附完整源码）
openlayers中绘制态势箭头
10-11
在OpenLayers中绘制态势箭头，可以按照以下步骤进行： 1. 首先，您需要在OpenLayers项目中引入相关的库文件。这些库文件通常可以从官方网站或第三方资源中获取。 2. 创建一个OpenLayers地图对象，并设置相应的容器以及初始视图。 3. 定义箭头的样式，并指定相应的绘制参数。您可以通过OpenLayers的API来设置箭头的颜色、粗细、方向等属性。 4. 使用OpenLayers提供的绘制工具，通过点击或拖拽的方式在地图上添加箭头。您可以监听地图相关事件，在鼠标点击或拖拽结束时创建箭头，并在地图上显示。 5. 在绘制过程中，可以实时更新箭头的位置和方向，以达到态势展示的目的。 6. 为了增强用户体验，您可以添加交互功能，例如点击箭头时显示详细信息或执行其他操作。 7. 最后，根据需要进行功能的扩展和优化，例如保存箭头信息、编辑箭头位置等。 总之，在OpenLayers中绘制态势箭头需要先设置相关的库文件，创建地图对象并定义箭头样式，然后使用绘制工具在地图上添加箭头。通过监听事件和实时更新箭头的位置和方向，您可以实现一个功能完善的态势展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值