<!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"> <!--指定要引用的CSS文件-->
<script src="OpenLayers.js"></script> <!--指定要引用的OpenLayers库文件-->
<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"
οnclick="start();" />
<!--<label for="noneToggle">初始点:</label><input type="text" name="point" value="none" id="point" />-->
<label for="noneToggle">半径:</label><input type="text" name="radius" id="radius" />
<input type="button" id="drawCircle" value="确定" onClick="drawCircle()"/>
</body>
</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"> <!--指定要引用的CSS文件-->
<script src="OpenLayers.js"></script> <!--指定要引用的OpenLayers库文件-->
<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"
οnclick="start();" />
<!--<label for="noneToggle">初始点:</label><input type="text" name="point" value="none" id="point" />-->
<label for="noneToggle">半径:</label><input type="text" name="radius" id="radius" />
<input type="button" id="drawCircle" value="确定" onClick="drawCircle()"/>
</body>
</html>