对任意指定点进行缓冲

来源：互联网发布：阿里云ecs安装oracle 编辑：程序博客网时间：2024/05/21 19:50

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>对地图上的指定点画圆</title>

<link rel="stylesheet" href="theme/default/style.css" type="text/css"> 

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

<style>
.smallmap {
    width: 600px;
    height: 500px
}

         .wrapper
             {
                 width: 600px;
             }
         .location {
                 float: right;
             }
         .scale {
                 float: left;
            }

</style>
<script type="text/javascript">
var vectorLayer = new OpenLayers.Layer.Vector("矢量图层");
    function init() {
           map = new OpenLayers.Map('map');
        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);
        var lonlat=new OpenLayers.LonLat(102.70734, 25.04505);
        //alert( map.getProjectionObject()); //当前是EPSG:900913投影
        var lonlat2 = lonlat.clone().transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() );//转换投影
        map.setCenter(lonlat2, 8);//指定地图中心与初始缩放级别
        map.addControl(new OpenLayers.Control.LayerSwitcher());//添加图层控制器空间
        map.addControl(new OpenLayers.Control.MousePosition({element: document.getElementById('location')})); //添加鼠标位置控件
        map.addControl(new OpenLayers.Control.Scale('scale'));//添加比例尺控件
        map.addControl(new OpenLayers.Control.OverviewMap());//添加鹰眼控件

      // map.addLayer(vectorLayer);
        marker_layer = new OpenLayers.Layer.Markers("markers");
        map.addLayers([marker_layer]);

    }
    var map_onclick;
    function enable_click()
    {
    map_onclick = new OpenLayers.Control.Click();
    map.addControl(map_onclick);
    map_onclick.activate();
        }
        function disable_click()
    {
    map_onclick.deactivate();
        }
//注册添加标注Handler
//注册添加标注Event
var lonlat;
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions:
{
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options)
{
this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.handler = new OpenLayers.Handler.Click(this, {'click': this.trigger}, this.handlerOptions);
},
trigger: function(e)
{
lonlat = this.map.getLonLatFromPixel(e.xy);//map.getLonLatFromViewPortPx(e.xy);
//alert(lonlat.lon);
//removeAll();
//alert(lonlat)
//alert(document.getElementById("point").value);
//document.getElementById("point").setInnerHtml(lonlat);

createMarker("<a href='http://blog.csdn.net/u011135103' target='_blank'>Visit me</a>",lonlat.lon,lonlat.lat,false);

}

});

    function drawCircle(){

     var radius=document.getElementById("radius").value;
     var point0 = new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat);
// alert(lonlat.lon+" "+lonlat.lat)
//var point00 = point0.clone().transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() );
if(radius==null){
alert("请填写半径");
}else{
var circle=new OpenLayers.Geometry.Polygon.createRegularPolygon(point0,radius,60,0);
var feature = new OpenLayers.Feature.Vector(circle);
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);
}
    }
    //生成标注
function createMarker(html,lon,lat,isHide)
{
var ll, popupClass, popupContentHTML;

ll = new OpenLayers.LonLat(lon,lat); //坐标

//popupClass = AutoSizeFramedCloud;

popupContentHTML = html;

//addMarker(ll, popupClass, popupContentHTML, true, false);
addMarker(ll, popupContentHTML, true, false);
map.setCenter(new OpenLayers.LonLat(lon,lat));

}

//添加标注
//function addMarker(ll, popupClass, html, closeBox, overflow)
function addMarker(ll, html, closeBox, overflow)
{

var feature = new OpenLayers.Feature(marker, ll);

feature.closeBox = closeBox;

//feature.popupClass = popupClass;

feature.data.popupContentHTML = html;

feature.data.overflow = (overflow) ? "auto" : "hidden";

var marker = feature.createMarker();
marker.setUrl('img/marker.png');   //ICON
marker.display(true);
var markerClick = function (evt)
{
if (this.popup == null)
{
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
}

else

{
this.popup.toggle();
}

currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};

marker.events.register("mousedown", feature, markerClick);
marker_layer.addMarker(marker);
}
function start(){
if(document.getElementById('start').checked == true){
       enable_click();
        }
    else{
    disable_click();
}
}
</script>
</head>
<body onLoad="init()">
<div id="map" width="800" height="500" class="smallmap"></div>
<label for="noneToggle">对指定点画圆:</label><input type="checkbox" name="type" value="none" id="start"
        onclick="start();" />


<label for="noneToggle">半径:</label><input type="text" name="radius" id="radius" />
<input type="button" id="drawCircle" value="确定" onClick="drawCircle()"/>
</body>
</html>

0 0