Click on the button on the map div to implement the _jsp programming of the map data warehousing operation

Add a button on the map div, click the button to pop a pop-up layer, enter the data in the pop-up input box and click the Submit button to submit the data to the database.
The code for MYTEST_MAP.JSP is as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd ">
<meta charset= ' Utf-8 '/>
<title>my openlayers map</title>
<link rel= "stylesheet" type= "Text/css" href= "Openlayers/theme/default/style.css"/>
<style type= "Text/css" >
#map {
Clear:both;
position:relative;
width:1000px;
height:600px;
BORDER:1PX solid black;
}

#operator {
Position:absolute;
top:10px;
left:40px;
z-index:3000;
}

#popDiv {
Position:absolute;
Visibility:hidden;
Overflow:hidden;
border:2px solid #AEBBCA;
Background-color: #EEF1F8;
Cursor:move;
padding:1px;
z-index:4000;
}

#popTitle {
Background: #9DACBF;
height:20px;
line-height:20px;
padding:1px;
}

#popForm {
padding:2px;
padding-left:15px;
}

. title_left {
Font-weight:bold;
padding-left:5px;
Float:left;
}

. title_right {
Float:right;
}

#popTitle. Title_right a {
Color: #000;
Text-decoration:none;
}

#popTitle. title_right a:hover {
Text-decoration:underline;
Color: #FF0000;
}

</style>
<script type= ' text/javascript ' src= ' openlayers/openlayers.js ' ></script>
<script type= ' Text/javascript ' >
function init () {
format = ' image/png ';
var bounds = new Openlayers.bounds (
121.120606, 28.169589,
121.871688, 28.525587
);
var options = {
CONTROLS: [],
Maxextent:bounds,
maxresolution:0.0013726171875,
Projection: "epsg:4326",
Units: ' Degrees '
};
Map = new Openlayers.map (' Map ', options);
Base layer, you can use a layer group to do the underlying layer
var baselayer = new OpenLayers.Layer.WMS (
"Bottom Chart",
"Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:xianjie_region ',
Format:format,
},
{
isbaselayer:true,//set this layer as the base layer
YX: {' epsg:4326 ': true}
}
);

Boundaries
var Xianjie = new OpenLayers.Layer.WMS (
"Boundaries",
"Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:xianjie_region ',
Transparent:true,//Set the map image returned from the server is transparent
Format:format
},
{
Displayinlayerswitcher:false,//Make the layer not appear in switcher
MINSCALE:XXX,///only when a certain scale is reached the layer is displayed
opacity:0.5//Set client layer semitransparent
}
);

Water
var waters = new OpenLayers.Layer.WMS (
"Water Systems", "http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:shuixi_region ',
Transparent:true,
Format:format
},
{
Opacity:1//Set client layer opaque
}
);

Island
var islands = new OpenLayers.Layer.WMS (
"Island", "http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:dao_region ',
Transparent:true,
Format:format
},
{
opacity:0.5
}
);

Railway
var tielu = new OpenLayers.Layer.WMS (
"Railroad", "Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:tielu_polyline ',
Transparent:true,
Format:format
},
{
TransitionEffect: "Resize",///Make resized animation when the layer is enlarged or shrunk
opacity:0.5
}
);

County
var xian = new OpenLayers.Layer.WMS (
"County", "Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:xian_point ',
Transparent:true,
Format:format
},
{
MINSCALE:XXX,///only when a certain scale is reached the layer is displayed
opacity:0.5
}
);

Substation
Biandianzhan = new OpenLayers.Layer.WMS (
"Substation", "Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:biandianzhan_point ',
Transparent:true,
Format:format
},
{
opacity:0.5
}
);

Guangxianwang = new OpenLayers.Layer.WMS (
"Fiber optic network", "Http://localhost:8080/geoserver/WenLing/wms",
{
Layers: ' Wenling:guangxianwang_polyline ',
Transparent:true,
Format:format
},
{
TransitionEffect: "Resize",///Make resized animation when the layer is enlarged or shrunk
opacity:0.5
}
);

Map.addlayers ([Baselayer, Xianjie, Waters, islands, Tielu, Xian, Biandianzhan, Guangxianwang]);

Map.setcenter (Map.getcenter ());//Set Map center point
Map.addcontrol (New OpenLayers.Control.PanZoomBar ({
Position:new Openlayers.pixel (2, 15)
}));
Map.addcontrol (New OpenLayers.Control.Navigation ());
Map.addcontrol (New OpenLayers.Control.LayerSwitcher ());
Map.addcontrol (New OpenLayers.Control.Scale (' Scale '));
Map.addcontrol (New OpenLayers.Control.MousePosition ());
Map.zoomtoextent (bounds);

if (!map.getcenter ()) {
Map.zoomtomaxextent ();
}

}

function ShowPopup () {//Pop-up layer
var objdiv = document.getElementById ("Popdiv");
ObjDiv.style.top = "50px";//Set the distance from the top edge of the pop-up layer
ObjDiv.style.left = "200px";//Set the distance of the pop-up layer from the left edge
ObjDiv.style.width = "300px";//Set the width of the pop-up layer
ObjDiv.style.height = "220px";//Set the height of the pop-up layer
ObjDiv.style.display = "block";
objDiv.style.visibility = "visible";
}
function Hidepopup () {//Shutdown layer
var objdiv = document.getElementById ("Popdiv");
objDiv.style.visibility = "hidden";
}

</script>
<body onload= ' init (); ' >
<div id= ' map ' >
<div id= "operator" ><!--button is located div-->
<input name= "" type= "button" onclick= "ShowPopup ()" value= "Operation"/>
</div>
<div id= "Popdiv" ><!--pop-up layer-->
<div id= "Poptitle" > <!--title div-->
<span class= "Title_left" > Modify Operation </span> <span class= "Title_right" >
<a href= "#" onclick= "Hidepopup ();" > Close </a> </span>
</div>
<div id= "Popform" > <!--form Div-->
<form action= "insert_map.jsp" method= "POST" >
<p>
ID: <input type= "text" name= "id" value= "0"/> </br>
Name: <input type= "text" name= "name" value= "AAA"/> </br>
Voltage rating: <input type= "text" name= "Voltage_level" value= "110kv"/> </br>
Longitude: <input type= "text" Name= "lon" value= "121."/> </br>
Latitude: <input type= "text" name= "lat" value= "/> </br>
</p>
<input type= "Submit" value= "submitted"/>
<input type= "reset" value= "reset"/>
<input type= "reset" value= "Cancel" onclick= "Hidepopup ()"/>
</form>
</div>
</div>
</div>

<script type= "Text/javascript" >
/*-------------------------Drag the left mouse button---------------------* *
/*--------You can delete this part of the code when you do not need to implement this feature------------* *
var objdiv = document.getElementById ("Popdiv");
var Isie = document.all? true:false;//to determine browser type
Document.onmousedown = function (evnt) {//execute this function when the left mouse button is pressed
var evnt = evnt? Evnt:event;
if (Evnt.button = = (document.all 1:0)) {
moused = true;//moused is the left mouse button status flag, True to indicate that the left button is pressed
}
}

Objdiv.onmousedown = function (evnt) {
Objdrag = This;//objdrag for the dragged object
var evnt = evnt? Evnt:event;
if (Evnt.button = = (document.all 1:0)) {
mx = evnt.clientx;
my = Evnt.clienty;
ObjDiv.style.left = objdiv.offsetleft + "px";
ObjDiv.style.top = objdiv.offsettop + "px";
if (Isie) {
Objdiv.setcapture ();
ObjDiv.filters.alpha.opacity = 50;//The transparency changes when the mouse is pressed
} else {
Window.captureevents (event.mousemove);//capture Mouse drag events
ObjDiv.style.opacity = 0.5;//The transparency changes when the mouse is pressed
}
}
}
Document.onmouseup = function () {
moused = false;//Left button loosened
Objdrag = "";
if (Isie) {
Objdiv.releasecapture ();
ObjDiv.filters.alpha.opacity = 100;//The transparency changes when the mouse Zuo open
} else {
Window.releaseevents (objdiv.mousemove);//release Mouse drag Event
ObjDiv.style.opacity = 1;//The transparency changes when the mouse Zuo open
}
}

Document.onmousemove = function (evnt) {
var evnt = evnt? Evnt:event;
if (moused = = True && Objdrag) {
var mrx = evnt.clientx-mx;
var mry = evnt.clienty-my;
ObjDiv.style.left = parseint (objDiv.style.left) + MRX + "px";
ObjDiv.style.top = parseint (objDiv.style.top) + Mry + "px";
mx = evnt.clientx;
my = Evnt.clienty;
}
}
</script>

</body>

In Browser input: http://localhost:8080/myapp/mytestMap.html
Access to the Mytestmap.jsp page, click the "Action" button in the upper-left corner, and the results are as follows:

Enter the test data in the input box, click Submit, will be submitted to the Insert_map.jsp page, and on the insert_map.jsp page display all the points in the database (including the point just added), the effect of the following figure:

Once again in the browser to access the map page, you can see the map has been more than just added the point, the following figure:

At this point, the basic operation is completed.

The following work needs to be done:
1, so that the click submitted after the current page is still displayed, and the map to refresh.
2, improve the delete function, modify the function
3, click the "Action" button, you can choose to add, delete or modify.