devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

openlayers操控图斑的crud增删查改的整套代码_利用openlayers实现图斑的切割 合并 整形

作者：我家自动化 | 2024-06-14 07:55:19

赞

踩

利用openlayers实现图斑的切割 合并 整形

目录

1 增加图斑

2 更新图斑

3 删除图斑

4 执行的共同方法

1 增加图斑

测试代码发现 插入图斑其图形经纬度是正常的经纬度插入 图形更新他妈就变成需要纬经度，所以涉及一个applyTransform 调换经纬度坐标，以符合wfs协议中经纬度的位置

  1. <template>
  2.   <!--地图挂载dom-->
  3.   <div id="map">
  4.   </div>
  5. </template>
  6. <script>
  7.  
  8.  
  9. //引入依赖
  10. import { ImageWMS, TileWMS } from 'ol/source'
  11. import MultiPolygon from 'ol/geom/MultiPolygon.js';
  12. import { Feature, Map, View, geom } from 'ol';
  13. import XYZ from 'ol/source/XYZ';
  14. import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  15. import { Vector as VectorSource } from 'ol/source'
  16. import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  17. import { Polygon } from 'ol/geom'
  18. import * as turf from '@turf/turf';
  19. import { GeoJSON, WFS, GML } from 'ol/format';
  20. import turfData from '../data/turfIntersectData';
  21. import { Draw, Select, Modify } from 'ol/interaction';
  22.  
  23. export default {
  24.   data() {
  25.     return {
  26.       map: null
  27.     }
  28.   },
  29.   mounted() {
  30.     let _this = this;
  31.     //初始化地图
  32.     this.map = new Map({
  33.       target: 'map',//指定挂载dom，注意必须是id
  34.       layers: [
  35.         new ImageLayer({
  36.           opacity: 0.1, //图层透明度
  37.           source: new ImageWMS({
  38.             ratio: 1,
  39.             url: 'http://192.168.10.17:8080/geoserver/custom/wms',
  40.             params: {
  41.               'FORMAT': 'image/png',
  42.               'VERSION': '1.1.1',
  43.               "STYLES": '',
  44.               "LAYERS": 'custom:JGSQGW_Geo',
  45.               "exceptions": 'application/vnd.ogc.se_inimage',
  46.             }
  47.           })
  48.         }),
  49.       ],
  50.       //配置视图
  51.       view: new View({
  52.         //--start-#视图中心位置#-->
  53.         center: [115.794692, 28.621057],
  54.         //--start-#指定坐标系，4326为wgs84地理坐标系统#-->4490
  55.         projection: "EPSG:4326",
  56.         zoom: 12
  57.       })
  58.     });
  59.     this.map.getView().fit([115.77521, 28.18268,
  60.       115.79453, 28.20572], this.map.getSize());
  61.  
  62.  
  63.     // var url1 = "http://localhost:8090/geoserver/HT/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=HT%3Acrud_zhen&maxFeatures=50&outputFormat=application%2Fjson"
  64.     var polygonSource = new VectorSource({
  65.       url:
  66.         "http://192.168.10.162:8080/geoserver/wfs?" +
  67.         "service=WFS&" +
  68.         "version=1.1.0&" +
  69.         "request=GetFeature&" +
  70.         "typeNames=	custom:JGSQGW_Geo&" +
  71.         "outputFormat=json&" +
  72.         "srsname=EPSG:4490",
  73.       format: new GeoJSON({
  74.         geometryName: "geom" // postgis的空间存储字段名
  75.       })
  76.     });
  77.     var polygonLayer = new VectorLayer({
  78.       source: polygonSource,
  79.       style: new Style({
  80.         stroke: new Stroke({
  81.           color: '#0000ff',
  82.           width: 2
  83.         })
  84.       })
  85.     });
  86.     this.map.addLayer(polygonLayer);
  87.  
  88.  
  89.     // 绘制控件
  90.     let drawedFeatures = [];
  91.     let draw = new Draw({
  92.       source: polygonLayer.getSource(),
  93.       type: 'MultiPolygon',
  94.       geometryName: 'geom'                // 注意：这里图形信息字段一定要和后端服务器一致
  95.     });
  96.  
  97.     draw.on('drawend', (event) => {
  98.  
  99.  
  100.       console.log("drawend", event.feature.getGeometry().getCoordinates());
  101.       let ft = new Feature();
  102.       // let properties = polygonLayer.getSource().getFeatures()[0].getProperties();
  103.       //delete properties.geom;
  104.       let properties = {};
  105.       properties.gridone = '大哥向东12';
  106.       properties.gridtwo = '388向东12';
  107.       ft.setProperties(properties);
  108.  
  109.       let geom = event.feature.getGeometry().clone();
  110.       // 调换经纬度坐标，以符合wfs协议中经纬度的位置
  111.       // geom.applyTransform((flatCoordinates, flatCoordinates2, stride) => {
  112.       //   for (var j = 0; j < flatCoordinates.length; j += stride) {
  113.       //     var y = flatCoordinates[j]
  114.       //     var x = flatCoordinates[j + 1]
  115.       //     flatCoordinates[j] = x
  116.       //     flatCoordinates[j + 1] = y
  117.       //   }
  118.       // })
  119.       console.log("geom", geom.getCoordinates());
  120.       ft.setGeometryName('geom');// 一定要放在setGemetry之前
  121.       ft.setGeometry(geom);
  122.  
  123.       _this.transact_crud("insert", ft, "www.custom.com", "custom", ["JGSQGW_Geo"], "EPSG:4490");
  124.  
  125.  
  126.       // let ft = new Feature();
  127.  
  128.       // let properties = polygonLayer.getSource().getFeatures()[0].getProperties();
  129.       // delete properties.geom;
  130.       // properties.gridone = '大哥向东';
  131.       // properties.gridtwo = '388向东';
  132.       // ft.setProperties(properties);
  133.  
  134.       // let geom = event.feature.getGeometry().clone()
  135.  
  136.  
  137.  
  138.       // let feature2 = event.feature;
  139.       // // console.log("drawend",feature.getGeometry().getCoordinates());
  140.       // console.log("drawend", feature);
  141.  
  142.       // // var feature1 = new Feature({
  143.       // //   geom: new ol.geom.MultiPolygon([antitone])
  144.       // // });
  145.       // console.log(event.feature.getGeometry().getCoordinates());
  146.       // var points = event.feature.getGeometry().getCoordinates();
  147.  
  148.       // var antitone = [[]];
  149.       // points[0].map(function (val, index) {
  150.       //   //var point = new proj.toLonLat(val);
  151.       //   // antitone[0].push([point[1], point[0]]);
  152.       //   antitone[0].push([val[1], val[0]]);
  153.       // });
  154.  
  155.  
  156.       // //  let ft = new Feature()
  157.       // //  ft.setGeometryName('geom')
  158.       // //  ft.setGeometry(new MultiPolygon([antitone]));
  159.       // //  ft.set("gridone", "大哥向东"); //这里可以设置其他属性
  160.  
  161.  
  162.  
  163.       // var feature = new Feature({
  164.       //   // geometry: new MultiPolygon([antitone]),
  165.       //   geometry: new MultiPolygon(points),
  166.       //   //geometry: new Polygon([antitone])
  167.       // });
  168.  
  169.  
  170.  
  171.  
  172.       // let properties = polygonLayer.getSource().getFeatures()[0].getProperties()
  173.       // console.log("properties", properties);
  174.       // delete properties.geom;
  175.  
  176.       // console.log("properties2", properties);
  177.       // properties.gridone = '大哥向东';
  178.       // properties.gridtwo = '小弟向下';
  179.       // ft.setProperties(properties)
  180.  
  181.       // let geom = feature.getGeometry().clone()
  182.       // ft.setGeometryName('geom') // 一定要放在setGemetry之前
  183.       // ft.setGeometry(geom)
  184.  
  185.       // //为要素添加属性，我这里随便设置属性
  186.       // feature.set('gridone', '大哥向东');
  187.       // // // let ft = new ol.Feature();
  188.       // // // let ft = new Feature();
  189.       // feature.set('gridtwo', '小弟向下');
  190.  
  191.       // console.log("ft_feature", feature);
  192.  
  193.  
  194.  
  195.       // let properties = polygonLayer.getSource().getFeatures()[0].getProperties();
  196.       // //let geom = feature.getGeometry()
  197.       // properties.type = 'road'
  198.       // properties.type1 = 'road1'
  199.       // delete properties.type1
  200.       // console.log("properties", properties);
  201.       // console.log("properties222", polygonLayer.getSource().getFeatures()[0]);
  202.  
  203.       // drawedFeatures.push(event.feature);
  204.       // console.log("event.feature", event.feature);
  205.       // _this.addFeatureWFS(drawedFeatures);
  206.       // _this.transact_crud("insert", event.feature, "www.custom.com", "custom", ["JGSQGW_Geo"], "EPSG:4490");
  207.      // _this.transact_crud("insert", ft, "www.custom.com", "custom", ["JGSQGW_Geo"], "EPSG:4490");
  208.     });
  209.     this.map.addInteraction(draw);
  210.     draw.setActive(true);
  211.  
  212.  
  213.   },
  214.   computed: {
  215.  
  216.   },
  217.   methods: {
  218.     // transType为增删改类型
  219.     // feat为要增删改的要素
  220.     transact_crud(transType, feat, featureNS, featurePrefix, featureType, srsName) {
  221.       if (featureNS == "" || featurePrefix == "" || featureType == "" || srsName == "") {
  222.         return;
  223.       }
  224.       var formatWFS = new WFS();
  225.       var formatGML = new GML({
  226.         featureNS,
  227.         featurePrefix,
  228.         featureType,
  229.         gmlOptions: { srsName }
  230.       });
  231.       let transact_xml = null;
  232.       switch (transType) {
  233.         case "insert":
  234.           transact_xml = formatWFS.writeTransaction([feat], null, null, formatGML);
  235.           break;
  236.         case "update":
  237.           transact_xml = formatWFS.writeTransaction(null, [feat], null, formatGML);
  238.           break;
  239.         case "delete":
  240.           transact_xml = formatWFS.writeTransaction(null, null, [feat], formatGML);
  241.           break;
  242.       }
  243.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  244.  
  245.       // 使用Fetch将请求发送到后端
  246.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  247.         method: 'POST',
  248.         body: transact_str,
  249.         headers: {
  250.           'Content-Type': 'text/xml'
  251.         }
  252.       }).then(res => res.text()).then(res => {
  253.         // let transactRes = WFS.readTransactionResponse(res);
  254.         // let str = transactRes.transactionSummary.totalInserted +
  255.         //   " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  256.         // str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  257.         // str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  258.         // alert(str);
  259.       });
  260.  
  261.  
  262.     },
  263.  
  264.     addFeatureWFS(features) {
  265.       let WFSGML = new WFS();
  266.       // 生成XML格式的WFS请求信息
  267.       let transact_xml = WFSGML.writeTransaction(features, null, null, {
  268.         srcName: 'EPSG:4490',
  269.         featureNS: "www.custom.com",
  270.         featurePrefix: "custom",
  271.         featureType: ["JGSQGW_Geo"],
  272.       }
  273.       );
  274.       // 将XML格式请求信息序列化为字符串格式
  275.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  276.       // 使用Fetch将请求发送到后端
  277.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  278.         method: 'POST',
  279.         body: transact_str,
  280.         headers: {
  281.           'Content-Type': 'text/xml'
  282.         }
  283.       }).then(res => res.text()).then(res => {
  284.         let transactRes = WFS.readTransactionResponse(res);
  285.         let str = transactRes.transactionSummary.totalInserted +
  286.           " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  287.         str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  288.         str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  289.         alert(str);
  290.       });
  291.     },
  292.  
  293.  
  294.  
  295.  
  296.  
  297.     // feat为要增删改的要素
  298.     // layerName为要进行操作的目标图层名称
  299.     transact(feature, layerName) {
  300.       if (layerName == "") {
  301.         return;
  302.       }
  303.       // 将选中的要素序列化为字符串格式
  304.       var formatWFS = new WFS();
  305.       var formatGML = new GML({
  306.         featureNS: "www.custom.com",
  307.         featurePrefix: "custom",
  308.         featureType: ["JGSQGW_Geo"],
  309.         gmlOptions: { srsName: "EPSG:4490" }
  310.       });
  311.       let transact_str = formatWFS.writeTransaction(null, null, [feature], formatGML);
  312.  
  313.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  314.         method: 'POST',
  315.         body: new XMLSerializer().serializeToString(featureRequest),
  316.         headers: {
  317.           'Content-Type': 'text/xml'
  318.         }
  319.       }).then((response) => {
  320.         console.log("response", response);
  321.         return response.text();
  322.       })
  323.         .then((res) => {
  324.           let transactRes = formatWFS.readTransactionResponse(res);
  325.           let str = transactRes.transactionSummary.totalInserted +
  326.             " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  327.           str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  328.           str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  329.           alert(str);
  330.         });
  331.  
  332.     },
  333.  
  334.  
  335.   },
  336. }
  337. </script>
  338. <style scoped>
  339. #map {
  340.   width: 100%;
  341.   height: 100%;
  342. }
  343. </style>

2 更新图斑

  1. <template>
  2.   <!--地图挂载dom-->
  3.   <div id="map">
  4.     <div class="btn">
  5.       <el-button type="success" @click="updateFeature">111</el-button>
  6.     </div>
  7.   </div>
  8. </template>
  9. <script>
  10.  
  11.  
  12. //引入依赖
  13. import { ImageWMS, TileWMS } from 'ol/source'
  14.  
  15. import { Feature, Map, View } from 'ol';
  16. import XYZ from 'ol/source/XYZ';
  17. import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  18. import { Vector as VectorSource } from 'ol/source'
  19. import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  20. import { Polygon } from 'ol/geom'
  21. import * as turf from '@turf/turf';
  22. import { GeoJSON, WFS, GML } from 'ol/format';
  23. import turfData from '../data/turfIntersectData';
  24. import { Draw, Select, Modify } from 'ol/interaction';
  25.  
  26. export default {
  27.   data() {
  28.     return {
  29.       map: null,
  30.       modifiedFeatures: []
  31.     }
  32.   },
  33.   mounted() {
  34.     let _this = this;
  35.     //初始化地图
  36.     this.map = new Map({
  37.       target: 'map',//指定挂载dom，注意必须是id
  38.       layers: [
  39.         new ImageLayer({
  40.           opacity: 0.1, //图层透明度
  41.           source: new ImageWMS({
  42.             ratio: 1,
  43.             url: 'http://192.168.10.162:8080/geoserver/custom/wms',
  44.             params: {
  45.               'FORMAT': 'image/png',
  46.               'VERSION': '1.1.1',
  47.               "STYLES": '',
  48.               "LAYERS": 'custom:JGSQGW_Geo',
  49.               "exceptions": 'application/vnd.ogc.se_inimage',
  50.             }
  51.           })
  52.         }),
  53.       ],
  54.       //配置视图
  55.       view: new View({
  56.         //--start-#视图中心位置#-->
  57.         center: [115.794692, 28.621057],
  58.         //--start-#指定坐标系，4326为wgs84地理坐标系统#-->4490
  59.         projection: "EPSG:4326",
  60.         zoom: 12
  61.       })
  62.     });
  63.     this.map.getView().fit([115.77521, 28.18268,
  64.       115.79453, 28.20572], this.map.getSize());
  65.  
  66.  
  67.     // var url1 = "http://localhost:8090/geoserver/HT/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=HT%3Acrud_zhen&maxFeatures=50&outputFormat=application%2Fjson"
  68.     var polygonSource = new VectorSource({
  69.       url:
  70.         "http://192.168.10.162:8080/geoserver/wfs?" +
  71.         "service=WFS&" +
  72.         "version=1.1.0&" +
  73.         "request=GetFeature&" +
  74.         "typeNames=	custom:JGSQGW_Geo&" +
  75.         "outputFormat=json&" +
  76.         "srsname=EPSG:4490",
  77.       format: new GeoJSON({
  78.         geometryName: "geom" // postgis的空间存储字段名
  79.       })
  80.     });
  81.     var polygonLayer = new VectorLayer({
  82.       source: polygonSource,
  83.       style: new Style({
  84.         stroke: new Stroke({
  85.           color: '#0000ff',
  86.           width: 2
  87.         })
  88.       })
  89.     });
  90.     this.map.addLayer(polygonLayer);
  91.  
  92.     // 选择要素控件
  93.     let select = new Select({
  94.       layers: [polygonLayer],
  95.       hitTolerance: 10,
  96.       style: new Style({
  97.         stroke: new Stroke({
  98.           color: 'red',
  99.           width: 2
  100.         })
  101.       })
  102.     });
  103.     this.map.addInteraction(select);
  104.  
  105.     // 修改要素控件
  106.     let modify = new Modify({
  107.       features: select.getFeatures(),
  108.       style: new Style({
  109.         stroke: new Stroke({
  110.           color: 'black',
  111.           width: 2
  112.         })
  113.       }),
  114.     });
  115.  
  116.     this.map.addInteraction(modify);
  117.     modify.on("modifyend", function (e) {
  118.       console.log("modifyend");
  119.       var feature = e.features.item(0).clone();
  120.       feature.setId(e.features.item(0).getId());
  121.       var geomType = feature.getGeometry().getType().toLowerCase(); //openlayers绘制类型
  122.       let geom = feature.getGeometry().getCoordinates();
  123.       console.log("getCoordinates", geom);
  124.       // 调换经纬度坐标，以符合wfs协议中经纬度的位置
  125.       feature
  126.         .getGeometry()
  127.         .applyTransform(function (flatCoordinates, flatCoordinates2, stride) {
  128.           for (var j = 0; j < flatCoordinates.length; j += stride) {
  129.             var y = flatCoordinates[j];
  130.             var x = flatCoordinates[j + 1];
  131.             flatCoordinates[j] = x;
  132.             flatCoordinates[j + 1] = y;
  133.           }
  134.         });
  135.       console.log("getCoordinates2", feature.getGeometry().getCoordinates());
  136.       _this.transact_crud("update", feature, "www.custom.com", "custom", "JGSQGW_Geo", "EPSG:4490");
  137.     });
  138.   },
  139.   computed: {
  140.  
  141.   },
  142.   methods: {
  143.  
  144.  
  145.     updateFeature() {
  146.       let _this = this;
  147.       let features = [];
  148.       this.modifiedFeatures.forEach(function (item, index, array) {
  149.         console.log("item", item);
  150.         features.push(item);
  151.         //_this.updateWFS(features);
  152.         _this.transact_crud("update", item, "www.custom.com", "custom", "JGSQGW_Geo", "EPSG:4490");
  153.  
  154.       });
  155.  
  156.     },
  157.     updateWFS(features) {
  158.       let WFSs = new WFS();
  159.       // 生成XML格式的WFS请求信息
  160.       let transact_xml = WFSs.writeTransaction(
  161.         null, features, null,
  162.         {
  163.           srcName: 'EPSG:4490',
  164.           featureNS: "www.custom.com",
  165.           // featurePrefix: "custom",
  166.           featureType: "JGSQGW_Geo",
  167.         }
  168.       )
  169.       // 将XML格式请求信息序列化为字符串格式
  170.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  171.       // 使用Fetch将请求发送到后端
  172.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  173.         method: 'POST',
  174.         body: transact_str,
  175.         headers: {
  176.           'Content-Type': 'text/xml'
  177.         }
  178.       }).then(res => res.text()).then(res => {
  179.         console.log(res);
  180.       });
  181.     }
  182.     ,
  183.     // transType为增删改类型
  184.     // feat为要增删改的要素
  185.     transact_crud(transType, feat, featureNS, featurePrefix, featureType, srsName) {
  186.  
  187.       if (featureNS == "" || featurePrefix == "" || srsName == "") {
  188.         return;
  189.       }
  190.       var formatWFS = new WFS();
  191.       var formatGML = new GML({
  192.         featureNS,
  193.         featurePrefix,
  194.         featureType,
  195.         gmlOptions: { srsName }
  196.       });
  197.       let transact_xml = null;
  198.       switch (transType) {
  199.         case "insert":
  200.           transact_xml = formatWFS.writeTransaction([feat], null, null, formatGML);
  201.           break;
  202.         case "update":
  203.           transact_xml = formatWFS.writeTransaction(null, [feat], null, formatGML);
  204.           break;
  205.         case "delete":
  206.           transact_xml = formatWFS.writeTransaction(null, null, [feat], formatGML);
  207.           break;
  208.       }
  209.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  210.  
  211.       // 使用Fetch将请求发送到后端
  212.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  213.         method: 'POST',
  214.         body: transact_str,
  215.         headers: {
  216.           'Content-Type': 'text/xml'
  217.         }
  218.       }).then(res => res.text()).then(res => {
  219.  
  220.         // let transactRes = WFS.readTransactionResponse(res);
  221.         // let str = transactRes.transactionSummary.totalInserted +
  222.         //   " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  223.         // str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  224.         // str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  225.         // alert(str);
  226.       });
  227.  
  228.  
  229.     },
  230.  
  231.     addFeatureWFS(features) {
  232.       let WFSGML = new WFS();
  233.       // 生成XML格式的WFS请求信息
  234.       let transact_xml = WFSGML.writeTransaction(features, null, null, {
  235.         srcName: 'EPSG:4490',
  236.         featureNS: "www.custom.com",
  237.         featurePrefix: "custom",
  238.         featureType: ["JGSQGW_Geo"],
  239.       }
  240.       );
  241.       // 将XML格式请求信息序列化为字符串格式
  242.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  243.       // 使用Fetch将请求发送到后端
  244.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  245.         method: 'POST',
  246.         body: transact_str,
  247.         headers: {
  248.           'Content-Type': 'text/xml'
  249.         }
  250.       }).then(res => res.text()).then(res => {
  251.         let transactRes = WFS.readTransactionResponse(res);
  252.         let str = transactRes.transactionSummary.totalInserted +
  253.           " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  254.         str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  255.         str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  256.         alert(str);
  257.       });
  258.     },
  259.  
  260.  
  261.  
  262.  
  263.  
  264.     // feat为要增删改的要素
  265.     // layerName为要进行操作的目标图层名称
  266.     transact(feature, layerName) {
  267.       if (layerName == "") {
  268.         return;
  269.       }
  270.       // 将选中的要素序列化为字符串格式
  271.       var formatWFS = new WFS();
  272.       var formatGML = new GML({
  273.         featureNS: "www.custom.com",
  274.         featurePrefix: "custom",
  275.         featureType: ["JGSQGW_Geo"],
  276.         gmlOptions: { srsName: "EPSG:4490" }
  277.       });
  278.       let transact_str = formatWFS.writeTransaction(null, null, [feature], formatGML);
  279.  
  280.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  281.         method: 'POST',
  282.         body: new XMLSerializer().serializeToString(featureRequest),
  283.         headers: {
  284.           'Content-Type': 'text/xml'
  285.         }
  286.       }).then((response) => {
  287.         console.log("response", response);
  288.         return response.text();
  289.       })
  290.         .then((res) => {
  291.           let transactRes = formatWFS.readTransactionResponse(res);
  292.           let str = transactRes.transactionSummary.totalInserted +
  293.             " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  294.           str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  295.           str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  296.           alert(str);
  297.         });
  298.  
  299.     },
  300.  
  301.  
  302.   },
  303. }
  304. </script>
  305. <style scoped>
  306. #map {
  307.   width: 100%;
  308.   height: 100%;
  309.  
  310.   .btn {}
  311. }
  312. </style>

3 删除图斑

  1. <template>
  2.   <!--地图挂载dom-->
  3.   <div id="map">
  4.   </div>
  5. </template>
  6. <script>
  7.  
  8.  
  9. //引入依赖
  10. import { ImageWMS, TileWMS } from 'ol/source'
  11.  
  12. import { Feature, Map, View } from 'ol';
  13. import XYZ from 'ol/source/XYZ';
  14. import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  15. import { Vector as VectorSource } from 'ol/source'
  16. import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  17. import { Polygon } from 'ol/geom'
  18. import * as turf from '@turf/turf';
  19. import { GeoJSON, WFS, GML } from 'ol/format';
  20. import turfData from '../data/turfIntersectData';
  21. import { Draw, Select } from 'ol/interaction';
  22. export default {
  23.   data() {
  24.     return {
  25.       map: null
  26.     }
  27.   },
  28.   mounted() {
  29.     let _this = this;
  30.     //初始化地图
  31.     this.map = new Map({
  32.       target: 'map',//指定挂载dom，注意必须是id
  33.       layers: [
  34.         new ImageLayer({
  35.           opacity: 0.1, //图层透明度
  36.           source: new ImageWMS({
  37.             ratio: 1,
  38.             url: 'http://192.168.10.162:8080/geoserver/custom/wms',
  39.             params: {
  40.               'FORMAT': 'image/png',
  41.               'VERSION': '1.1.1',
  42.               "STYLES": '',
  43.               "LAYERS": 'custom:JGSQGW_Geo',
  44.               "exceptions": 'application/vnd.ogc.se_inimage',
  45.             }
  46.           })
  47.         }),
  48.       ],
  49.       //配置视图
  50.       view: new View({
  51.         //--start-#视图中心位置#-->
  52.         center: [115.794692, 28.621057],
  53.         //--start-#指定坐标系，4326为wgs84地理坐标系统#-->4490
  54.         projection: "EPSG:4326",
  55.         zoom: 12
  56.       })
  57.     });
  58.     this.map.getView().fit([115.77521, 28.18268,
  59.       115.79453, 28.20572], this.map.getSize());
  60.  
  61.  
  62.     // var url1 = "http://localhost:8090/geoserver/HT/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=HT%3Acrud_zhen&maxFeatures=50&outputFormat=application%2Fjson"
  63.     var polygonSource = new VectorSource({
  64.       url:
  65.         "http://192.168.10.162:8080/geoserver/wfs?" +
  66.         "service=WFS&" +
  67.         "version=1.1.0&" +
  68.         "request=GetFeature&" +
  69.         "typeNames=	custom:JGSQGW_Geo&" +
  70.         "outputFormat=json&" +
  71.         "srsname=EPSG:4490",
  72.       format: new GeoJSON({
  73.         geometryName: "geom" // postgis的空间存储字段名
  74.       })
  75.     });
  76.     var polygonLayer = new VectorLayer({
  77.       source: polygonSource
  78.     });
  79.     this.map.addLayer(polygonLayer);
  80.  
  81.  
  82.     var select = new Select();
  83.     this.map.addInteraction(select);
  84.     // 选中要素后执行删除操作
  85.     select.on("select", function (e) {
  86.       // console.log("null11");
  87.       if (select.getFeatures().getLength() == 0) {
  88.         // console.log("null");
  89.       } else {
  90.         let featureId = e.target
  91.           .getFeatures()
  92.           .getArray()[0]
  93.           .getId();
  94.         var feature;
  95.         // console.log("null", e.target.getFeatures());
  96.         feature = polygonSource.getFeatureById(featureId);
  97.         // 从地图删除
  98.         polygonSource.removeFeature(feature);
  99.         e.target.getFeatures().clear();
  100.         // 从数据库删除
  101.         _this.transact(feature, "JGSQGW_Geo");
  102.       }
  103.     });
  104.  
  105.  
  106.  
  107.   },
  108.   computed: {
  109.  
  110.   },
  111.   methods: {
  112.     // feat为要增删改的要素
  113.     // layerName为要进行操作的目标图层名称
  114.      transact(feature, layerName) {
  115.       if (layerName == "") {
  116.         return;
  117.       }
  118.       // 将选中的要素序列化为字符串格式
  119.       var formatWFS = new WFS();
  120.       var formatGML = new GML({
  121.         featureNS: "www.custom.com",
  122.         featurePrefix: "custom",
  123.         featureType: layerName,
  124.         gmlOptions: { srsName: "EPSG:4490" }
  125.       });
  126.       var featureRequest = formatWFS.writeTransaction(null, null, [feature], formatGML);
  127.       // var s = new XMLSerializer();
  128.       // str = s.serializeToString(featureRequest);
  129.       // 发送post请求获取图层要素
  130.  
  131.       // var aaa = '<?xml version="1.0" encoding="UTF-8"?><wfs:TransactionResponse xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:ows="http://www.opengis.net/ows" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.10.17:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd"><wfs:TransactionSummary><wfs:totalInserted>0</wfs:totalInserted><wfs:totalUpdated>0</wfs:totalUpdated><wfs:totalDeleted>1</wfs:totalDeleted></wfs:TransactionSummary><wfs:TransactionResults/><wfs:InsertResults><wfs:Feature><ogc:FeatureId fid="none"/></wfs:Feature></wfs:InsertResults></wfs:TransactionResponse>';
  132.       // console.log("aaa", new XMLSerializer().serializeToString(aaa));
  133.  
  134.  
  135.       fetch('http://192.168.10.17:8080/geoserver/wfs', {
  136.         method: 'POST',
  137.         body: new XMLSerializer().serializeToString(featureRequest),
  138.         headers: {
  139.           'Content-Type': 'text/xml'
  140.         }
  141.       }).then((response) => {
  142.         console.log("response", response);
  143.         return response.text();
  144.       })
  145.         .then((res) => {
  146.           let transactRes = formatWFS.readTransactionResponse(res);
  147.           let str = transactRes.transactionSummary.totalInserted +
  148.             " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  149.           str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  150.           str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  151.           alert(str);
  152.           const layers = this.map.getLayers().getArray();
  153.           if (layers.length > 0) {
  154.             layers.forEach((item) => {
  155.               item.getSource().refresh(); //这句代码
  156.             });
  157.           }
  158.         });
  159.  
  160.     },
  161.     
  162.  
  163.   },
  164. }
  165. </script>
  166. <style scoped>
  167. #map {
  168.   width: 100%;
  169.   height: 100%;
  170. }
  171. </style>

4 执行的共同方法

  1. transact_crud(transType, feat, featureNS, featurePrefix, featureType, srsName) {
  2.       if (featureNS == "" || featurePrefix == "" || featureType == "" || srsName == "") {
  3.         return;
  4.       }
  5.       var formatWFS = new WFS();
  6.       var formatGML = new GML({
  7.         featureNS,
  8.         featurePrefix,
  9.         featureType,
  10.         gmlOptions: { srsName }
  11.       });
  12.       let transact_xml = null;
  13.       switch (transType) {
  14.         case "insert":
  15.           transact_xml = formatWFS.writeTransaction([feat], null, null, formatGML);
  16.           break;
  17.         case "update":
  18.           transact_xml = formatWFS.writeTransaction(null, [feat], null, formatGML);
  19.           break;
  20.         case "delete":
  21.           transact_xml = formatWFS.writeTransaction(null, null, [feat], formatGML);
  22.           break;
  23.       }
  24.       let transact_str = (new XMLSerializer()).serializeToString(transact_xml);
  25.  
  26.       // 使用Fetch将请求发送到后端
  27.       fetch('http://192.168.10.162:8080/geoserver/wfs', {
  28.         method: 'POST',
  29.         body: transact_str,
  30.         headers: {
  31.           'Content-Type': 'text/xml'
  32.         }
  33.       }).then(res => res.text()).then(res => {
  34.         // let transactRes = WFS.readTransactionResponse(res);
  35.         // let str = transactRes.transactionSummary.totalInserted +
  36.         //   " totalInserted!, insertIds: " + transactRes.insertIds + "\n";
  37.         // str += transactRes.transactionSummary.totalUpdated + " totalUpdated!\n";
  38.         // str += transactRes.transactionSummary.totalDeleted + " totalDeleted!";
  39.         // alert(str);
  40.       });
  41.  
  42.  
  43.     },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/717125
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号