由于我的业务需求是可以在底图上进行一些操作，比如绘制电子围栏等功能，于是需要使用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. Spring框架spring-web模块中的RestTemplate类详解

    RestTemplate类是spring-web模块中进行HTTP访问的REST客户端核心类.RestTemplate请求使用阻塞式IO,适合低并发的应用场景. 1. RestTemplate类提供了 ...

  2. Eureka配置

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

  3. SpringCloud之Eureka详细的配置

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

  4. class net.sf.cglib.core.DebuggingClassWriter overrides final method visit

    在使用CGLIB进行动态代理的时候,报了[java.lang.VerifyError: class net.sf.cglib.core.DebuggingClassWriter overrides f ...

  5. 在 EF Core 中 Book 实体在新增、修改、删除时，给 LastUpdated 字段赋值。

    直接贴代码: public class MenusContext : DbContext { public static class ColumnNames { public const string ...

  6. Rust从入门到放弃（1）—— hello，world

    安装及环境配置 特点:安全,性能,并发 rust源配置 RLS安装 cargo rust管理工具,该工具可以愉快方便的管理rust工程 #!/bin/bash mkdir learn cd learn ...

  7. 利用 Symbol Type Viewer 工具实现将 pdb 文件 转换为 c\c++ 头文件

    利用 Symbol Type Viewer 工具实现将 pdb 文件 转换为 c\c++ 头文件 一.得到符号 二.将符号转换为 .h 文件 三.得到 c\c++ 头文件,之后编程时直接导入这个文件即 ...

  8. 使用T4模板同时生成多个类文件

    代码: <#@ template language="C#" debug="false" hostspecific="true"#&g ...

  9. 页面直接导出为PDF文件，支持分页与页边距

    将WEB页面直接导出为pdf文件是经常会用到的一个功能,尤其是各种报表系统.总结了一下目前几种主流的做法: 在后端用代码生成pdf文件,比如iText一类: 在后端抓取页面并生成pdf文件,比如pha ...

  10. jmeter入门操作 = 录制

    没安装工具的朋友请先看:https://www.cnblogs.com/cainiaoxiansheng/p/11007754.html 软件装好,功能了解好,那么就开始进入正题,先来一波录制 不要鄙 ...