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

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

openlayers绘制点，线，圆等的更多相关文章

  1. OpenLayers绘制图形

    OpenLayers绘制图形   OpenLayers的显示构成由外向内为: ol.Map:地图对象. ol.layer.Vector:图层对象layer.Map含有多个layer,最终的显示效果是由 ...

  2. Tableau绘制K线图、布林线、圆环图、雷达图

    Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...

  3. 【带着canvas去流浪（5）】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  4. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  5. 【九天教您南方cass 9.1】 07 绘制与标注圆曲线和细部点的方法

    同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...

  6. CAD交互绘制样条线（网页版）

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  7. CAD交互绘制样条线（com接口）

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  8. CAD参数绘制样条线（com接口）

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定位置.详细说明如下: 参数 说明 DOUBL ...

  9. CAD参数绘制样条线（网页版）

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定位置.详细说明如下: 参数 说明 DOUBL ...

随机推荐

  1. Python之爬虫-校花网

    Python之爬虫-校花网 #!/usr/bin/env python # -*- coding:utf-8 -*- import re import requests # 拿到校花网主页的内容 re ...

  2. CSP-J&S2019第一轮认证游记

    Day-0 晚上和高一大佬BH聊了聊,感觉大佬第一次参加比赛毕竟还是有点慌QAQ,毕竟我这么菜的人都没慌过. 做了一套模拟题,用45分钟瞎打的提高组卷子得了62分,还不错,正式比赛用2个小时好好答的话 ...

  3. [转]python中np.multiply（）、np.dot（）和星号（*）三种乘法运算的区别

    转自https://blog.csdn.net/zenghaitao0128/article/details/78715140 为了区分三种乘法运算的规则,具体分析如下: import numpy a ...

  4. [算法模版]子序列DP

    [算法模版]子序列DP 如何求本质不同子序列个数? 朴素DP 复杂度为\(O(nq)\).其中\(q\)为字符集大小. \(dp[i]\)代表以第\(i\)个数结尾的本质不同子序列个数.注意,这里对于 ...

  5. 强大的性能监测工具dstat

    强大的性能监测工具dstat 本节分为以下几个部分: dstat介绍: dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一个全能系 ...

  6. Debug 路漫漫-15：Python: NameError：name 'dataset' is not defined

    在调试 <Outer Product-based Neural Collaborative Filtering>论文的源码(https://github.com/duxy-me/ConvN ...

  7. 06Shell并发控制

    并发控制 文件描述 文件句柄 File Descriptors (FD,文件描述符)或 文件句柄: 进程使用文件描述符来管理打开的文件 注意 1.如何通过exec打开一个文件 exec 数字<& ...

  8. git操作记录（如何回退到某个历史版本，如何提交部分文件等方法）

    当前项目使用git管理代码,在使用的过程中会遇到一些问题,这里记录下 1.合并代码后 在合并组员的代码后会出现下面的界面,开始的时候都会关闭,重新打开,乐此不疲到忍无可忍 解决方法: 出现这种界面是要 ...

  9. servlet中的IllegalStateException

    IllegalStateException在java web开发中比较常见,IllegalStateException的根本原因是java servlet在提交响应后,还尝试写内容. 所以避免Ille ...

  10. Java使用路径通配符加载Resource与profiles配置使用

    序言 Spring提供了一种强大的Ant模式通配符匹配,能从一个路径匹配一批资源. Ant路径通配符 Ant路径通配符支持“?”.“*”.“**”,注意通配符匹配不包括目录分隔符“/”: “?”:匹配 ...