openlayers绘制点,线,圆等
Posted ldlx-mars
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了openlayers绘制点,线,圆等相关的知识,希望对你有一定的参考价值。
由于我的业务需求是可以在底图上进行一些操作,比如绘制电子围栏等功能,于是需要使用openlayers中的画笔功能,接下来开始一波操作
还是上一篇的html页面, 直接上代码
<!doctype html> <html lang="en"> <head> <script src="./js/ol.js"></script> <link rel="stylesheet" href="./js/ol.css" type="text/css"> <style> .map { height: 80vh; width: 100%; border: 1px solid red; } </style> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <label>Geometry type </label> <select id="type"> <option value="Point">Point</option> <option value="LineString">LineString</option> <option value="Polygon">Polygon</option> <option value="Circle">Circle</option> <option value="None">None</option> </select> <div id="map" class="map"></div> <script type="text/javascript"> //地图设置中心,设置到成都,在本地离线地图offlineMapTiles刚好有一张zoom为4的成都瓦片 var center = ol.proj.transform([104.06667, 30.66667], ‘EPSG:4326‘, ‘EPSG:3857‘); //计算静态地图映射到地图上的范围,图片像素为550*344,保持比例的情况下,把分辨率放大一些 var extent = [ center[0] - 2718 * 1000 / 2, center[1] - 2327 * 1000 / 2, center[0] + 2718 * 1000 / 2, center[1] + 2327 * 1000 / 2 ]; var map = new ol.Map({ target: ‘map‘, view: new ol.View({ center: center, zoom: 8, minZoom: 5, maxZoom: 12 }) }); //加载静态图层 map.addLayer(new ol.layer.Image({ source: new ol.source.ImageStatic({ url: ‘./images/logo2.png‘, // 静态地图 imageExtent: extent //映射到地图的范围 }) })); // 添加一个绘制的线使用的layer var drawLayer = new ol.layer.Vector({ //layer所对应的source source: new ol.source.Vector(), }) //把layer加入到地图中 map.addLayer(drawLayer); //先看看选中的画什么,点?线?面?。。 var typeSelect = document.getElementById(‘type‘); var draw; // 在这儿定义一个全局的绘制变量,方便一会去除它 function addInteraction() { var value = typeSelect.value; if (value !== ‘None‘) { draw = new ol.interaction.Draw({ source: drawLayer.getSource(), type: typeSelect.value }); map.addInteraction(draw); } } /** * 处理选中不同的绘制方式的方法,通过监听typeSelect值的变化 */ typeSelect.onchange = function () { //先移除上一个Interaction map.removeInteraction(draw); //再根据typeSelect的值绘制新的Interaction addInteraction(); }; addInteraction(); </script> </body> </html>
然后你会看到如下的界面
鼠标hover进去以后会默认有一个点
说明一下,初始化的图片和上一篇博客的里的图片相比较放大了,是因为图片的宽度别我调了,没有影响的,你们调回正常也是可以的,还有一种可能就是我放大了底图导致的,都是没有影响的
然后你可以先选择上面的下拉框的内容,然后再地图上进行绘制,效果是:
线:
圆:
polygon:
其余的你们可以自己去试试
以上是关于openlayers绘制点,线,圆等的主要内容,如果未能解决你的问题,请参考以下文章