由于我的业务需求是可以在底图上进行一些操作，比如绘制电子围栏等功能，于是需要使用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. 【CometOJ】Comet OJ - Contest #8 解题报告

    点此进入比赛 \(A\):杀手皇后(点此看题面) 大致题意: 求字典序最小的字符串. 一场比赛总有送分题... #include<bits/stdc++.h> #define Tp tem ...

  2. Java实现输出“杨辉三角”

    import java.util.Scanner; public class SumTrangles { public static void func(int n) { if (n < 0) ...

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

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

  4. Java文件上传的几种方式

    文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一 ...

  5. MySQL统计信息简介

    作者:王小龙@网易乐得DBA 原文地址: http://mp.weixin.qq.com/s/698g5lm9CWqbU0B_p0nLMw MySQL执行SQL会经过SQL解析和查询优化的过程,解析器 ...

  6. 状态(State)模式--设计模式

    定义与特点 1.1 定义 状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样. 1.2 特点 状态模式优点: 封装了转换规则,并枚举可能的状态,它将所有与某个状 ...

  7. elasticSearch查询（一）

    **整理成sql格式来看懂elastic** 1.多个字段多个and查询 sql格式:select * from product where title = 'xxxx' and pid = 12 l ...

  8. C# NPOI Excel

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. jsonp格式前端发送和后台接受写法

    jsonp是ajax提交的一种格式不会受跨域限制 一.前端发送 <button>11111</button> <script src="https://cdn. ...

  10. Java面向对象——类的成员

    Java面向对象——类的成员 摘要:本文主要介绍了类的常见成员. 属性 属性称为成员变量,一般来讲不用赋值,因为有默认值,另外显式赋值没有意义会导致所有由此类创建对象都是此值. 默认值 Boolean ...