openlayers5绘制点线面圆.zip_openlayer绘制点线面,openlayers添加点线面资源-CSDN文库

共5个文件

map：2个

html：1个

js：1个

需积分: 50 19 浏览量 2019-08-01 21:55:44 上传评论 1 收藏 862KB ZIP 举报

OpenLayers 是一个流行的开源JavaScript库，用于在网页中创建交互式地图。OpenLayers 5 提供了丰富的功能，包括加载不同地图服务、叠加图层、以及动态绘制地图元素，如点、线、面和圆。这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目，演示如何在OpenLayers 5中实现这些绘制功能。在OpenLayers 5中，我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。你需要创建一个Draw交互实例，指定要绘制的几何类型，例如`'Point'`、`'LineString'`、`'Polygon'`或`'Circle'`。以下是一个简单的例子： ```javascript var draw = new ol.interaction.Draw({ source: vectorSource, // 指定数据源，用于存储绘制的几何对象 type: 'Point', // 或 'LineString', 'Polygon', 'Circle' 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' }) }) }) }); ``` 地图视图（`ol.Map`）需要添加这个交互，以便用户可以开始在地图上绘制： ```javascript map.addInteraction(draw); ``` 当用户完成绘制后，你可以监听`drawend`事件来获取绘制的几何对象，并执行相应的操作，比如将其保存到服务器： ```javascript draw.on('drawend', function(event) { var feature = event.feature; console.log(feature.getGeometry()); // 打印绘制的几何对象 // 这里可以进行保存、显示等操作 }); ``` 为了提供更丰富的用户体验，你还可以添加控制来允许用户切换不同的绘制模式。例如，你可以创建一个按钮组，每个按钮对应一种绘制类型，点击按钮时改变Draw交互的类型： ```javascript var drawTypes = ['Point', 'LineString', 'Polygon', 'Circle']; var drawControl = document.getElementById('draw-control'); drawTypes.forEach(function(type) { var button = document.createElement('button'); button.textContent = type; button.addEventListener('click', function() { draw.setType(type); }); drawControl.appendChild(button); }); ``` 在提供的"openlayers5draw"文件中，你可能会看到一个HTML文件和相关的JavaScript代码，它们将这些概念结合在一起，展示了一个完整的OpenLayers 5绘制示例。通过学习这个示例，你可以了解到如何在实际项目中集成这些功能，让用户在地图上自由绘制，从而实现地图标注、地理分析等多种应用场景。 OpenLayers 5 提供了强大的地图绘制能力，允许开发者轻松地在Web应用中创建交互式地图，并且支持自定义样式和多种几何类型，极大地扩展了地图的可用性。通过深入理解这些概念并实践，你可以构建出具有高度可定制性和灵活性的地图应用。

资源推荐

资源详情

资源评论

收起资源包目录

openlayers5draw.zip （5个子文件）

openlayers5draw

ol.css.map 2KB

draw.html 2KB

ol.css 4KB

ol.js 639KB

ol.js.map 3.36MB

<!DOCTYPE html> <html> <head> <title>Draw Features</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <style> .map { height: 485px; width: 100%; } </style> <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <form class="form-inline"> <label>Geometry type  </label> <select id="type"> <option value="Point">Point</option> <option value="Circle">Circle</option> <option value="None">None</option> </select> </form> <script> var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var source = new ol.source.Vector({wrapX: false}); var vector = new ol.layer.Vector({ source: source }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var typeSelect = document.getElementById('type'); var draw; // global so we can remove it later function addInteraction() { var value = typeSelect.value; if (value !== 'None') { draw = new ol.interaction.Draw({ source: source, type: typeSelect.value }); map.addInteraction(draw); } } /** * Handle change event. */ typeSelect.onchange = function() { map.removeInteraction(draw); addInteraction(); }; addInteraction(); </script> </body> </html>

评论收藏

内容反馈