openlayers绘制点，线，圆等

2019-10-31 16:01:08 阅读：261 来源： 互联网

标签：map ol center source openlayers var new 绘制

由于我的业务需求是可以在底图上进行一些操作，比如绘制电子围栏等功能，于是需要使用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 &nbsp;</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：

其余的你们可以自己去试试

标签：map,ol,center,source,openlayers,var,new,绘制
来源： https://www.cnblogs.com/ldlx-mars/p/11771733.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

openlayers绘制点，线，圆等