由于我的业务需求是可以在底图上进行一些操作，比如绘制电子围栏等功能，于是需要使用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. golang实战--家庭收支记账软件（面向过程）

    1.开发流程 2.目标 模拟实现一个基于文本界面的(家庭记账软件) : 初步掌握编程技巧和调试技巧: 主要包含以下知识点:局部变量和基本数据类型.循环语句.分支语句.简单屏幕格式输出.面向对象编程: ...

  2. （二十五）golang--数组

    数组:存放多个同一类型的数据.在Go中,数组也是一种值类型数组的基本定义: 数组的内存布局: 数组的地址可以用&取出,且它的地址就是第一个元素的地址 数组不用被被初始化而默认是有值的: 数组中 ...

  3. Java连载8-基本数据类型2

    一.基本数据类型 1.字符串“abc”不属于基本数据类型,属于引用数据类型 2. 基本数据类型   占用空间大小(单位:字节) byte                1 short          ...

  4. 聊一下,前后分离后带来的跨域访问和cookie问题

    在谈前后分离前,我们先看看什么是前后一体的.当我们用javaweb开发网站时,最终我们渲染的jsp或者springthymeleaf.我们的页面其实是WEB-INFO或者templates下.当用户请 ...

  5. python asyncio run_until_complete

    import asyncio def callback(loop, i): print("success time {} {}".format(i, loop.time())) a ...

  6. jvm的组成入门

    JVM的组成分为整体组成部分和运行时数据区组成部分. JVM的整体组成 JVM的整体组成可以分为4个部分:类加载器(Classloader).运行时数据区(Runtime Data Area).执行引 ...

  7. MySQL优化常见Extra分析——慢查询优化

    数据准备: create table user ( id int primary key, name ), sex ), index(name) )engine=innodb; 数据说明:用户表:id ...

  8. YII 项目部署时， 显示空白内容

    本地开发完成,想部署到服务器上,选用了GIT来在服务器上获取上传的本地项目,结果clone后,访问网址后,YII就是个空白页,啥信息也没有,无语.. 刚开始以为是权限问题,后来给访问的目录加了777, ...

  9. Ansible varialbes

    1.什么是变量? ​ 以一个固定的字符串,表示一个不固定的值 version: 1.12 2.定义变量? 1.在playbook中定义变量? vars 关键字 [root@manager projec ...

  10. 在React中使用react-router-dom路由

    1,路由组件的基本实现 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由.在React中,常用的有两个包可以实现这个需求,那就是react-router和react-rou ...