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

最新推荐文章于 2024-04-12 14:12:11 发布

原创

最新推荐文章于 2024-04-12 14:12:11 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#onclick 源码

本教程详细介绍了如何在OpenLayers6中利用onclick事件实现扇形的绘制，包括具体的实现过程、HTML样式和核心代码展示。提供完整的源码demo下载链接，适合GIS开发初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

内容概览

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

效果图如下：

具体实现过程

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=