<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="lib/OpenLayers/ol.js"></script>

    <script src="olStyle/Light.js"></script>

    <style>

        html,

        body {

            width: 100%;

            height: 100%;

            margin: 0;

        }

        .map {

            width: 100%;

            height: 100%;

            background: #f6f6f4;

        }

        .ol-scale-line {

            /* 比例尺背景颜色 */

            background: rgba(0, 60, 136, .7);

        }

        .ol-scale-line-inner {

            /* 比例尺边框样式 */

            border: 1px solid #eee;

            border-top: none;

            /* 比例尺文字大小 */

            font-size: 10px;

            /* 比例尺文字颜色 */

            color: #eee;

            /* 比例尺宽高为动态计算，若需要固定宽度，将最大最小宽度设置为相同即可 */

            min-width: 100px;

            max-width: 100px;

        }

    </style>

</head>

<body>

    <div id="map" class="map" data-id="11"></div>

    <script type="text/javascript">

        var map;

        $(function () {

            InitMap();

            //加载画图

            AddDraw();

            addInteraction();

        })

        var layer;

        //地图初始化

        function InitMap() {

            //初始化地图

            layer = new ol.layer.Vector({

                source: new ol.source.Vector(),

                    overlaps: false,

                    wrapX: false

                }),

                style: function (feature, resolution) {

                    switch (feature.get('layer')) {

                        case 'poi':

                            poiStyle.getText().setText(feature.get('name'));

                            return poiStyle;

                        case 'boundary': return boundaryStyle;

                        case 'lawn': return lawnStyle;

                        case 'road':

                            roadStyle.getText().setText(feature.get('name'));

                            return (resolution < 2) ? roadStyle : null;

                        case 'building':

                            return buildingStyle(feature, resolution);

                        case 'other':

                            otherStyle.getText().setText(feature.get('name'));

                            return otherStyle;

                        default: return null;

                    }

                }

            });

            map = new ol.Map({

                layers: [layer],

                target: 'map',

                view: new ol.View({

                    center: ol.proj.fromLonLat([120.277, 36.330]),

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

        /*增加显示区域**********************************************************************************/

        //设置图形

        var typeSelect = "LineString"//Point 点  LineString 线  Polygon 多边形  Circle 圆  Square 正方形  Rectangle 长方形

        //添加绘图交互的函数

        //var source = new ol.source.Vector({ wrapX: false });

        //实例化矢量数据图层

        var drawVector;

        function AddDraw() {

            drawVector = new ol.layer.Vector({

                //数据源

                source: layer.getSource(),

                //样式

                style: new ol.style.Style({

                    //样式填充

                    fill: new ol.style.Fill({

                        //填充颜色

                        color: 'rgba(37,241,239,0.2)'

                    }),

                    //笔触

                    stroke: new ol.style.Stroke({

                        //笔触颜色

                        color: '#264df6',

                        //笔触宽度

                        width: 2

                    }),

                    //图形样式，主要适用于点样式

                    image: new ol.style.Circle({

                        //半径大小

                        radius: 7,

                        //填充

                        fill: new ol.style.Fill({

                            //填充颜色

                            color: '#e81818'

                        })

                    })

                })

            });

            map.addLayer(drawVector);

        }

        function addInteraction() {

            //设置矢量图层的数据源为空

            drawVector.setSource(null);

            //获取当前选择的绘图类型

            var value = typeSelect;

            //如果当前选择的绘图类型不为"None"的话，则进行相应绘图操作

            //如果当前选择的绘图类型为"None"的话，则清空矢量数据源

            if (value !== 'None') {

                //如果当前的矢量数据源为空的话，则重新创建和设置数据源

                //因为当你选择的绘图类型为"None"时，会清空数据源

                if (drawVector.getSource() == null) {

                    drawVector.setSource(new ol.source.Vector({ wrapX: false }));

                }

                //geometryFunction变量，用来存储绘制图形时的回调函数

                //maxPoints变量，用来存储最大的点数量

                var geometryFunction, maxPoints;

                //如果当前选择的绘图类型是"Square"的话，则将value设置为Circle

                //然后调用createRegularPolygon()方法

                if (value === 'Square') {

                    value = 'Circle';

                    //根据圆来创建一个四边形

                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);

                }

                else if (value === 'Rectangle') {//长方形

                    //如果当前选择的绘图类型是"Square"的话，则将value设置为LineString

                    value = 'LineString';

                    //设置最大点数为2

                    maxPoints = 2;

                    geometryFunction = function (coordinates, geometry) {

                        //source.clear();

                        //如果geometry对象不存在或者为空，则创建

                        if (!geometry) {

                            geometry = new ol.geom.Polygon(null);

                        }

                        //开始点的坐标

                        var start = coordinates[0];

                        //结束点的坐标

                        var end = coordinates[1];

                        //根据开始坐标和结束坐标设置绘图点坐标

                        geometry.setCoordinates([

                            [start, [start[0], end[1]], end, [end[0], start[1]], start]

                        ]);

                        return geometry;

                    };

                }

                //将交互绘图对象赋给draw对象

                //初始化交互绘图对象

                var draw = new ol.interaction.Draw({

                    //图层数据源

                    source: drawVector.getSource(),

                    //绘制类型

                    type: value,

                    //回调函数

                    //Function that is called when a geometry's coordinates are updated

                    geometryFunction: geometryFunction,

                    //最大点数

                    maxPoints: maxPoints

                });

                //将draw对象添加到map中，然后就可以进行图形绘制了

                map.addInteraction(draw);

                draw.setActive(true);

            }

            //监听开始事件

            draw.on('drawstart', function () {

                //alert("111");

                drawVector.getSource().clear();

            })

            //获取坐标

            draw.on('drawend', function (evt) {

                //alert("111");

                var feature = evt.feature;

                var geometry = feature.getGeometry();

                //获取多边形的坐标

                //var coordinate = geometry.getCoordinates();

                //获取圆的坐标

                //var coordinate = geometry.getCenter();

                var lnglat = [];

                //for(var i =0;i<)

                var points = [];

                //获取坐标

                if (typeSelect == "Circle") {

                    points = geometry.getCenter();

                    lnglat = ol.proj.transform(points, 'EPSG:3857', 'EPSG:4326');

                    //radius = circle.getRadius();

                    console.log(geometry.getRadius());

                    console.log(lnglat);

                } else {

                    points = geometry.getCoordinates();

                    for (var i = 0; i < points.length; i++) {

                        lnglat.push(ol.proj.transform(points[i], 'EPSG:3857', 'EPSG:4326'));

                    }

                }

                console.log(lnglat);

                // console.log(geometry.getCoordinates());

            })

        }

    </script>

</body>

</html>

　　

最新文章

  1. AE开发实现GP工具IDW
  2. IOS彩票第三天界面
  3. GO語言基礎教程:數據類型,變量,常量
  4. 内部使用final参数的原因
  5. 在eclipse中配置spark 0.9.1源码的开发环境
  6. win32进阶之路：给锁屏软件增加一个超链接按钮
  7. Java基础知识强化之多线程笔记04：并行和并发 区别
  8. js数学方法应用
  9. Android 关于操作UI线程
  10. 使用SVN clang: error: linker command failed with exit code 1 (use -v to see invocation)
  11. 深入了解当前ETL的一些基本技术
  12. [Unity c#]c#中的反射
  13. SSH执行hql报错：Caused by: org.hibernate.hql.ast.QuerySyntaxException: user is not mapped [from user where username = ?]
  14. 跟我学ASP.NET MVC之七：SportsStrore一个完整的购物车
  15. iPhone多次输入错误密码锁机后刷机恢复（原有内容会丢失）
  16. java之日志管理
  17. MySQL卸载安装8.0.*
  18. js vue 在页面中将摄像头放在一个标签里展示，(模仿手机拍照功能)
  19. MSDN学习: 加密解密Config文件中的Sections( Encrypting and Decrypting Configuration Sections)
  20. 程序员、互联网从业者必读KK凯文凯利三大力作之《失控》总结

热门文章

  1. mybaits分页插件的使用
  2. MapReduce清洗数据进行可视化
  3. [MP3]MP3固件持续分享(2019.1.25)
  4. P3387缩点(tarjan+拓扑排序+线性dp)
  5. 踩坑ThinkPHP5之模型对象返回的数据集如何转为数组
  6. 开发时从宿主机连接容器中的MySQL
  7. JavaScript Math方法的基本使用
  8. HTTPS原理及流程
  9. MySQL基础（4） | 视图
  10. 「Spark」Spark SQL Thrift Server运行方式