openlayers实现画圆

最新推荐文章于 2024-03-19 16:30:44 发布
VIP文章 最新推荐文章于 2024-03-19 16:30:44 发布
阅读量915 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/lzugis/p/6539822.html
版权

概述：

本文讲述如何在openlayers中实现画圆。


效果：



实现思路：

1、画中心点

通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。

2、移动鼠标设置半径

画点结束后，激活地图的鼠标移动事件，获取圆心到鼠标点的距离，并画圆，将结果展示到地图上。

3、点击地图结束绘制

点击地图，结束绘制，将最终结果展示到地图上，并停止地图的鼠标移动事件。


实现代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>china EPSG:4326 image/png</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>
    <style type="text/css">
        body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
        body { border: 0px; margin: 0px; padding: 0px; }
        #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
        .query-box{
            position: absolute;
最低0.47元/天 解锁文章
weixin_30808575
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Openlayers实现图形绘制
10-14
主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-01 4436
本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。最后，我们提供了清空绘制和退出绘制模式的操作。
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
大家好，我是 ed.
06-17 2692
这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以 r 为半径绘制，不是鼠标手动绘制。首先绘制圆，首先有一个数据源和一个图层来存放绘制的圆形，这个很简单。然后创建变量自己该就可以，我估计都搞openlayer了，这些基础应该不至于不知道，我这边就写关键代码，我想应该没问题，我用的是默认3857坐标，不是4326。 好的，通过上面的代码实现了创建一个图层在地图上来放置绘制的圆形。接下来就是向这个数据源去添加圆形，这个呢，还是嘛，和我之前写的博客差不多，那几部分相互嵌套，我还是把图在贴
Openlayers 根据坐标点画点线圆多边形
最新发布
m0_58846287的博客
03-19 457
/ 绘制圆形 [[13402105.463638451,4313876.565330492],[13407761.803731553,4316322.550235618],[13404589.66705772,4319418.249881168],[13401914.371067738,4316475.424292188]])alert(“圆形：”+geom.getCenter()+“,”+geom.getRadius());//向地图中添加点击处理程序以呈现弹出式窗口。’+“坐标系：”+’’+’
openlayers根据半径绘制圆形，多圆连线并标记距离
大家好，我是 ed.
08-24 1638
其实这个效果很好实现的，之前有几篇博文呢，关于 openlayers 根据半径绘制圆形，根据经纬度坐标绘制连线啥的都有涉及过，所以说如果要想实现今天想做的功能拼接一下就可以了，做一个快乐的代码裁缝。
openlayers绘制范围圆
ANNENBERG的博客
08-11 240
drawCircleByStation参数是坐标【lng,lat】
openlayers6绘制点线面圆
xiaonankeji的博客
11-12 2089
gis中点线面的绘制是常用功能。一般在交通项目中会用来绘制限行区，公安项目会用来绘制辖区，以及在资源搜索时，会用到点选、圈选、多边形选等。 1、HTML——用到了iview框架的下拉框组件 <template> <div class="box"> <div class="operation"> <Dropdown style="margin-left: 15px" trigger="click" @on-click
openlayers 在地图上绘制三角形、矩形、扇形、圆形、半圆、空心圆环等图形
sea9528的博客
12-04 3675
Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。
Openlayers 教程 09 - 以单位米为半径，绘制圆形图形要素
linzi19900517的博客
08-21 1123
Openlayers 教程 - 以单位米为半径，绘制圆形图形要素。
Openlayers实现测量功能
10-14
主要为大家详细介绍了Openlayers实现测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers实现地图弹窗
10-14
主要为大家详细介绍了openlayers实现地图弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于openlayers实现角度测量功能
10-14
主要为大家详细介绍了基于openlayers实现角度测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers + Vue 设置feature的icon以及圆角矩形文本框
pinkling的博客
04-02 5674
效果图 代码: <template> <section style="display: flex"> <section style="height: 600px; width: 1200px;border: 1px red solid; margin: 10px 10px 10px 50px;"> <sectio...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9418
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
OpenLayers画点、画圆、画线方法
热门推荐
qq_44220795的博客
03-03 1万+
文章目录准备工作项目搭建画地图画圆更改Style画点画线 准备工作 项目搭建 创建Vue项目 vue create OpenLayers 安装openlayers包，在package,.json中添加 "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "ol": "^6.4.3" 👈添加这个 }, 命令行安装 npm i 画地图 导入要用的包 impo
Openlayers实战，Openlayers如何设置米作为作为圆形的真实半径，解决圆形半径跟随地图缩放同时缩放的失真问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-01 1233
相信找到这篇文章的同学肯定遇到了Openlayers直接设置圆形半径（ radius）单位不准确的问题，而且失真严重。这是因为默认圆形半径设置的是浏览器像素大小，而不是真实地理信息中的半径长度。那么怎么进行转换成我们现实中的“米”这个单位呢，接着往下看就知道了。
openlayer 绘制点，线，面（多边形），圆。获得坐标数据。地图信息编辑器。
PrimaryColor
02-01 1727
【代码】openlayer 绘制点，线，面（多边形），圆。获得坐标数据。地图信息编辑器。
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
老胡的CSDN博客
12-23 3374
引言 OpenLayers可以通过代码绘制多种几何形状，也可以通过draw类型的交互组件绘制几何形状，官方实例提供了类如圆、折线、矩形、星形等方法。除此之外，椭圆这种图形其实也是非常常见的几何图形，但是官方没有提供现成的API，本文从使用代码绘制和交互绘制两种途径详细讲解一下椭圆的绘制。 一点理论基础 众所周知，OGC提供的标准geometry类型只有点、线、面以及它们的组合，并没有圆和...
openlayers画圆
08-23
您可以使用OpenLayers的`Circle`类来绘制圆形。下面是一个示例代码： ```javascript // 创建地图 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([0, 0]), zoom: 2, }), }); // 创建圆形要素 var circle = new ol.Feature({ geometry: new ol.geom.Circle( ol.proj.fromLonLat([0, 0]), 1000000 // 半径（单位为米） ), }); // 创建图层并添加圆形要素 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [circle], }), }); map.addLayer(vectorLayer); ``` 在上述示例中，我们首先创建了一个地图，并使用OpenStreetMap作为底图。然后，我们创建了一个圆形要素，并设置其几何属性为一个圆形，指定中心点坐标和半径。最后，我们将圆形要素添加到一个矢量图层中，并将该图层添加到地图中。 您可以根据自己的需求调整圆形要素的属性，如中心点坐标、半径、样式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值