openlayers实现画圆

概述:

本文讲述如何在openlayers中实现画圆。

效果:

实现思路:

1、画中心点

通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。

2、移动鼠标设置半径

画点结束后,激活地图的鼠标移动事件,获取圆心到鼠标点的距离,并画圆,将结果展示到地图上。

3、点击地图结束绘制

点击地图,结束绘制,将最终结果展示到地图上,并停止地图的鼠标移动事件。

实现代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>china EPSG:4326 image/png</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>
    <style type="text/css">
        body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
        body { border: 0px; margin: 0px; padding: 0px; }
        #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
        .query-box{
            position: absolute;
            top: 15pt;
            right: 15pt;
            z-index:1001;
            border: 1px solid #ff0000;
            border-radius: 3px;
            background: #f2f2f2;
            padding: 5px 8px;
            font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
        }
    </style>
    <script type="text/javascript" src="http://localhost/olapi/OpenLayers.js"></script>
    <script type="text/javascript" src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
    <script src="http://localhost/jquery/jquery-1.8.3.js"></script>
    <script src="circle.js"></script>
    <script type="text/javascript">
        var map, wfs;
        function init(){
            var bounds = new OpenLayers.Bounds(
                    87.57582859314434, 19.969920291221204,
                    126.56713756740385, 45.693810203800794
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.1523098006807012,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);


            var tiled = new OpenLayers.Layer.WMS(
                    "province", "http://localhost:8081/geoserver/lzugis/wms",
                    {
                        "LAYERS": 'province',
                        "STYLES": '',
                        format: 'image/png'
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            map.addLayer(tiled);
            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.zoomToExtent(bounds);
            var drawLayer = new OpenLayers.Layer.Vector("drawLayer",{
                styleMap: new OpenLayers.StyleMap()
            });
            var showLayer = new OpenLayers.Layer.Vector("showLayer",{
                styleMap: new OpenLayers.StyleMap({'default':{
                 strokeColor: "#ff0000",
                 strokeOpacity: 1,
                 strokeWidth: 1,
                 fillColor: "#000000",
                 fillOpacity: 0.1
                 }})
            });
            map.addLayers([drawLayer,showLayer]);
            var drawCtrl = new OpenLayers.Control.DrawFeature(drawLayer, OpenLayers.Handler.Point);
            map.addControl(drawCtrl);
            drawCtrl.featureAdded = onEndDraw;
            function onEndDraw(feature){
                drawCtrl.deactivate();
                drawLayer.setVisibility(true);
                var start = feature.geometry;
                drawLayer.addFeatures(start);
                var circle,moveEvt;
                map.events.register("mousemove",map,function(e){
                    moveEvt = e;
                    drawLayer.removeAllFeatures();
                    var pt = map.getLonLatFromPixel(new OpenLayers.Pixel(e.x, e.y));
                    var end = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
                    var line = new OpenLayers.Geometry.LineString([start, end]);
                    var radius = line.getLength();
                    var geometry = createCircle(start,radius,100,0);
                    var feature = new OpenLayers.Feature.Vector(geometry);
                    circle = feature;
                    drawLayer.addFeatures(feature);
                });
                map.events.register("click",map,function(e){
                    showLayer.removeAllFeatures();
                    showLayer.addFeatures(circle);
                    drawLayer.setVisibility(false);
                });
            }
            $("#draw").on("click",function(){
                drawLayer.removeAllFeatures();
                showLayer.removeAllFeatures();
                drawCtrl.activate();
            });
        }
    </script>
</head>
<body onLoad="init()">
<div class="query-box">
    <button id="draw">画圆</button>
</div>
<div id="map"></div>
</body>
</html>

在上文中用到了createCircle,该函数如下:

/**
 * Method: createCircle
 * Create a regular polygon around a radius. Useful for creating circles
 * and the like.
 *
 * Parameters:
 * origin - {<OpenLayers.Geometry.Point>} center of polygon.
 * radius - {Float} distance to vertex, in map units.
 * sides - {Integer} Number of sides. 20 approximates a circle.
 * rotation - {Float} original angle of rotation, in degrees.
 */
function createCircle(origin, radius, sides, rotation) {
    var angle = Math.PI * ((1/sides) - (1/2));
    if(rotation) {
        angle += (rotation / 180) * Math.PI;
    }
    var rotatedAngle, x, y;
    var points = [];
    for(var i=0; i<sides; ++i) {
        rotatedAngle = angle + (i * 2 * Math.PI / sides);
        x = origin.x + (radius * Math.cos(rotatedAngle));
        y = origin.y + (radius * Math.sin(rotatedAngle));
        points.push(new OpenLayers.Geometry.Point(x, y));
    }
    var ring = new OpenLayers.Geometry.LinearRing(points);
    return new OpenLayers.Geometry.Polygon([ring]);
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 分治法

算法涉及到了一个平面几何的知识。就是三角形p1p2p3的面积等于以下行列式的二分之一: % <![CDATA[ \begin{array}{cccc} | ...

8910
来自专栏好好学java的技术栈

特别的520,送给特别的你们,还不来看看?

13020
来自专栏技术之路

wcf http 返回图片

做项目时候用wcf 返回图片,从官网上找了找一次只能返回一张图片,但是一直查不到返回多个图片的方法,ios 可以异步加载看速度也可以 ,先记录一下等以后用解决了...

25460
来自专栏菩提树下的杨过

Flash/Flex学习笔记(31):对象拖拽与投掷

对象拖拽: 这其实就是以前所学知识:Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag) + Flash/Flex学习笔记(2...

24390
来自专栏小灰灰

cocos2dx-v3.4 2048(四):游戏逻辑的设计与实现

前言 ---- 2048的游戏逻辑比较简单,向四个方向移动单元格,若相邻的单元格数字相同,则合并成一个新的单元格,且数字为之前的两倍;若不同,则移动到目的方向上...

42160
来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

12010
来自专栏GIS讲堂

OL记载Arcgis Server切片

在OpenLayers中加载Arcgis Server切片用XYZ图层,Arcgis Server的切片调用地址我们可以看到如下:

18020
来自专栏智能大石头

GridView绑定小技

1,使用表达式。如下,缺货的产品用红色,别的绿色。 ? ? 实际上,就这个表达式: (Int32)Eval("Num")<(Int32)Eval("MinNum...

22980
来自专栏我就是马云飞

直播间气泡效果

这个效果是之前看过的,正好是很典型的跟动画相关的例子,我这里就拿来跟大家分享一下,如果你以前看过又很熟悉动画那就可以略过,如果不是很熟悉或者没看过那...

27650
来自专栏前端杂货铺

ReactJS分析之入口函数render

前言   在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等...

40690

扫码关注云+社区

领取腾讯云代金券