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

    网页爬取 1.requests 2.BeautifulSoup 3.Scrapy 科学计算与数据分析 1.scipy 2.numpy 3.pandas 机器学习和深度学习 1.Scikit-learn ...

  2. sessionStorage 、localStorage 、 cookie 和session之间的区别

    四者的异同 特性 Session   Cookie localStorage sessionStorage 数据的生命期   在一定时间内保存在服务器上.当访问增多,会比较占用你服务器的性能,考虑到减 ...

  3. VBA实战 - 一个简单的 httplib

    概要 VBA 的应用场景基本都还是在单机应用, 随着 Web 应用的风靡, 以及浏览器越来越强大, 单机类的应用逐渐没落. 虽然 Web 应用越来越多, 功能和体验也越来越好, 但是 Excel 依然 ...

  4. 解决 ubuntu 开机卡死在输入密码界面 && 键盘鼠标失灵！!

    近期不知安装了什么package,导致 ubuntu 开机后键盘鼠标一直没法用,刚开始以为是 ubuntu 桌面环境崩溃了,后来发现系统能显示连接到网络.时间也在运行,那应该就是键盘鼠标失灵了. 网上 ...

  5. STS 创建 Maven 项目填坑

    用 STS 创建 Maven 项目并不复杂,只是其中有一些坑在里面,我在解决这些坑的时候发现很多人都遇到了相同的问题,因此把创建的步骤记录在这里.所有的步骤不外乎就是一些套路,并没有什么复杂的地方,只 ...

  6. Eureka配置

    介绍 SpringCloud是一个完整的微服务治理框架,包括服务发现和注册,服务网关,熔断,限流,负载均衡和链路跟踪等组件. SpringCloud-Eureka主要提供服务注册和发现功能.本文提供了 ...

  7. Kubernetes 弹性伸缩全场景解析（三） - HPA 实践手册

    在上一篇文章中,给大家介绍和剖析了 HPA 的实现原理以及演进的思路与历程.本文我们将会为大家讲解如何使用 HPA 以及一些需要注意的细节. autoscaling/v1 实践 v1 的模板可能是大家 ...

  8. 编译 datax

    datax 是阿里巴巴官方开源的一个数据同步工具,可以用于诸多数据源之间的同步,并且使用简单.效率高. datax 官方有提供编译好的版本,可以直接下载,但是其中包含有 BUG. 我最近遇到的一个问题 ...

  9. ASP.NET 中关GridView里加入CheckBox 在后台获取不到选中状态的问题

    <!-- 在GridView里添加CheckBox选择控件 !--> <ItemTemplate> <asp:CheckBox ID="CheckBox&quo ...

  10. sql基础语句50条

    curdate() 获取当前日期 年月日 curtime() 获取当前时间 时分秒 sysdate() 获取当前日期+时间 年月日 时分秒 */ order by bonus desc limit ( ...