GIS地图开发之地图交互操作(增加、删除要素)与要素信息显示

by · 2019-04-02


 


GIS地图开发之地图交互操作(增加、删除要素)与要素信息显示


分类： GIS web开发2013-08-07
21:21 155人阅读 评论(0) 收藏 举报


原创性声明：

请尊重本人劳动成果，转载时但请务必标明出处！！本人保留追究法律责任的权利。谢谢合作！

GIS地图开发之地图交互操作，实现在地图上增加、删除要素，同时显示在点击某要素时显示该要素的相关信息。整体开发环境是：JDK7+tomcat7.0+geoserver2.3.3+MySQL5.5.32，使用的语言有html、javascript、jsp、java。

直接贴出地图页面代码，使用时请将所有localhost替换为服务器ip地址：


[html] view
plaincopy


  1. <?xml version=“1.0” encoding=“UTF-8”?>  

  2. <html lang=‘zh-cn’ xmlns=“http://www.w3.org/1999/xhtml”>  

  3. <head>  

  4. <meta charset=‘utf-8’ />  

  5. <title>ECSMAP管理平台</title>  

  6. <!– Import OL CSS, auto import does not work with our minified OL.js build –>  

  7. <link rel=“stylesheet” type=“text/css” href=“http://localhost:8080/geoserver/openlayers/theme/default/style.css” />  

  8. <!– Basic CSS definitions –>  

  9. <style type=“text/css”>  

  10. /* Toolbar styles */  

  11. #toolbar {  

  12. position: absolute;  

  13. top: 5px;  

  14. left: 45px;  

  15. padding-bottom: 0.5em;  

  16. background-color: #EEF1F8;  

  17. display: none;  

  18. z-index: 3000;  

  19. }  

  20.   

  21. #toolbar ul {  

  22. list-style: none;  

  23. padding: 0;  

  24. margin: 0;  

  25. }  

  26.   

  27. #toolbar ul li {  

  28. float: left;  

  29. padding-right: 1em;  

  30. padding-bottom: 0.5em;  

  31. }  

  32.   

  33. #toolbar ul li a {  

  34. font-weight: bold;  

  35. font-size: smaller;  

  36. vertical-align: middle;  

  37. color: black;  

  38. text-decoration: none;  

  39. }  

  40.   

  41. #toolbar ul li a:hover {  

  42. text-decoration: underline;  

  43. }  

  44.   

  45. #toolbar ul li * {  

  46. vertical-align: middle;  

  47. }  

  48.   

  49. /* The map and the location bar */  

  50. #map {  

  51. clear: both;  

  52. position: relative;  

  53. width: 1000px;  

  54. height: 600px;  

  55. border: 1px solid black;  

  56. }  

  57.   

  58. #operator {  

  59. position: absolute;  

  60. top: 5px;  

  61. left: 45px;  

  62. z-index: 2000;  

  63. }  

  64.   

  65. #popDivInsert,#popDivDelete {  

  66. position: absolute;  

  67. visibility: hidden;  

  68. overflow: hidden;  

  69. border: 2px solid #AEBBCA;  

  70. background-color: #EEF1F8;  

  71. /**cursor: move;*/  

  72. padding: 1px;  

  73. z-index: 3000;  

  74. }  

  75.   

  76. #popTitle {  

  77. background: #9DACBF;  

  78. height: 20px;  

  79. line-height: 20px;  

  80. padding: 1px;  

  81. }  

  82.   

  83. #popTitle .title_right a {  

  84. color: #000;  

  85. text-decoration: none;  

  86. }  

  87.   

  88. #popTitle .title_right a:hover {  

  89. text-decoration: underline;  

  90. color: #FF0000;  

  91. }  

  92.   

  93. #popForm {  

  94. padding: 2px;  

  95. padding-left: 15px;  

  96. }  

  97.   

  98. #nodelist {  

  99. position: absolute;  

  100. bottom: 0px;  

  101. left: 35px;  

  102. z-index: 3000;  

  103. }  

  104.   

  105. #wrapper {  

  106. position: absolute;  

  107. bottom: 0px;  

  108. left: 35px;  

  109. width: 400px;  

  110. z-index: 3000;  

  111. }  

  112.   

  113. #scale {  

  114. float: left;  

  115. left: 20px;  

  116. bottom: 0px;  

  117. width: 140px;  

  118. }  

  119.   

  120. #location {  

  121. float: left;  

  122. bottom: 0px;  

  123. width: 160px;  

  124. }  

  125.   

  126. #options {  

  127. position: absolute;  

  128. left: 13px;  

  129. top: 7px;  

  130. z-index: 3000;  

  131. }  

  132.   

  133. .title_left {  

  134. font-weight: bold;  

  135. padding-left: 5px;  

  136. float: left;  

  137. }  

  138.   

  139. .title_right {  

  140. float: right;  

  141. }  

  142.   

  143. /* Styles used by the default GetFeatureInfo output, added to make IE happy */  

  144. table.featureInfo,table.featureInfo td,table.featureInfo th {  

  145. border: 1px solid #ddd;  

  146. border-collapse: collapse;  

  147. margin: 0;  

  148. padding: 0;  

  149. font-size: 90%;  

  150. padding: .2em .1em;  

  151. }  

  152.   

  153. table.featureInfo th {  

  154. padding: .2em .2em;  

  155. font-weight: bold;  

  156. background: #eee;  

  157. }  

  158.   

  159. table.featureInfo td {  

  160. background: #fff;  

  161. }  

  162.   

  163. table.featureInfo tr.odd td {  

  164. background: #eee;  

  165. }  

  166.   

  167. table.featureInfo caption {  

  168. text-align: left;  

  169. font-size: 100%;  

  170. font-weight: bold;  

  171. padding: .2em .2em;  

  172. }  

  173. </style>  

  174. <!– Import OpenLayers, reduced, wms read only version –>  

  175. <script  src=“http://localhost:8080/geoserver/openlayers/OpenLayers.js” type=“text/javascript”>  

  176. </script>  

  177. <script defer=“defer” type=“text/javascript”>  

  178. var map;  

  179. var untiled;  

  180. var tiled;  

  181. var pureCoverage = false;  

  182. // pink tile avoidance  

  183. OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;  

  184. // make OL compute scale according to WMS spec  

  185. OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;  

  186.   

  187. function init() {  

  188. // if this is just a coverage or a group of them, disable a few items,  

  189. // and default to jpeg format  

  190. format = ‘image/png’;  

  191. if (pureCoverage) {  

  192. document.getElementById(‘filterType’).disabled = true;  

  193. document.getElementById(‘filter’).disabled = true;  

  194. document.getElementById(‘antialiasSelector’).disabled = true;  

  195. document.getElementById(‘updateFilterButton’).disabled = true;  

  196. document.getElementById(‘resetFilterButton’).disabled = true;  

  197. document.getElementById(‘jpeg’).selected = true;  

  198. format = “image/jpeg”;  

  199. }  

  200.   

  201. var bounds = new OpenLayers.Bounds(121.120606, 28.169589, 121.871688,28.525587);  

  202. var options = {  

  203. controls : [],  

  204. maxExtent : bounds,  

  205. maxResolution : 0.0078125,  

  206. projection : “EPSG:4326”,  

  207. units : ‘degrees’  

  208. };  

  209. map = new OpenLayers.Map(‘map’, options);  

  210.   

  211. // setup tiled layer  

  212. tiled = new OpenLayers.Layer.WMS(“Geoserver layers – Tiled”,  

  213. “http://localhost:8080/geoserver/WenLing/wms”, {  

  214. LAYERS : ‘WLgroup’,  

  215. STYLES : ”,  

  216. format : format,  

  217. tiled : true,  

  218. tilesOrigin : map.maxExtent.left + ‘,’+ map.maxExtent.bottom  

  219. }, {  

  220. buffer : 0,  

  221. displayOutsideMaxExtent : true,  

  222. isBaseLayer : true,  

  223. yx : {  

  224. ‘EPSG:4326’ : true  

  225. }  

  226. });  

  227.   

  228. // setup single tiled layer  

  229. untiled = new OpenLayers.Layer.WMS(“Geoserver layers – Untiled”,  

  230. “http://localhost:8080/geoserver/WenLing/wms”, {  

  231. LAYERS : ‘WLgroup’,  

  232. STYLES : ”,  

  233. format : format  

  234. }, {  

  235. singleTile : true,  

  236. ratio : 1,  

  237. isBaseLayer : true,  

  238. yx : {  

  239. ‘EPSG:4326’ : true  

  240. }  

  241. });  

  242.   

  243. map.addLayers([ untiled, tiled ]);  

  244.   

  245. // build up all controls  

  246. map.addControl(new OpenLayers.Control.PanZoomBar({  

  247. position : new OpenLayers.Pixel(2, 15)  

  248. }));  

  249. map.addControl(new OpenLayers.Control.Navigation());  

  250. map.addControl(new OpenLayers.Control.Scale($(‘scale’)));  

  251. map.addControl(new OpenLayers.Control.MousePosition({  

  252. element : $(‘location’)  

  253. }));  

  254. map.zoomToExtent(bounds);  

  255.   

  256. // wire up the option button  

  257. var options = document.getElementById(“options”);  

  258. options.onclick = toggleControlPanel;  

  259.   

  260. // support GetFeatureInfo  

  261. map.events.register(‘click’,map,function(e) {  

  262. document.getElementById(‘nodelist’).innerHTML = “Loading… please wait…”;  

  263. var params = {  

  264. REQUEST : “GetFeatureInfo”,  

  265. EXCEPTIONS : “application/vnd.ogc.se_xml”,  

  266. BBOX : map.getExtent().toBBOX(),  

  267. SERVICE : “WMS”,  

  268. INFO_FORMAT : ‘text/html’,  

  269. QUERY_LAYERS : map.layers[0].params.LAYERS,  

  270. FEATURE_COUNT : 50,  

  271. Layers : ‘WLgroup’,  

  272. WIDTH : map.size.w,  

  273. HEIGHT : map.size.h,  

  274. format : format,  

  275. styles : map.layers[0].params.STYLES,  

  276. srs : map.layers[0].params.SRS  

  277. };  

  278.   

  279. // handle the wms 1.3 vs wms 1.1 madness  

  280. if (map.layers[0].params.VERSION == “1.3.0”) {  

  281. params.version = “1.3.0”;  

  282. params.j = parseInt(e.xy.x);  

  283. params.i = parseInt(e.xy.y);  

  284. } else {  

  285. params.version = “1.1.1”;  

  286. params.x = parseInt(e.xy.x);  

  287. params.y = parseInt(e.xy.y);  

  288. }  

  289.   

  290. // merge filters  

  291. if (map.layers[0].params.CQL_FILTER != null) {  

  292. params.cql_filter = map.layers[0].params.CQL_FILTER;  

  293. }  

  294. if (map.layers[0].params.FILTER != null) {  

  295. params.filter = map.layers[0].params.FILTER;  

  296. }  

  297. if (map.layers[0].params.FEATUREID) {  

  298. params.featureid = map.layers[0].params.FEATUREID;  

  299. }  

  300. //发现问题：如果将下面的localhost换为服务器ip的话，客户端浏览器能够获得地图上要素的信息，但在服务器端浏览器上  

  301. //获取不到地图要素信息  

  302. OpenLayers.loadURL(“http://localhost:8080/geoserver/WenLing/wms”,params, this, setHTML, setHTML);  

  303. OpenLayers.Event.stop(e);  

  304. });  

  305. }  

  306.   

  307. // sets the HTML provided into the nodelist element  

  308. function setHTML(response) {  

  309. document.getElementById(‘nodelist’).innerHTML = response.responseText;  

  310. };  

  311.   

  312. // shows/hide the control panel  

  313. function toggleControlPanel(event) {  

  314. var toolbar = document.getElementById(“toolbar”);  

  315. if (toolbar.style.display == “none”) {  

  316. toolbar.style.display = “block”;  

  317. } else {  

  318. toolbar.style.display = “none”;  

  319. }  

  320. event.stopPropagation();  

  321. map.updateSize()  

  322. }  

  323.   

  324. // Tiling mode, can be ’tiled’ or ‘untiled’  

  325. function setTileMode(tilingMode) {  

  326. if (tilingMode == ’tiled’) {  

  327. untiled.setVisibility(false);  

  328. tiled.setVisibility(true);  

  329. map.setBaseLayer(tiled);  

  330. } else {  

  331. untiled.setVisibility(true);  

  332. tiled.setVisibility(false);  

  333. map.setBaseLayer(untiled);  

  334. }  

  335. }  

  336.   

  337. // Transition effect, can be null or ‘resize’  

  338. function setTransitionMode(transitionEffect) {  

  339. if (transitionEffect === ‘resize’) {  

  340. tiled.transitionEffect = transitionEffect;  

  341. untiled.transitionEffect = transitionEffect;  

  342. } else {  

  343. tiled.transitionEffect = null;  

  344. untiled.transitionEffect = null;  

  345. }  

  346. }  

  347.   

  348. // changes the current tile format  

  349. function setImageFormat(mime) {  

  350. // we may be switching format on setup  

  351. if (tiled == null)  

  352. return;  

  353.   

  354. tiled.mergeNewParams({  

  355. format : mime  

  356. });  

  357. untiled.mergeNewParams({  

  358. format : mime  

  359. });  

  360. }  

  361.   

  362. // sets the chosen style  

  363. function setStyle(style) {  

  364. // we may be switching style on setup  

  365. if (tiled == null)  

  366. return;  

  367.   

  368. tiled.mergeNewParams({  

  369. styles : style  

  370. });  

  371. untiled.mergeNewParams({  

  372. styles : style  

  373. });  

  374. }  

  375.   

  376. // sets the chosen WMS version  

  377. function setWMSVersion(wmsVersion) {  

  378. // we may be switching style on setup  

  379. if (wmsVersion == null)  

  380. return;  

  381.   

  382. if (wmsVersion == “1.3.0”) {  

  383. origin = map.maxExtent.bottom + ‘,’ + map.maxExtent.left;  

  384. } else {  

  385. origin = map.maxExtent.left + ‘,’ + map.maxExtent.bottom;  

  386. }  

  387.   

  388. tiled.mergeNewParams({  

  389. version : wmsVersion,  

  390. tilesOrigin : origin  

  391. });  

  392. untiled.mergeNewParams({  

  393. version : wmsVersion  

  394. });  

  395. }  

  396.   

  397. function setAntialiasMode(mode) {  

  398. tiled.mergeNewParams({  

  399. format_options : ‘antialias:’ + mode  

  400. });  

  401. untiled.mergeNewParams({  

  402. format_options : ‘antialias:’ + mode  

  403. });  

  404. }  

  405.   

  406. function setPalette(mode) {  

  407. if (mode == ”) {  

  408. tiled.mergeNewParams({  

  409. palette : null  

  410. });  

  411. untiled.mergeNewParams({  

  412. palette : null  

  413. });  

  414. } else {  

  415. tiled.mergeNewParams({  

  416. palette : mode  

  417. });  

  418. untiled.mergeNewParams({  

  419. palette : mode  

  420. });  

  421. }  

  422. }  

  423.   

  424. function setWidth(size) {  

  425. var mapDiv = document.getElementById(‘map’);  

  426. var wrapper = document.getElementById(‘wrapper’);  

  427.   

  428. if (size == “auto”) {  

  429. // reset back to the default value  

  430. mapDiv.style.width = null;  

  431. wrapper.style.width = null;  

  432. } else {  

  433. mapDiv.style.width = size + “px”;  

  434. wrapper.style.width = size + “px”;  

  435. }  

  436. // notify OL that we changed the size of the map div  

  437. map.updateSize();  

  438. }  

  439.   

  440. function setHeight(size) {  

  441. var mapDiv = document.getElementById(‘map’);  

  442. if (size == “auto”) {  

  443. // reset back to the default value  

  444. mapDiv.style.height = null;  

  445. } else {  

  446. mapDiv.style.height = size + “px”;  

  447. }  

  448. // notify OL that we changed the size of the map div  

  449. map.updateSize();  

  450. }  

  451.   

  452. function updateFilter() {  

  453. if (pureCoverage)  

  454. return;  

  455. var filterType = document.getElementById(‘filterType’).value;  

  456. var filter = document.getElementById(‘filter’).value;  

  457. // by default, reset all filters  

  458. var filterParams = {  

  459. filter : null,  

  460. cql_filter : null,  

  461. featureId : null  

  462. };  

  463. if (OpenLayers.String.trim(filter) != “”) {  

  464. if (filterType == “cql”)  

  465. filterParams[“cql_filter”] = filter;  

  466. if (filterType == “ogc”)  

  467. filterParams[“filter”] = filter;  

  468. if (filterType == “fid”)  

  469. filterParams[“featureId”] = filter;  

  470. }  

  471. // merge the new filter definitions  

  472. mergeNewParams(filterParams);  

  473. }  

  474.   

  475. function resetFilter() {  

  476. if (pureCoverage)  

  477. return;  

  478. document.getElementById(‘filter’).value = “”;  

  479. updateFilter();  

  480. }  

  481.   

  482. function mergeNewParams(params) {  

  483. tiled.mergeNewParams(params);  

  484. untiled.mergeNewParams(params);  

  485. }  

  486.   

  487. function showPopup(type) {//弹出层  

  488. //var objDiv = null;//objDiv是目标div  

  489. if (type == ‘insert’) {  

  490. objDiv = document.getElementById(“popDivInsert”);  

  491. } else if (type = ‘delete’) {  

  492. objDiv = document.getElementById(“popDivDelete”);  

  493. }  

  494. objDiv.style.top = “5px”;//设置弹出层距离上边界的距离  

  495. objDiv.style.left = “45px”;//设置弹出层距离左边界的距离  

  496. objDiv.style.width = “300px”;//设置弹出层的宽度  

  497. objDiv.style.height = “220px”;//设置弹出层的高度  

  498. //objDiv.style.display = “block”;  

  499. objDiv.style.visibility = “visible”;  

  500. }  

  501. function hidePopup(type) {//关闭层  

  502. if (type == ‘insert’) {  

  503. objDiv = document.getElementById(“popDivInsert”);  

  504. } else if (type = ‘delete’) {  

  505. objDiv = document.getElementById(“popDivDelete”);  

  506. }  

  507. objDiv.style.visibility = “hidden”;  

  508. }  

  509. </script>  

  510. </head>  

  511. <body onload=“init()”>  

  512. <h1>ECSMAP管理平台</h1>  

  513. <div id=“map”>  

  514. <div id=“toolbar” style=“display: none;”>  

  515. <ul>  

  516. <li><a>WMS version:</a> <select id=“wmsVersionSelector”  

  517. onchange=“setWMSVersion(value)”>  

  518. <option value=“1.1.1”>1.1.1</option>  

  519. <option value=“1.3.0”>1.3.0</option>  

  520. </select></li>  

  521. <li><a>Tiling:</a> <select id=“tilingModeSelector”  

  522. onchange=“setTileMode(value)”>  

  523. <option value=“untiled”>Single tile</option>  

  524. <option value=“tiled”>Tiled</option>  

  525. </select></li>  

  526. <li><a>Transition effect:</a>  

  527. <select id=“transitionEffectSelector” onchange=“setTransitionMode(value)”>  

  528. <option value=“”>None</option>  

  529. <option value=“resize”>Resize</option>  

  530. </select></li>  

  531. <li><a>Antialias:</a> <select id=“antialiasSelector”  

  532. onchange=“setAntialiasMode(value)”>  

  533. <option value=“full”>Full</option>  

  534. <option value=“text”>Text only</option>  

  535. <option value=“none”>Disabled</option>  

  536. </select></li>  

  537. <li><a>Format:</a> <select id=“imageFormatSelector”  

  538. onchange=“setImageFormat(value)”>  

  539. <option value=“image/png”>PNG 24bit</option>  

  540. <option value=“image/png8”>PNG 8bit</option>  

  541. <option value=“image/gif”>GIF</option>  

  542. <option id=“jpeg” value=“image/jpeg”>JPEG</option>  

  543. </select></li>  

  544. <li><a>Styles:</a> <select id=“imageFormatSelector”  

  545. onchange=“setStyle(value)”>  

  546. <option value=“”>Default</option>  

  547. </select></li>  

  548. <li><a>Width/Height:</a> <select id=“widthSelector”  

  549. onchange=“setWidth(value)”>  

  550. <option value=“auto”>Auto</option>  

  551. <option value=“600”>600</option>  

  552. <option value=“750”>750</option>  

  553. <option value=“950”>950</option>  

  554. <option value=“1000”>1000</option>  

  555. <option value=“1200”>1200</option>  

  556. <option value=“1400”>1400</option>  

  557. <option value=“1600”>1600</option>  

  558. <option value=“1900”>1900</option>  

  559. </select> <select id=“heigthSelector” onchange=“setHeight(value)”>  

  560. <option value=“auto”>Auto</option>  

  561. <option value=“300”>300</option>  

  562. <option value=“400”>400</option>  

  563. <option value=“500”>500</option>  

  564. <option value=“600”>600</option>  

  565. <option value=“700”>700</option>  

  566. <option value=“800”>800</option>  

  567. <option value=“900”>900</option>  

  568. <option value=“1000”>1000</option>  

  569. </select></li>  

  570. <li><a>Filter:</a> <select id=“filterType”>  

  571. <option value=“cql”>CQL</option>  

  572. <option value=“ogc”>OGC</option>  

  573. <option value=“fid”>FeatureID</option>  

  574. </select> <input type=“text” size=“80” id=“filter” />   

  575. <img id=“updateFilterButton” src=“http://localhost:8080/geoserver/openlayers/img/east-mini.png” onClick=“updateFilter()” title=“Apply filter” />   

  576. <img id=“resetFilterButton” src=“http://localhost:8080/geoserver/openlayers/img/cancel.png” onClick=“resetFilter()” title=“Reset filter” />  

  577. </li>  

  578. </ul>  

  579. </div>  

  580. <!– id=”toolbar” –>  

  581. <img id=“options” title=“Toggle options toolbar” src=“http://localhost:8080/geoserver/options.png” />  

  582. <div id=“operator”>  

  583. <!–按钮所在div–>  

  584. <input name=“” type=“button” onclick=“location.href = ‘query_point.jsp'” value=“查询所有点” />    

  585. <input name=“” type=“button” onclick=“showPopup(‘insert’)” value=“添加点” />     

  586. <input name=“” type=“button” onclick=“showPopup(‘delete’)” value=“删除点” />  

  587. </div>  

  588. <div id=“popDivInsert”>  

  589. <!–添加point的层–>  

  590. <div id=“popTitle”>  

  591. <!– 标题div –>  

  592. <span class=“title_left”>添加点操作</span> <span class=“title_right”>  

  593. <a href=“” onclick=“hidePopup(‘insert’)”>关闭</a>  

  594. </span>  

  595. </div>  

  596. <div id=“popForm”>  

  597. <!– 表单div –>  

  598. <form action=“insert_point.jsp” method=“post”>  

  599. <p>  

  600.       ID :<input type=“text” name=“id” value=“0” /> </br>   

  601. 名    称 :<input type=“text” name=“name” value=“aaa” /> </br>   

  602. 电压等级 :<input type=“text” name=“voltage_level” value=“110kv” /> </br>  

  603. 经    度 :<input type=“text” name=“lon” value=“121.” /> </br>   

  604. 纬    度 :<input type=“text” name=“lat” value=“28.” /> </br>  

  605. </p>  

  606.    <input type=“submit” value=“提交” />    

  607.    <input type=“reset” value=“重置” />    

  608.    <input type=“reset” value=“取消” onclick=“hidePopup(‘insert’)” />  

  609. </form>  

  610. </div>  

  611. </div>  

  612. <div id=“popDivDelete”><!–删除point的层–>  

  613. <div id=“popTitle”><!– 标题div –>  

  614. <span class=“title_left”>删除点操作</span>   

  615. <span class=“title_right”><a href=“” onclick=“hidePopup(‘delete’);”>关闭</a> </span>  

  616. </div>  

  617. <div id=“popForm”><!– 表单div –>  

  618. <form action=“delete_point.jsp” method=“post”>  

  619. <p>  

  620.   ID :<input type=“text” name=“id” value=“” /> </br> 名称 :<input  

  621. type=“text” name=“name” value=“” /> </br> 经度 :<input type=“text”  

  622. name=“lon” value=“” /> </br> 纬度 :<input type=“text” name=“lat”  

  623. value=“” /></br>  

  624. </p>  

  625.    <input type=“submit” value=“提交” />    

  626.    <input type=“reset” value=“重置” />    

  627.    <input type=“reset” value=“取消” onclick=“hidePopup(‘delete’)” />  

  628. </form>  

  629. </div>  

  630. </div>  

  631. <div id=“wrapper”>  

  632. <div id=“scale”></div>  

  633. <div id=“location”>location</div>  

  634. </div>  

  635. <!– id=”wrapper” –>  

  636. <div id=“nodelist”>  

  637. <p>Click on the map to get feature info</p>  

  638. </div>  

  639. </div><!– id=”map” –>  

  640. </body>  

  641. </html>  


在局域网内的及其访问地图的效果如下图：





下图是点击“添加点”按钮后的效果：


至于query_point.jsp、insert_point.jsp、delete_point.jsp页面的代码，请参见我的前几篇博文。

欢迎给予指导和提出建议。谢谢！



转载自：https://blog.csdn.net/pi9nc/article/details/9883597

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序