22-openlayers绘制图形画点线面正方形长方形圆多边形

最新推荐文章于 2024-07-01 16:34:57 发布
最新推荐文章于 2024-07-01 16:34:57 发布
阅读量42 收藏
点赞数
分类专栏： OpenLayers中文教程零基础到精通 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxshy/article/details/139071361
版权
本文介绍了如何利用JavaScript库OpenLayers在地图上绘制各种几何图形，包括点、线、面、正方形、长方形、圆形以及多边形。通过实例代码详细展示了图形绘制的过程。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>绘制图形</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
      #mapCon {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 地图容器 -->
    <div id="mapCon">
      <button onclick="addInteraction('Point')">点</bu
了解本专栏 订阅专栏 解锁全文 超级会员免费看
fxshy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers6特殊图形绘制教程目录汇总文档，使用OpenLayers画点、线、曲线、多边形、圆形、半圆、椭圆、圆环、环形扇形、三角形、矩形、平行四边形、梯形、菱形、五角星、六角形和箭头等
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-12 620
本章用于汇总OpenLayers地图中各种特殊图形绘制系列汇总目录。内容包含：点、线、多边形、圆形、半圆、四分之一圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、正方形、长方形、平行四边形、梯形、菱形、五角星、六角形（六芒星）以及箭头等等特殊图形。
openlayers在线绘制
08-24
在线绘制折线，多边形，并且返回相应的绘制后坐标，进行3857或4326坐标转换
openlayers-07-交互式绘制-绘制图形
chuanren1991的博客
05-15 265
openlayers交互式绘制-绘制图形。
OpenLayers实现交互绘制点线面
qq_28816581的博客
04-03 2325
一、窗体实现 控件代码（CSS样式自行设计） <div class="draw-polygon"> <label style="font-weight: bold;"> 几何图形类型： </label> <select id="type"> <option value="None" selected="selected">无</option> <option
【openlayers系统学习】1.4 交互-绘制新要素
weixin_45213317的博客
05-21 198
通过创建Draw交互对象并配置为绘制多边形，并将绘制的要素添加到矢量源中，用户可以在地图上绘制新的几何图形。
8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-01 5429
本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。最后，我们提供了清空绘制和退出绘制模式的操作。
openlayers5绘制点线面圆.zip
08-01
这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目，演示如何在OpenLayers 5中实现这些绘制功能。 在OpenLayers 5中，我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。首先，你需要...
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-14 2061
通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-26 334
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
Openlayers实现图形绘制
10-14
主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers画轨迹
12-29
openlayers画轨迹功能，实现动态回访
openlayers3各种元素图形绘制
11-02
openlayers3 各种特殊图形绘制：进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击
openLayers使用笔记（绘制几何图形）
一天无聊
05-26 962
【代码】openLayers使用笔记（绘制几何图形）
vue+openlayers之几何图形交互绘制基础与实践
最新发布
whs15193553607的博客
07-01 811
绘制点、线、多边形、圆、正方形、长方形。
Openlayers实战：绘制点、线、圆、多边形
大剑师兰特的GIS世界
07-06 745
Openlayers地图中，绘制图形是非常重要的一个功能。Openlayers主要使用draw类来绘制图形，在实际项目中经常会绘制点、线、多边形、矩形等。下面的示例是绘制点、线、圆形、多边形。
Openlayers案例7——加载比例尺控件
peanut2的博客
01-28 388
1. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载比例尺控件</title> <link rel="stylesheet" href="openlayer
OpenLayers快速入门指南，OpenLayers7官方文档翻译，OpenLayers官方中文文档，OpenLayers官方中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-28 2544
OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门
OpenLayers 实现画点、画线、画面、画圆
L221545的博客
11-08 863
OpenLayers 实现画点、画线、画面、画圆
openlayers绘制点线面
05-02
OpenLayers是一个开源的JavaScript库，用于在Web上渲染交互式地图。它提供了丰富的功能和API，允许用户在地图上添加各种不同的元素，包括点、线和面。 以下是OpenLayers绘制点、线和面的基本步骤： 1. 创建地图对象 使用OpenLayers创建一个地图对象，设置地图中心点和缩放级别。 2. 创建矢量图层 使用OpenLayers创建一个矢量图层，并将其添加到地图中。 3. 创建要素 使用OpenLayers创建一个要素对象，可以是点、线或面。 4. 绘制要素 使用OpenLayers提供的绘制工具，将要素添加到矢量图层中。可以通过鼠标交互或代码方式来进行绘制。 5. 渲染地图 将地图渲染到页面上，可以使用OpenLayers提供的默认样式，也可以自定义样式。 下面是一个简单的示例代码，演示如何使用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([116.38, 39.9]), zoom: 10 }) }); // 创建矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vectorLayer); // 创建要素 var point = new ol.geom.Point(ol.proj.fromLonLat([116.38, 39.9])); var line = new ol.geom.LineString([ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9])]); var polygon = new ol.geom.Polygon([[ ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9]), ol.proj.fromLonLat([116.4, 39.92]), ol.proj.fromLonLat([116.38, 39.92]), ol.proj.fromLonLat([116.38, 39.9]) ]]); // 绘制要素 var pointFeature = new ol.Feature(point); var lineFeature = new ol.Feature(line); var polygonFeature = new ol.Feature(polygon); vectorLayer.getSource().addFeatures([pointFeature, lineFeature, polygonFeature]); // 渲染地图 map.render(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值