Add a button on the map div. click the button to bring up a pop-up layer. In the input box of the pop-up layer, enter the data and click the submit button to submit the data to the database.
The code for mytest_map.jsp is as follows:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<Html lang = 'zh-cn' xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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: #9 DACBF;
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 {
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 as the base layer.
Var baselayer = new OpenLayers. Layer. WMS (
"Basemap ",
"Http: // localhost: 8080/geoserver/WenLing/wms ",
{
Layers: 'wenling: xianjie_region ',
Format: format,
},
{
IsBaseLayer: true, // you can specify this layer as the base layer.
Yx: {'epsg: 4326 ': true}
}
);
// County
Var xianjie = new OpenLayers. Layer. WMS (
"County ",
"Http: // localhost: 8080/geoserver/WenLing/wms ",
{
Layers: 'wenling: xianjie_region ',
Transparent: true, // set that the map image returned from the server is transparent
Format: format
},
{
DisplayInLayerSwitcher: false, // do not display this layer in switcher
// MinScale: xxx, // This layer is displayed only when a certain scaling ratio is reached
Opacity: 0.5 // sets the Client layer to be translucent.
}
);
// Water System
Var waters = new OpenLayers. Layer. WMS (
"Water System", "http: // localhost: 8080/geoserver/WenLing/wms ",
{
Layers: 'wenling: shuixi_region ',
Transparent: true,
Format: format
},
{
Opacity: 1 // Set Client layer opacity
}
);
// 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 (
"Railway", "http: // localhost: 8080/geoserver/WenLing/wms ",
{
Layers: 'wenling: tielu_polyline ',
Transparent: true,
Format: format
},
{
TransitionEffect: "resize", // This layer is zoomed in or out to produce an animation for resizing.
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, // This layer is displayed only when a certain scaling ratio is reached
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 (
"Optical fiber network", "http: // localhost: 8080/geoserver/WenLing/wms ",
{
Layers: 'wenling: guangxianwang_polyline ',
Transparent: true,
Format: format
},
{
TransitionEffect: "resize", // This layer is zoomed in or out to produce an animation for resizing.
Opacity: 0.5
}
);
Map. addLayers ([baselayer, xianjie, waters, islands, tielu, xian, biandianzhan, guangxianwang]);
Map. setCenter (map. getCenter (); // you can specify a map center.
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"; // sets the distance between the pop-up layer and the upper boundary.
ObjDiv. style. left = "200px"; // you can specify the distance between the pop-up layer and the left boundary.
ObjDiv. style. width = "300px"; // you can specify the width of the pop-up layer.
ObjDiv. style. height = "220px"; // you can specify the height of the pop-up layer.
// ObjDiv. style. display = "block ";
ObjDiv. style. visibility = "visible ";
}
Function hidePopup () {// close the Layer
Var objDiv = document. getElementById ("popDiv ");
ObjDiv. style. visibility = "hidden ";
}
</Script>
</Head>
<Body onload = 'init (); '>
<Div id = 'map'>
<Div id = "operator"> <! -- Div where the button is located -->
<Input name = "" type = "button" onclick = "showPopup ()" value = "operation"/>
</Div>
<Div id = "popDiv"> <! -- Pop-up layer -->
<Div id = "popTitle"> <! -- Title div -->
<Span class = "title_left"> Modification 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 Level: <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 = "28."/> </br>
</P>
<Input type = "submit" value = "submit"/>
<Input type = "reset" value = "reset"/>
<Input type = "reset" value = "cancel" onclick = "hidePopup ()"/>
</Form>
</Div>
</Div>
</Div>
<Script type = "text/javascript">
/* ------------------------- Move the left mouse button ---------------------*/
/* -------- If you do not need to implement this function, you can delete this part of code ------------*/
Var objDiv = document. getElementById ("popDiv ");
Var isIE = document. all? True: false; // determines the 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 indicates the left mouse button status flag. If it is true, the left mouse button is pressed.
}
}
ObjDiv. onmousedown = function (evnt ){
ObjDrag = this; // objDrag is 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 the mouse drag Event
// ObjDiv. style. opacity = 0.5; // The transparency changes when the mouse is pressed.
}
}
}
Document. onmouseup = function (){
MouseD = false; // release with the left button
ObjDrag = "";
If (isIE ){
ObjDiv. releaseCapture ();
// ObjDiv. filters. alpha. opacity = 100; // The transparency changes when the left mouse button is released.
} Else {
Window. releaseEvents (objDiv. MOUSEMOVE); // release the mouse drag event
// ObjDiv. style. opacity = 1; // The transparency changes when the left mouse button is released.
}
}
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>
</Html>
Enter http: // localhost: 8080/myapp/mytestMap.html in the browser
Access the mytestMap. jsp page and click the "Action" button in the upper-left corner. The result is as follows:
In the input box, enter the test data and click Submit. The insert_map.jsp page is displayed. all the points in the database (including the point just added) are displayed on the insert_map.jsp page. The result is as follows:
Visit the map page in the browser again, and you can see that the point you just added is displayed on the map, for example:
Now, the basic operation is complete.
The following work needs to be done:
1. After clicking submit, the map is displayed on the current page and refreshed.
2. Improved the delete and modify functions.
3. Click the "operation" button and select add, delete, or modify.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
