Openlayer对wfs服务进行增删改查
注意：ol版本要用5.3.3，保证new GeoJson正常使用。6.1.1中不能用new GeoJSON（）
查询数据
查询链接：
http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson
方式1：
<template>
<div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
};
},
created() {},
mounted() {
this.initMap();
},
computed: {},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: new VectorSource({
//以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
// url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",
format: new GeoJSON(),
}),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 8,
}),
});
},
},
};
</script>
方式2：通过writeGetFeature
<template>
<div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon } from "ol/geom";
import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
};
},
created() {},
mounted() {
this.initMap();
this.addLayer();
},
computed: {},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 7,
}),
});
},
async addLayer() {
// 发送请求
let json = await fetch("http://120.76.197.111:8090/geoserver/wfs", {
method: "post",
body: new XMLSerializer().serializeToString(
new WFS().writeGetFeature({
srsName: "EPSG:4326", //坐标系
featureNS: "www.csdn_data.com", // 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: "csdn_data", //工作区的命名
featureTypes: ["sichuan"], //所要访问的图层
maxFeatures: 5000,
outputFormat: "application/json",
})
),
}).then((response) => {
return response.json();
});
let features = new GeoJSON().readFeatures(json);
this.vectorlayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorlayer.getSource().addFeatures(features);
this.map.addLayer(this.vectorlayer);
},
},
};
</script>
新增数据
目前，只能对面进行新增和编辑，不能对点和线进行新增和编辑！
ol.format.wfs的writeTransaction方法，接受4个参数，前三个参数依次分别是要插入、更新、删除操作对应的Feature对象，以数组的形式。第4个参数是一个对象，里面定义了geoserver服务的相关信息。可以在一个Transaction操作中同时执行插入、更新、和删除操作。
<template>
<div>
<div style="position: fixed; top: 200px; left: 200px; z-index: 90000">
<el-button @click="startDraw()">开始绘制</el-button>
<el-button @click="saveDraw(featureDraw)">保存绘制</el-button>
</div>
<div id="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon, MultiPolygon } from "ol/geom";
import { Select, Draw, Modify } from "ol/interaction";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
draw: {},
featureDraw: {},
};
},
created() {},
mounted() {
this.initMap();
this.addLayer();
},
computed: {},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 7,
}),
});
},
async addLayer() {
// 发送请求
let json = await fetch(
"http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=500&outputFormat=application%2Fjson"
).then((response) => {
return response.json();
});
let features = new GeoJSON().readFeatures(json);
this.vectorlayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorlayer.getSource().addFeatures(features);
this.map.addLayer(this.vectorlayer);
},
//开始绘制
startDraw() {
// 绘制;
this.draw = new Draw({
type: "Polygon", // 设定为多边形
source: this.vectorlayer.getSource(),
});
this.map.addInteraction(this.draw);
this.draw.on("drawend", (e) => {
this.featureDraw = e.feature;
});
},
//保存绘制
saveDraw(feature) {
this.map.removeInteraction(this.draw);
// 转换坐标
let geometry = feature.getGeometry().clone();
geometry.applyTransform(function (
flatCoordinates,
flatCoordinates2,
stride
) {
for (let j = 0; j < flatCoordinates.length; j += stride) {
let y = flatCoordinates[j];
let x = flatCoordinates[j + 1];
flatCoordinates[j] = x;
flatCoordinates[j + 1] = y;
}
});
// // 设置feature对应的属性，这些属性是根据数据源的字段来设置的
let newFeature = new Feature();
newFeature.setGeometryName("the_geom");
newFeature.setProperties({ name: "赵六", level: "城市" });
// newFeature.set("name", "王五");
// newFeature.set("center", "(2:103.931804,30.652329)");
// newFeature.set("centroid", "(2:103.931804,30.652329)");
// newFeature.set("childrenNu", 2);
// newFeature.set("level", "城市");
// newFeature.set("parent", '{ "adcode": 510000 }');
// newFeature.set("subFeature", 1);
// newFeature.set("acroutes", "(2:100000,510000)");
newFeature.set("adcode", 12345);
newFeature.setGeometry(new MultiPolygon([geometry.getCoordinates()]));
let featString = new XMLSerializer().serializeToString(
new WFS().writeTransaction([newFeature], null, null, {
featureType: "sichuan",
featureNS: "www.csdn_data.com",
srsName: "EPSG:4326",
})
);
let request = new XMLHttpRequest();
request.open(
"POST",
"http://120.76.197.111:8090/geoserver/wfs?service=wfs"
);
request.setRequestHeader("Content-Type", "text/xml");
request.send(featString);
},
},
};
</script>
删除数据
<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Delete typeName="feature:sichuan" xmlns:feature="www.csdn_data.com">
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="sichuan.9"/>
</Filter>
</Delete>
</Transaction>
<template>
<div>
<div style="position: fixed; top: 200px; left: 200px; z-index: 90000">
<el-button @click="selectFeature()">选择要素</el-button>
<el-button @click="deleteFeature(featureSelected)"
>删除选中要素</el-button
>
</div>
<div id="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon, MultiPolygon } from "ol/geom";
import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
select: {},
featureSelected: {},
vectorSource: {},
};
},
created() {},
mounted() {
this.vectorSource = new VectorSource({
url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
format: new GeoJSON(),
});
this.initMap();
this.pointerMove();
},
computed: {},
methods: {
//选择要素
selectFeature() {
this.select = new Select({
condition: click, //将默认的singleClick声明为click，使点击无延迟
});
this.map.addInteraction(this.select);
this.select.on("select", (e) => {
this.featureSelected = e.selected[0];
});
},
// 设置鼠标划过矢量要素的样式
pointerMove() {
this.map.on("pointermove", (e) => {
const isHover = this.map.hasFeatureAtPixel(e.pixel);
this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
});
},
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: this.vectorSource,
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 7,
}),
});
},
//删除选中要素
deleteFeature(feature) {
// 移除交互
this.map.removeInteraction(this.select);
let featString = new XMLSerializer().serializeToString(
new WFS().writeTransaction(null, null, [feature], {
featureType: "sichuan",
featureNS: "www.csdn_data.com",
srsName: "EPSG:4326",
})
);
console.log("featString:", featString);
let request = new XMLHttpRequest();
request.open(
"POST",
"http://120.76.197.111:8090/geoserver/wfs?service=wfs"
);
request.setRequestHeader("Content-Type", "text/xml");
request.send(featString);
// 刷新数据源
setTimeout(() => {
this.vectorSource.refresh();
}, 1000);
},
},
};
</script>
更新数据
1、
<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Update typeName="feature:sichuan" xmlns:feature="www.csdn_data.com">
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="sichuan.1"/>
</Filter>
<Property>
<Name>name</Name>
<Value>成都市-更新</Value>
</Property>
</Update>
</Transaction>
2、选中要素后，更新属性
<template>
<div>
<div style="position: fixed; top: 200px; left: 200px; z-index: 90000">
<el-button @click="updateFeature()">updateFeature</el-button>
</div>
<div id="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon, MultiPolygon } from "ol/geom";
import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
select: {},
featureSelected: {},
a: {},
};
},
created() {},
mounted() {
this.initMap();
this.selectFeature();
this.pointerMove();
},
computed: {},
methods: {
selectFeature() {
this.select = new Select({
condition: click, //将默认的singleClick声明为click，使点击无延迟
});
this.map.addInteraction(this.select);
this.select.on("select", (e) => {
this.featureSelected = e.selected[0];
});
},
// 设置鼠标划过矢量要素的样式
pointerMove() {
this.map.on("pointermove", (e) => {
const isHover = this.map.hasFeatureAtPixel(e.pixel);
this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
});
},
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: new VectorSource({
//以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
// url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",
format: new GeoJSON({
// geometryName: "the_geom", // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
}),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 7,
}),
});
},
async addLayer() {
// 发送请求
let json = await fetch("http://120.76.197.111:8090/geoserver/wfs", {
method: "post",
body: new XMLSerializer().serializeToString(
new WFS().writeGetFeature({
srsName: "EPSG:4326", //坐标系
featureNS: "www.csdn_data.com", // 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: "csdn_data", //工作区的命名
featureTypes: ["sichuan"], //所要访问的图层
maxFeatures: 5000,
outputFormat: "application/json",
})
),
}).then((response) => {
return response.json();
});
let features = new GeoJSON().readFeatures(json);
this.vectorlayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorlayer.getSource().addFeatures(features);
this.map.addLayer(this.vectorlayer);
},
updateFeature() {
let ft = this.featureSelected;
ft.getGeometry().applyTransform(
(flatCoordinates, flatCoordinates2, stride) => {
for (var j = 0; j < flatCoordinates.length; j += stride) {
var y = flatCoordinates[j];
var x = flatCoordinates[j + 1];
flatCoordinates[j] = x;
flatCoordinates[j + 1] = y;
}
}
);
ft.setGeometryName("the_geom"); // 一定要放在setGemetry之前
ft.set("level", "城市");
let featString = new XMLSerializer().serializeToString(
new WFS().writeTransaction(null, [ft], null, {
featureType: "sichuan",
featureNS: "www.csdn_data.com",
srsName: "EPSG:4326",
})
);
console.log("featString:", featString);
let request = new XMLHttpRequest();
request.open(
"POST",
"http://120.76.197.111:8090/geoserver/wfs?service=wfs"
);
request.setRequestHeader("Content-Type", "text/xml");
request.send(featString);
},
},
};
</script>
<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Update typeName="feature:sichuan"
xmlns:feature="www.csdn_data.com">
<Property>
<Name>the_geom</Name>
<Value>
<MultiPolygon xmlns="http://www.opengis.net/gml" srsName="EPSG:4326">
<polygonMember>
<Polygon srsName="EPSG:4326">
<exterior>
<LinearRing srsName="EPSG:4326">
<posList srsDimension="2">103.959259 30.320742 103.93563 30.346203 103.942237 30.357773 103.913904 30.353972 103.910432 30.330663 103.887699 30.328761 103.87426 30.348104 103.845368 30.34331 103.794749 30.345872 103.769776 30.332068 103.75141 30.307927 103.727893 30.30462 103.736516 30.285848 103.718374 30.283201 103.705271 30.268975 103.681754 30.269885 103.693065 30.245894 103.648046 30.229263 103.649502 30.199799 103.628 30.214863 103.617473 30.195412 103.597204 30.203524 103.533819 30.178109 103.544233 30.161218 103.533819 30.146643 103.504142 30.128503 103.486224 30.104147 103.474577 30.131237 103.450948 30.132231 103.468082 30.114255 103.462483 30.096027 103.4505 30.096524 103.443893 30.117486 103.443893 30.120054 103.439637 30.119557 103.439637 30.119474 103.395178 30.094866 103.360574 30.136787 103.372109 30.148382 103.36091 30.168008 103.370317 30.22827 103.350047 30.236048 103.320259 30.23489 103.313875 30.260372 103.282295 30.263598 103.242651 30.243081 103.233356 30.213456 103.215998 30.209235 103.211631 30.232407 103.183634 30.248128 103.147238 30.207 103.076798 30.220242 103.071534 30.260951 103.061456 30.270464 103.068623 30.294283 103.062128 30.302553 103.079038 30.324545 103.091132 30.326529 103.127976 30.367111 103.116329 30.380002 103.115993 30.413954 103.12596 30.451115 103.141751 30.470845 103.162244 30.472579 103.185874 30.511945 103.180834 30.525228 103.157765 30.530013 103.166276 30.555749 103.147798 30.585847 103.126856 30.593927 103.135591 30.624096 103.13156 30.65475 103.119017 30.670898 103.103115 30.672957 103.068735 30.716194 103.031331 30.703678 103.033907 30.719076 103.005126 30.74649 102.992919 30.778339 103.037938 30.802364 103.083629 30.812728 103.123945 30.79282 103.165716 30.842171 103.199088 30.845707 103.228653 30.836579 103.25833 30.842418 103.284647 30.829589 103.305252 30.810507 103.337617 30.824655 103.354527 30.850887 103.383084 30.862891 103.409401 30.864946 103.451396 30.892565 103.454644 30.924695 103.465058 30.941536 103.516461 30.971761 103.52094 31.005095 103.517132 31.030129 103.504814 31.041044 103.521164 31.067792 103.525644 31.101092 103.557224 31.149055 103.564839 31.175034 103.583205 31.191422 103.57671 31.215834 103.581413 31.246626 103.569095 31.262019 103.579733 31.291241 103.569991 31.314563 103.569543 31.338453 103.60717 31.351295 103.627104 31.344097 103.669323 31.354812 103.700792 31.391118 103.739876 31.398885 103.75029 31.419156 103.787246 31.434439 103.802588 31.430108 103.816027 31.431906 103.828682 31.412454 103.868437 31.420954 103.897554 31.416377 103.894754 31.408858 103.92835 31.355139 103.894418 31.326018 103.891618 31.308017 103.914128 31.278964 103.928014 31.272497 103.929134 31.234425 103.949404 31.215997 103.983 31.200925 104.014693 31.167577 104.009429 31.153235 104.022868 31.142661 104.019844 31.103963 104.057584 31.07821 104.060608 31.0641 104.094876 31.032756 104.10641 31.031771 104.106522 31.031607 104.107194 31.032017 104.10697 31.032263 104.117385 31.017572 104.143478 31.01158 104.166884 30.993438 104.166324 30.951311 104.142582 30.925845 104.149974 30.91311 104.168787 30.918533 104.202384 30.91311 104.21571 30.8984 104.244491 30.896921 104.288726 30.90292 104.322322 30.891743 104.351887 30.902345 104.367117 30.93365 104.389739 30.925681 104.39601 30.942358 104.44506 30.940468 104.465218 30.9509 104.495791 30.935457 104.511917 30.935868 104.533083 30.917875 104.520764 30.882456 104.585269 30.862891 104.596355 30.864535 104.613937 30.847763 104.629952 30.852449 104.640366 30.837895 104.698376 30.825559 104.718086 30.771756 104.732084 30.778257 104.750786 30.726898 104.768032 30.71817 104.788526 30.721299 104.78875 30.694043 104.800956 30.690995 104.818315 30.664307 104.821226 30.643874 104.842728 30.649395 104.847319 30.631101 104.819994 30.598296 104.819098 30.580076 104.858854 30.582385 104.879124 30.550635 104.892786 30.541645 104.8761 30.5131 104.875092 30.437078 104.881699 30.393551 104.895922 30.382315 104.881027 30.360831 104.860982 30.364384 104.855494 30.347194 104.837016 30.361988 104.850455 30.338929 104.848775 30.306852 104.823354 30.293787 104.807228 30.296847 104.795133 30.279397 104.774863 30.30156 104.738579 30.290314 104.723797 30.308341 104.703975 30.301643 104.691993 30.275427 104.643614 30.283036 104.638239 30.268148 104.653133 30.240185 104.599603 30.244488 104.600163 30.220408 104.569254 30.196985 104.541594 30.184236 104.533754 30.193673 104.484368 30.181504 104.485264 30.156001 104.468354 30.157077 104.464994 30.151529 104.449428 30.132894 104.457715 30.120634 104.437109 30.107544 104.450212 30.101081 104.428374 30.089729 104.41012 30.125521 104.39881 30.124776 104.386379 30.161798 104.358158 30.173638 104.364541 30.185974 104.327138 30.204269 104.315379 30.200792 104.282231 30.220904 104.2726 30.217842 104.264537 30.241592 104.243259 30.244239 104.23094 30.256153 104.243371 30.267403 104.231836 30.280472 104.23318 30.281051 104.232732 30.281878 104.2315 30.282209 104.232284 30.313798 104.2016 30.316526 104.192977 30.329836 104.17853 30.318262 104.174051 30.298666 104.152213 30.265335 104.150533 30.245646 104.116601 30.227194 104.091628 30.24879 104.047393 30.270381 104.030035 30.266245 104.030035 30.266245 103.998343 30.264508 103.974713 30.290727 103.965866 30.316774 103.959259 30.320742</posList>
</LinearRing>
</exterior>
<interior>
<LinearRing srsName="EPSG:4326">
<posList srsDimension="2">104.107194 31.032017 104.10697 31.032263 104.10641 31.031771 104.106522 31.031607 104.107194 31.032017</posList>
</LinearRing>
</interior>
</Polygon>
</polygonMember>
<polygonMember>
<Polygon srsName="EPSG:4326">
<exterior>
<LinearRing srsName="EPSG:4326">
<posList srsDimension="2">103.443893 30.120054 103.443893 30.117486 103.439637 30.119474 103.439637 30.119557 103.443893 30.120054</posList>
</LinearRing>
</exterior>
</Polygon>
</polygonMember>
<polygonMember>
<Polygon srsName="EPSG:4326">
<exterior>
<LinearRing srsName="EPSG:4326">
<posList srsDimension="2">104.232732 30.281878 104.23318 30.281051 104.231836 30.280472 104.2315 30.282209 104.232732 30.281878</posList>
</LinearRing>
</exterior>
</Polygon>
</polygonMember>
</MultiPolygon>
</Value>
</Property>
<Property>
<Name>adcode</Name>
<Value>510100</Value>
</Property>
<Property>
<Name>name</Name>
<Value>成都市</Value>
</Property>
<Property>
<Name>center</Name>
<Value>(2:104.065735,30.659462)</Value>
</Property>
<Property>
<Name>centroid</Name>
<Value>(2:103.931804,30.652329)</Value>
</Property>
<Property>
<Name>childrenNu</Name>
<Value>20</Value>
</Property>
<Property>
<Name>level</Name>
<Value>城市</Value>
</Property>
<Property>
<Name>parent</Name>
<Value>{ "adcode": 510000 }</Value>
</Property>
<Property>
<Name>subFeature</Name>
<Value>0</Value>
</Property>
<Property>
<Name>acroutes</Name>
<Value>(2:100000,510000)</Value>
</Property>
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="sichuan.1" />
</Filter>
</Update>
</Transaction>
3、编辑要素后，更新属性
<template>
<div>
<div style="position: fixed; top: 200px; left: 200px; z-index: 90000">
<el-button @click="modifyFeature()">modifyFeature</el-button>
</div>
<div id="map" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon, MultiPolygon } from "ol/geom";
import { Select, Modify } from "ol/interaction";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
export default {
components: {},
data() {
return {
map: {},
vectorlayer: {},
select: {},
featureModify: {},
modify: {},
};
},
created() {},
mounted() {
this.initMap();
this.addLayer();
this.pointerMove();
},
computed: {},
methods: {
// 设置鼠标划过矢量要素的样式
pointerMove() {
this.map.on("pointermove", (e) => {
const isHover = this.map.hasFeatureAtPixel(e.pixel);
this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
});
},
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104, 30.3],
zoom: 7,
}),
});
},
async addLayer() {
// 发送请求
let json = await fetch("http://120.76.197.111:8090/geoserver/wfs", {
method: "post",
body: new XMLSerializer().serializeToString(
new WFS().writeGetFeature({
srsName: "EPSG:4326", //坐标系
featureNS: "www.csdn_data.com", // 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: "csdn_data", //工作区的命名
featureTypes: ["sichuan"], //所要访问的图层
maxFeatures: 5000,
outputFormat: "application/json",
})
),
}).then((response) => {
return response.json();
});
let features = new GeoJSON().readFeatures(json);
this.vectorlayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorlayer.getSource().addFeatures(features);
this.map.addLayer(this.vectorlayer);
this.select = new Select({
condition: click, //将默认的singleClick声明为click，使点击无延迟
});
this.map.addInteraction(this.select);
this.modify = new Modify({
features: this.select.getFeatures(),
});
this.map.addInteraction(this.modify);
this.modify.on("modifystart", (e) => {
console.log(
"getCoordinates:",
e.features.getArray()[0].getGeometry().getCoordinates()
);
});
this.modify.on("modifyend", (e) => {
this.featureModify = e.features.getArray()[0];
});
},
modifyFeature() {
var geometry = this.featureModify.getGeometry().clone();
geometry.applyTransform((flatCoordinates, flatCoordinates2, stride) => {
for (var j = 0; j < flatCoordinates.length; j += stride) {
var y = flatCoordinates[j];
var x = flatCoordinates[j + 1];
flatCoordinates[j] = x;
flatCoordinates[j + 1] = y;
}
});
let newFeature = new Feature();
newFeature.setId(this.featureModify.getId()); //必须设置id
newFeature.setGeometryName("the_geom"); // 一定要放在setGemetry之前
newFeature.setGeometry(geometry); //注意：不能用newFeature.setGeometry(new MultiPolygon([geometry.getCoordinates()]));
newFeature.set("level", "城市4");
let featString = new XMLSerializer().serializeToString(
new WFS().writeTransaction(null, [newFeature], null, {
featureType: "sichuan",
featureNS: "www.csdn_data.com",
srsName: "EPSG:4326",
})
);
console.log("featString:", featString);
let request = new XMLHttpRequest();
request.open(
"POST",
"http://120.76.197.111:8090/geoserver/wfs?service=wfs"
);
request.setRequestHeader("Content-Type", "text/xml");
request.send(featString);
},
},
};
</script>
全部评论