openlayer 添加绘制 “点、线、面” ，并输出arcgis “FeatureServer”服务保存格式。

未来-更美好

已于 2022-02-17 11:59:02 修改

阅读量507

点赞数

分类专栏： openlayer 文章标签： OpenLayers 地图绘制 GeoJSON 几何对象坐标转换

于 2022-02-17 11:58:44 首次发布

本文链接：https://blog.csdn.net/qq_33563147/article/details/122980211

版权

openlayer 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { GeoJSON } from "ol/format";
import { Draw, Modify, Select } from "ol/interaction";

      let  self = this;
     // 矢量图层源
      this.divisionVectorSource = new VectorSource({
        wrapX: false,
      });
      // 矢量图层
      this.divisionVectorLayer = new VectorLayer({
        source: this.divisionVectorSource,
      });
      this.map.addLayer(this.divisionVectorLayer);

      this.draw = new Draw({
        source: this.divisionVectorSource,
        type: "LineString",
      });
      // Point,Polygon
      this.map.addInteraction(this.draw);

      // 绘制完成
      this.draw.on("drawend", (e) => {
        self.map.removeInteraction(this.draw);
        self.draw = null;
       self.outputJson();
      });

outputJson() {
      let features;
      if (this.BDTemporaryLayer) {
        features = this.BDvectorSource.getFeatures();
      } else if (this.vectorLayer) {
        features = this.vectorSource.getFeatures();
      }
      let jsonObj = new GeoJSON();
      let writeFeatures = jsonObj.writeFeatures(features);

      if (features.length === 0) {
        this.$message.error("请绘制完成后提交！");
        return;
      }
      let coordinates, geometry, center, extents;
      switch (this.drawType) {
        case "Polygon":
          coordinates = features[0].getGeometry().getCoordinates();
          center = getCenter(features[0].getGeometry().getExtent()); //获取边界区域的中心位
          geometry = {
            rings: coordinates,
            spatialReference: { wkid: 4326, latestWkid: 4326 },
          };
          break;
        case "Point":
          coordinates =
            JSON.parse(writeFeatures).features[0].geometry.coordinates;
          geometry = {
            x: coordinates[0],
            y: coordinates[1],
            spatialReference: { wkid: 4326, latestWkid: 4326 },
          };
          center = coordinates;
          break;
        case "LineString":
          coordinates =
            JSON.parse(writeFeatures).features[0].geometry.coordinates;
          center = coordinates[0];
          geometry = {
            paths: [coordinates],
            spatialReference: { wkid: 4326, latestWkid: 4326 },
          };
          break;
      }

      this.hxttPolygonFeatures[0].geometry = geometry;

      this.hxttPolygonFeatures[0].attributes = {
        TASK_ID: "", //   任务id
      };
    },