image.png
    点击激活按钮之后,有一个选中点的表格弹窗

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" >
    10.     <script src="../lib/include-openlayers-local.js"></script>
    11.     <script src="../js/Gaode.js"></script>
    12.     <script src="../js/draw.js"></script>
    13.     <script src="../js/zd_docEdit_Polygon.js"></script>
    14. </head>
    16. <body>
    17.     <button  class="btn btn-primary" onclick="active()">激活</button>
    19.       <!-- Modal -->
    20.       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    21.         <div class="modal-dialog" role="document">
    22.           <div class="modal-content">
    23.             <div class="modal-header">
    24.               <h4 class="modal-title" id="myModalLabel">选中的城市列表</h4>
    25.               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    27.             </div>
    28.             <div class="modal-body">
    30.               <table class="table table-hover">
    31.                   <thead>
    32.                       <tr>
    33.                           <th>FID</th>
    34.                           <th>图层</th>
    35.                           <th>id</th>
    36.                           <th>name</th>
    37.                       </tr>
    38.                   </thead>
    39.                   <tbody>
    41.                   </tbody>
    42.               </table>
    44.             </div>
    45.           </div>
    46.         </div>
    47.       </div>
    48.     <div id="map_container">
    50.     </div>
    51.     <script>
    52.         const docLayer = new Zondy.Map.Doc('', 'p1_city', {
    53.             ip: 'localhost',
    54.             port: '6163'
    55.         })
    56.         const map = new ol.Map({
    57.             target: "map_container",
    58.             layers: [gaode, docLayer],
    59.             view: new ol.View({
    60.                 center: [114, 30],
    61.                 projection: 'EPSG:4326',
    62.                 zoom: 4
    63.             })
    64.         })
    65.         const source = new ol.source.Vector({
    66.             wrapX: false
    67.         })
    68.         const layer = new ol.layer.Vector({
    69.             source: source
    70.         })
    71.         map.addLayer(layer);
    72.         //2.3 创建画笔
    73.         let draw = null;
    75.         function active() {
    76.             //清空之前的数据
    77.             source.clear();
    78.             draw = createDraw({
    79.                 type: "Rectangle",
    80.                 source,
    81.                 callback: handleDraw
    82.             })
    83.             map.addInteraction(draw);
    84.         }
    86.         function handleDraw(e) {
    87.             map.removeInteraction(draw)
    88.             /* 3、调用拉框查询 */
    89.             var geom = e.feature.getGeometry();
    90.             Polygon.queryByGeom({
    91.                 geom,
    92.                 service: {
    93.                     name: "city01",
    94.                     layerId: 0
    95.                 },
    96.                 querySuccess
    97.             })
    99.         }
    100.         function querySuccess(result){
    101.             console.log(result.SFEleArray)
    102.             var arr = result.SFEleArray;
    103.             $('.table tbody').html("")
    104.             arr.forEach(item=>{
    105.                 var tds  = item.AttValue.map(i=>{
    106.                     return `<td>${i}</td>`
    107.                 })
    108.                 var tr = `<tr><td>${item.FID}</td>${tds.join("")}</tr>`
    109.                 $(".table tbody").append(tr);
    110.             })
    111.             $("#myModal").modal("show");
    112.             map.removeInteraction(draw)
    113.         }
    114.         function queryError(e){
    115.             console.log(e)
    116.         }
    117.     </script>
    118.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
    119.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" ></script>
    120. </body>
    122. </html>