onclick 源码_openlayers6绘制扇形(附源码下载)

最新推荐文章于 2024-04-02 11:06:53 发布
最新推荐文章于 2024-04-02 11:06:53 发布
阅读量243 收藏
点赞数
文章标签： onclick 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39928667/article/details/111676595
版权

75f1e684b86a68a9c575063bb460b40f.png

前言

之前写过一篇openlayers4版本的地图绘制扇形文章，但是由于是封装一层 js代码写的，很多初学者看起来比较有点吃力，所以本篇文章重新写一篇地图绘制扇形文章，直接基于最新版本openlayers6写的，纯粹html + js + css形式，没有任何封装。

内容概览

1.基于openlayers6实现地图绘制扇形
2.源代码demo下载

效果图如下：

c393a738eedb3f935a1bb449fd86f9a9.png

具体实现过程

  • html 样式
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Using OpenLayers with Webpack</title> 
 <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> 
 <style> 
 html, body { 
 margin: 0; 
 height: 100%; 
      } 
 #map { 
 position: absolute; 
 top: 0; 
 bottom: 0; 
 width: 100%; 
      } 
 .ol-popup { 
 position: absolute; 
 background-color: white; 
 -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); 
 filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); 
 padding: 15px; 
 border-radius: 10px; 
 border: 1px solid #cccccc; 
 bottom: 12px; 
 left: -50px; 
 min-width: 280px; 
      } 
 .ol-popup:after, .ol-popup:before { 
 top: 100%; 
 border: solid transparent; 
 content: " "; 
 height: 0; 
 width: 0; 
 position: absolute; 
 pointer-events: none; 
      } 
 .ol-popup:after { 
 border-top-color: white; 
 border-width: 10px; 
 left: 48px; 
 margin-left: -10px; 
      } 
 .ol-popup:before { 
 border-top-color: #cccccc; 
 border-width: 11px; 
 left: 48px; 
 margin-left: -11px; 
      } 
 .ol-popup-closer { 
 text-decoration: none; 
 position: absolute; 
 top: 2px; 
 right: 8px; 
      } 
 .ol-popup-closer:after { 
 content: "✖"; 
      } 
 </style> 
 </head> 
 <body> 
 <div id="map"></div> 
 <div id="popup" class="ol-popup"> 
 <a href="#" id="popup-closer" class="ol-popup-closer"></a> 
 <div id="popup-content"></div> 
 <
最低0.47元/天 解锁文章
weixin_39928667
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
openlayers：实现绘制扇形（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 249
openlayers：实现绘制扇形（附完整源码）
OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆形（半圆扇形）
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-12 290
本章讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制半圆形（半圆扇形）
openlayers 画扇形
weixin_30338461的博客
11-01 530
OpenLayers有一个类: OpenLayers.Geometry.Polygon.createRegularPolygon, 查看源代码定义如下: /** * APIMethod: createRegularPolygon * Create a regular polygon around a radius. Useful for creating circles * and the...
谷歌瓦片地图纠偏
weixin_34106122的博客
08-17 723
对谷歌瓦片地图进行纠偏，有两种方法：一是对拼接大图进行纠偏，然后重新切片；二是直接对瓦片图进行纠偏。这里我用的是第二种方法，即直接对瓦片地图进行纠偏。 App.config配置： <appSettings> <add key="inputPath" value="D:\_临时文件\GISMap\1818940751"/> <add ke...
openlayer 绘制扇形
大家好，我是 ed.
06-02 1472
我比较懒，就不废话了，直接上代码！包我就不复制了，根据官网提供的API自己引用吧！openlayers API地址创建地图
openlayer绘制扇形
weixin_43356511的博客
03-20 1126
openlayer绘制扇形yi.前瞻er.上代码，实战一开始我以为像这种图像的简单绘制，应该很简单，但是自带的API却没有找到，但是他有绘制多边形（Polygon）的接口，那么我们只需要计算出扇形所有的点位就可以了。然后我就开始在草稿纸上绘制草图,经过分析计算点位用初中学到的正弦、余弦就可以搞定san.完整实例（总结）完整代码如上所示，绘制一个扇形很简单有没有？转载请注明出处: [https://blog.csdn.net/weixin_43356511/article/details/123610458]
openlayers3 画扇形
weixin_33910460的博客
11-18 538
参考了http://www.cnblogs.com/lingxue3769/archive/2011/11/01/2231409.html同学的博客 和 百度知道https://zhidao.baidu.com/question/244106942859229564.html同学的回复 我这边修改了下根据点来画 /*** 创建扇形* @param [x,y] center 扇形中心点* @...
OpenLayers中如何画扇形
wang8118的专栏
05-16 5039
项目中用到了地图展示，但是有个需求是根据参数画扇形，但是OpenLayers没有画扇形的现成函数，在某个牛人的帮助下，修改了下源代码便可以了 1，首先在源码中加入以下代码，最好是在OpenLayers.Geometry.Polygon.createRegularPolygon这个函数的源代码后面加入： //参数分别是圆心，半径，边数，弧度，旋转角度（即右边半径与x正向轴的角度）OpenLa
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制扇形，OpenLayers绘制特殊殊图形四分之一圆
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-02 439
本章讲解使用OpenLayers实现绘制扇形，绘制特殊殊图形扇形（也即：四分之一圆）的功能。本章代码是在绘制圆形的基础上扩展修改而成：圆形绘制可以参考：《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形。
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
内容概要：通过带着读者手写openlayers6 绘制扇形及环形，了解 地图容器核心原理。在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，工作1-3年的web前端或webGIS研发人员 能学到什么：①vue3+vite；②地图容器相关知识。 阅读建议：此资源以开发绘制扇形及环形学习其原理地图容器，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
openlayers3各种元素图形绘制
11-02
openlayers3 各种特殊图形绘制：进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击
根据坐标得到天地图、谷歌地图对应瓦片
01-30
根据输入坐标，得到天地图和谷歌地图的瓦片
openlayers学习——8、openlayers画图形
记录生活点滴
01-13 1262
openlayers画图形 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index
238：vue+openlayers 绘制扩展，弓形、曲线、扇形、双箭头、进攻方向...
大剑师兰特的GIS世界
05-16 1285
第238个本示例的目的是介绍演示如何在vue+openlayers中利用ol-plot插件进行绘制图形扩展，可以绘制弓形、弧形、标志旗、战斗进攻图形等等。
如何对谷歌地图的火星坐标进行纠偏校正
08-14 5149
一、为什么要纠偏？ 针对中国用户而言，我们可以下载的谷歌卫星地图数据有两种。一种是从国外服务器（map.google.com）下载，坐标准确无偏移，但道路和地名等信息只到第12级；另一种是从国内服务器（map.google.cn）下载，道路和地名信息非常详细，但坐标有偏移，也就是大家俗称的“火星坐标”。 如果我们只需要下载卫星地图，并不关注道路和地名信息，那么直接从国外服务器下载就可以了，但如
谷歌地图有偏离和无偏离
跃然实验室
11-24 2164
谷歌地图有偏离和无偏离 谷歌的影像地图分为两类，一类是谷歌地球（Google Earth），一类是谷歌地图（Google Map），其中谷歌地球又分为谷歌地球的影像和谷歌高程，谷歌地图又分为谷歌卫星、谷歌电子和谷歌地形，各种地图有无偏移见图。 高德地图，高德地图分为高德卫星和高德电子地图，这两种图都是无偏移的地图 天地图系列地图包括天地图卫星、天地图电子和天地图地形，这几种图都是没有偏移...
在openlayer中对瓦片地图进行平移
张大仙的博客
06-07 951
失踪人口回归。 这次给大家介绍的是在openlayer中对在线瓦片地图进行平移。可以解决将高德/百度瓦片地图的偏移问题。 适用的场景：当某个在线瓦片地图的坐标系与我们需要的底图坐标系不同，我们很难对每一幅瓦片都使用特定的算法进行坐标修正再进行显示。比较方便的一种方法是对地图的所有瓦片进行平移，（然后在心里认为坐标已经纠正了）。 由于地球是个球体，地理学家为了方便的将球体上的地物在平面中展示，提出了各种投影坐标系，也就是由xy组成的平面坐标系，对我们中国的用户来说，看的比较多的就是类似于[12605635.2
leaflet瓦片服务偏移排查及自定义坐标系
LGi_ser的博客
08-28 1528
leaflet瓦片服务偏移排查及自定义坐标系 leaflet瓦片偏移问题排查： 1.检查瓦片服务的坐标系是否和地图容器的一致； 2.检查瓦片服务的层级分辨率是否和地图容器一致； 以上两种情况都可以通过设置地图的crs来解决。 自定义坐标系 1.安装proj4 proj4leaflet两个依赖 npm i proj4 proj4leaflet --save 2.在vue中引入插件 import 'leaflet/dist/leaflet.css' import * as L fr
无偏移谷歌瓦片地址_[转]OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
weixin_39858245的博客
12-19 915
开源与成熟商业的瓦片地图服务(TMS2WMTS)，都有如下共同的特性，基本成为了标准：(1) 坐标系：WGS84(2) 投影：墨卡托投影(Marcator，正轴等角圆柱投影)--------------------------------------------注：均为弧度。(3) 当经度范围在[-180,180]，投影为正方形时，纬度范围：[-85.05113, 85.05113](4)...
openlayers地图旋转_Openlayers实现地图全屏显示
06-08
要实现Openlayers地图的全屏显示，可以使用浏览器提供的Fullscreen API来实现。具体步骤如下： 1. 创建一个按钮或者一个链接，用于触发全屏显示。 2. 绑定该按钮或链接的点击事件，在事件处理函数中调用地图对象的requestFullscreen()方法，请求浏览器进入全屏模式。 3. 监听Fullscreen API的fullscreenchange事件。当该事件被触发时，检查当前是否处于全屏模式。如果是，则设置地图的尺寸为浏览器窗口的尺寸。 下面是一个实现Openlayers地图全屏显示的示例代码： ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ // 添加地图图层 new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ // 设置地图中心点和缩放级别 center: ol.proj.fromLonLat([120, 30]), zoom: 10 }) }); // 创建全屏按钮 var fullscreenBtn = document.createElement('button'); fullscreenBtn.innerText = '全屏'; // 点击按钮进入全屏模式 fullscreenBtn.addEventListener('click', function() { if (document.fullscreenElement) { document.exitFullscreen(); } else { map.getTargetElement().requestFullscreen(); } }); // 监听Fullscreen API的fullscreenchange事件 document.addEventListener('fullscreenchange', function() { if (document.fullscreenElement) { // 进入全屏模式时设置地图大小为浏览器窗口大小 map.setSize([window.innerWidth, window.innerHeight]); } else { // 退出全屏模式时恢复地图原来的大小 map.setSize([500, 500]); } }); // 将按钮添加到页面中 document.body.appendChild(fullscreenBtn); ``` 该示例代码中创建了一个地图对象，并添加了一个OpenStreetMap图层。然后创建了一个全屏按钮，点击该按钮可以进入或退出全屏模式。最后监听了Fullscreen API的fullscreenchange事件，在事件处理函数中设置了地图的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值