iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >利用OpenLayer绘制扇形的示例代码
  • 632
分享到

利用OpenLayer绘制扇形的示例代码

2024-04-02 19:04:59 632人浏览 薄情痞子
摘要

目录创建openlayers地图绘制扇形方法我在网上看了很多说是绘制扇形的方法,但是我用的时候都不是很好玩,所以说呢,我自己整理了一下,符合了我想要的效果,尽管我能力有限,还是决定分

我在网上看了很多说是绘制扇形的方法,但是我用的时候都不是很好玩,所以说呢,我自己整理了一下,符合了我想要的效果,尽管我能力有限,还是决定分享一下,因为找资料太难了!

我比较懒,就不废话了,直接上代码!

创建openlayers地图

包我就不复制了,根据官网提供的api自己引用吧!

openlayers API地址

创建地图

// 实例化Map
map = new Map({  // 创建一个地图
  layers: [new TileLayer({
     source: new OSM(),
  }),],
  target: 'map',
  view: new View({
     center: fromLonLat([116.400819, 39.916263]),
     zoom: 15,
     constrainResolution: true,  // 设置缩放级别为整数 
     smoothResolutionConstraint: false,  // 关闭无级缩放地图
  }),
});

上面代码大体就这个样子。

到这儿应该没什么问题。我用的就是默认的 3857 坐标系,不是4326的。

绘制扇形方法

绘制扇形方法就很简单了,比如绘制两个。

	  // 绘制扇形
      addCurve() {
        let origi_point = fromLonLat([116.410819, 39.916263]);  // 绘制扇形的顶点
        let circle = this.createRegularPolyGonCurve(origi_point, 500, 100, 30, 90) // 调用绘制扇形的方法得到扇形
        let feature = new Feature(circle);  // 把扇形加入 feature
        feature.setStyle(  // 设置一下这个扇形的样式
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 0.3)'
            }),
            stroke: new Stroke({
              color: 'rgba(255, 205, 67, 0.3)',
              width: 2
            }),
          })
        )
        feature.set('type', 'Curve')  // 这是给这个扇形添加额外的参数 , 如果是设置id 用 setId方法
        feature.set('curve', {   // 这是给这个扇形添加额外的参数,这里的id和 setId的id没关系
          id: 1,
          title: '测试001',
          msg: '测试001-1',
          msg2: '测试001-2',
        })

		// 创建第二个扇形,和第一个一样
        let circle1 = this.createRegularPolygonCurve(origi_point, 500, 100, 30, 45)
        let feature1 = new Feature(circle1);
        feature1.setStyle(
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 0.3)'
            }),
            stroke: new Stroke({
              color: 'rgba(255, 205, 67, 0.3)',
              width: 2
            }),
          })
        )
        feature1.set('type', 'Curve')
        feature1.set('curve', {
          id: 2,
          title: '超级无敌炫酷爆龙战神',
          msg: '超级无敌炫酷爆龙战神 描述001',
          msg2: '超级无敌炫酷爆龙战神 描述002',
        })

        let vectorSource = new VectorSource();  // 创建一个数据源
        vectorSource.addFeatures([feature, feature1]);   // 把两个扇形加进数据源
        let vectorLayer = new VectorLayer({     // 创建一个图层,把数据源加进图层
          source: vectorSource 
        });
        map.addLayer(vectorLayer);   // 把图层加进地图
      },

接下来就是最重要的, 怎么绘制的扇形,也就是上边代码调用的方法。

	 
      createRegularPolygonCurve(origin, radius, sides, r, angel) {
        let rotation = 360 - r;
        let angle = Math.PI * ((1 / sides) - (1 / 2));
        if (rotation) {
          angle += (rotation / 180) * Math.PI;
        }
        let rotatedAngle, x, y;
        let points = [];
        for (let i = 0; i < sides; ++i) {
          let an = i * ((360 - rotation) / 360);
          rotatedAngle = angle + (an * 2 * Math.PI / sides);
          x = origin[0] + (radius * Math.cos(rotatedAngle));
          y = origin[1] + (radius * Math.sin(rotatedAngle));
          points.push([x, y]);
        }
        if (rotation != 0) {
          points.push(origin);
        }
        var ring = new LinearRing(points);
        ring.rotate(angel / 57.3, origin);
        let list = ring.getCoordinates()

        return new Polygon([list]);
      },

好了,就这样,我是可以了,看你们了!

到此这篇关于利用OpenLayer绘制扇形的示例代码 的文章就介绍到这了,更多相关OpenLayer绘制扇形内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 利用OpenLayer绘制扇形的示例代码

本文链接: https://www.lsjlt.com/news/150558.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 利用OpenLayer绘制扇形的示例代码
    目录创建openlayers地图绘制扇形方法我在网上看了很多说是绘制扇形的方法,但是我用的时候都不是很好玩,所以说呢,我自己整理了一下,符合了我想要的效果,尽管我能力有限,还是决定分...
    99+
    2024-04-02
  • 如何利用OpenLayer绘制扇形
    今天小编给大家分享一下如何利用OpenLayer绘制扇形的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。创建openlayer...
    99+
    2023-06-30
  • WPF实现绘制扇形统计图的示例代码
    扇形统计图 绘制一个扇形原理也是基于Canvas进行绘制;ArcSegment[1]绘制弧形;绘制指示线;绘制文本;鼠标移入动画;显示详情Popup;源码Github[2] ...
    99+
    2024-04-02
  • Python利用Turtle绘制Technoblade的示例代码
    在刚过去不久的6月30日那天,国外一位在YouTube拥有上千万粉丝的我的世界游戏主播Technoblade因癌症与世长辞,年仅23岁,他并没有离开我们,只是用另外一种方式活在了这个...
    99+
    2023-01-06
    Python Turtle绘制Technoblade Python 绘制Technoblade Python Turtle
  • 利用Pygame绘制圆环的示例代码
    目录三角函数弧度和角度的关系基本包和事件捕捉主程序全部代码三角函数 如果我们以OP作为圆的半径r,以o点作为圆的圆心,圆上的点的x坐标就是r * cos a ,y坐标就是 r * ...
    99+
    2024-04-02
  • OpenCV绘制圆端矩形的示例代码
    目录功能函数测试代码测试效果本文主要介绍了OpenCV绘制圆端矩形的示例代码,分享给大家,具体如下: 功能函数 // 绘制圆端矩形(药丸状,pill) void DrawPill...
    99+
    2024-04-02
  • Python+turtle绘制对称图形的示例代码
    目录1.图12.图23.图34.图45.图56.图6最近有个朋友,想要我帮忙用python画几个图,在画的过程中觉得有些图还挺有意思的,分享给大家。 1.图1 第一个图是由三角形组成...
    99+
    2024-04-02
  • WPF实现绘制3D图形的示例代码
    目录关键概念视口相机光源材质3D对象命中测试(鼠标交互)3D对象中2D控件渲染外部导入3D模型WPF的3D功能可以在不编写任何c#代码的情况下进行绘制,只需要使用xaml即可完成3D...
    99+
    2023-03-02
    WPF绘制3D图形 WPF 3D图形 WPF 3D
  • 利用Matlab绘制各类特殊图形的实例代码
    Matlab绘图介绍 强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为...
    99+
    2024-04-02
  • 利用Matlab绘制有趣图像的示例代码
    目录1.随机樱花树2.苹果绘制3.南瓜绘制4.一堆三角形绘制5.月饼绘制6.大钻石绘制7.有趣曲线18.有趣曲线29.有趣曲线3——蝴蝶曲线10.有趣曲线4&...
    99+
    2024-04-02
  • Python实现动态条形图绘制的示例代码
    目录动态条形图变动态柱状图指定排序方式限制条目数设置固定条目固定数值轴,使其不发生动态变化设置图像帧数,默认 10 帧设置帧率,单位时间默认为 500ms设置每帧增加的标签时间,默认...
    99+
    2024-04-02
  • 利用JavaScript实现绘制2023新年烟花的示例代码
    目录前言烟花效果展示使用教程查看源码HTML代码CSS代码JavaScript新年祝福前言 大家过年好!新春佳节,在这个充满喜悦的日子里,愿新年的钟声带给你一份希望和期待,我相信,时...
    99+
    2023-01-28
    JavaScript绘制新年烟花 JavaScript新年烟花 JavaScript烟花
  • Android利用贝塞尔曲线绘制动画的示例代码
    目录彩虹系列弹簧动画复杂立体感动画总结前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美。好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借...
    99+
    2024-04-02
  • Python绘制灯笼的示例代码
    目录一、效果展示二、代码展示三、拓展一年一度的元宵节刚刚过去,由于时间关系,在元宵节当天晚上11点多才完成本文灯笼的绘制。这两天又在忙着别的事情,所以现在才跟大家分享。 一、效果展示...
    99+
    2024-04-02
  • Python绘制时钟的示例代码
    目录导入需要的包设置变量写数字绘制时针完整代码导入需要的包设置变量 from datetime import datetime from pygame.locals import *...
    99+
    2024-04-02
  • Python利用cv2动态绘制圆和矩形的示例详解
    新手,参考了以下链接: python opencv在图像上画矩形(已验证) 本文可以实现在指定图片上动态绘制圆和矩形。 import cv2 import numpy as np i...
    99+
    2023-03-23
    Python cv2绘制圆 矩形 Python cv2绘制圆 Python cv2绘制矩形 Python cv2
  • OpenCV 绘制同心圆的示例代码
    目录功能函数测试代码最近在学习OpenCV,本文主要介绍了OpenCV 绘制同心圆的示例代码,分享给大家,具体如下: 功能函数 // 绘制同心圆 void DrawConcent...
    99+
    2024-04-02
  • Python利用matplotlib.pyplot.boxplot()绘制箱型图实例代码
    目录一、matplotlib.pyplot.boxplot()语法二、绘制箱型图①绘制简单箱型图②各个参数绘制箱型图(1)notch参数(bool值,是否凹口的形式展现箱线图,默认值...
    99+
    2024-04-02
  • 基于Cesium绘制栅栏的示例代码
    目录最终效果创建 dynamicWallMaterialProperty.js 文件网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方...
    99+
    2024-04-02
  • JS+CSS绘制棋盘格的示例代码
    目录实现思路完整代码效果展示在这篇文章中,我将展示如何使用 css 和一些 JavaScript 来设计棋盘。 为此,你需要对 CSS Flex-box 和 nth-child() ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作