一、删除点

:::success 1、添加交互式的点画笔获取点的坐标
2、通过点的坐标,调用Point类的query方法查询fid
3、查询到要素的fid,调用删除服务
4、回调函数中更新图层 :::

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./dist/include-openlayers-local.js"></script>
  9.     <script src="./js/TIAN.js"></script>
  10.     <script src="./js/Draw.js"></script>
  11.     <script src="./edit/Point.js"></script>
  12. </head>
  14. <body>
  15.     <button onclick="active()">激活画笔</button>
  16.     <div id="map_container">
  17.     </div>
  18.     <script>
  19.         var docLayer = new Zondy.Map.Doc('', 'city', {
  20.             ip: 'localhost',
  21.             port: 6163
  22.         })
  23.         var map = new ol.Map({
  24.             target: "map_container",
  25.             layers: [gaodeMapLayer, docLayer],
  26.             view: new ol.View({
  27.                 projection: 'EPSG:4326',
  28.                 center: [114.30, 30.50],
  29.                 zoom: 4
  30.             })
  31.         })
  32.         /* 
  33.         1、基于点的交互式查询 坐标
  34.          */
  35.         //1-1 创建画布
  36.         var source = new ol.source.Vector({
  37.             wrapX: false
  38.         });
  39.         var layer = new ol.layer.Vector({
  40.             source
  41.         })
  42.         map.addLayer(layer);
  43.         let draw;
  45.         function active() {
  46.             draw = createDraw({
  47.                 type: "Point",
  48.                 source,
  49.                 callback: handleDraw
  50.             })
  51.             map.addInteraction(draw)
  52.         }
  54.         function handleDraw(e) {
  55.            //2、根据坐标调用Point类的query方法,查询到fid
  56.             var position = e.feature.getGeometry().getCoordinates();
  57.             Point.query({
  58.                 position,
  59.                 service: {
  60.                     name: "city",
  61.                     layerId: 0,
  62.                 },
  63.                 querySuccess
  64.             })
  65.         }
  66.         /* 3、查询到FID调用删除服务 */
  67.         function querySuccess(result) {
  68.             try {
  69.                 var FID = result.SFEleArray[0].FID
  70.                 console.log(FID)
  71.                 if (confirm("你确认要删除吗")) {
  72.                     const deleteService = new Zondy.Service.EditDocFeature(
  73.                         'city',
  74.                         0, {
  75.                             ip: "localhost",
  76.                             port: 6163
  77.                         }
  78.                     )
  79.                     deleteService.deletes(FID, deleteSuccess)
  80.                 }
  81.             } catch (err) {
  82.                 console.log("查询不到要素")
  83.             }
  84.         }
  85.         /* 4、删除成功的回调 */
  86.         function deleteSuccess(data) {
  87.             if (data.succeed) {
  88.                 alert('删除成功')
  89.                 docLayer.refresh(); //重新加载地图文档
  90.             } else {
  91.                 alert('删除失败')
  92.             }
  93.         }
  94.     </script>
  95. </body>
  97. </html>

二、封装删除

因为删除具备通用性，可以删除点要素。也可以删除线，面要素。所以可以单独封装 DeleteFeature.js

  1. function delFeature({
  2.     FID,
  3.     service,
  4.     layer
  5. }) {
  6.     const deleteService = new Zondy.Service.EditDocFeature(
  7.         service.name,
  8.         service.layerId, {
  9.             ip: "localhost",
  10.             port: 6163
  11.         }
  12.     )
  13.     deleteService.deletes(FID, deleteSuccess(layer))
  14. }
  15. function deleteSuccess(layer) {
  16.     return function (data) {
  17.         if (data.succeed) {
  18.             alert('删除要素成功')
  19.             layer.refresh(); //重新加载地图文档
  20.         } else {
  21.             alert('删除要素失败')
  22.         }
  23.     }
  25. }