赞
踩
目录
注意:ol版本要用5.3.3,保证new GeoJson正常使用。6.1.1中不能用new GeoJSON()
由于要修改矢量数据,涉及到权限问题,默认是不允许修改的,所以需要更改权限,操作如下:
查询链接:
方式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",
-
- layer
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。