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

最新推荐文章于 2024-01-07 22:22:22 发布

weixin_39928667

最新推荐文章于 2024-01-07 22:22:22 发布

阅读量236

点赞数

文章标签： onclick 源码

本文链接：https://blog.csdn.net/weixin_39928667/article/details/111676595

版权

前言

之前写过一篇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="ol-popup-closer"></a> 
 <div id="popup-content"></div> 
 <

最低0.47元/天解锁文章

weixin_39928667

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onclick 源码_openlayers6绘制扇形(附源码下载)

前言之前写过一篇openlayers4版本的地图绘制扇形文章，但是由于是封装一层 js代码写的，很多初学者看起来比较有点吃力，所以本篇文章重新写一篇地图绘制扇形文章，直接基于最新版本openlayers6写的，纯粹html + js + css形式，没有任何封装。内容概览1.基于openlayers6实现地图绘制扇形2.源代码demo下载效果图如下：具体实现过程html 样式<html&gt...
复制链接

扫一扫