大致功能完成

package.json

@@ -14,7 +14,10 @@
     "element-ui": "^2.4.5",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.1.0",
+    "jquery": "^3.6.0",
     "js-cookie": "^2.2.1",
+    "ol": "^6.6.1",
+    "ol-graticule-control": "^0.1.1",
     "qs": "^6.9.4",
     "sass-resources-loader": "^2.1.1",
     "vendors": "^2.0.0",

src/utils/Arc.js

+/**
+ * mapbox 插件
+ * ex: https://docs.mapbox.com/mapbox.js/example/v1.0.0/arcjs/
+ */
+
+const D2R = Math.PI / 180;
+const R2D = 180 / Math.PI;
+
+export const Coord = function (lon, lat) {
+  this.lon = lon;
+  this.lat = lat;
+  this.x = D2R * lon;
+  this.y = D2R * lat;
+};
+
+Coord.prototype.view = function () {
+  return String(this.lon).slice(0, 4) + ',' + String(this.lat).slice(0, 4);
+};
+
+Coord.prototype.antipode = function () {
+  const lat = -1 * this.lat;
+  const log = (this.lon < 0) ? 180 + this.lon : (180 - this.lon) * -1;
+  return new Coord(log, lat);
+};
+
+const LineString = function () {
+  this.coords = [];
+  this.length = 0;
+};
+
+LineString.prototype.move_to = function (coord) {
+  this.length++;
+  this.coords.push(coord);
+};
+
+export const Arc = function (properties) {
+  this.properties = properties || {};
+  this.geometries = [];
+};
+
+Arc.prototype.json = function () {
+  if (this.geometries.length <= 0) {
+    return {
+      'geometry': {
+        'type': 'LineString',
+        'coordinates': null
+      },
+      'type': 'Feature',
+      'properties': this.properties
+    };
+  } else if (this.geometries.length === 1) {
+    return {
+      'geometry': {
+        'type': 'LineString',
+        'coordinates': this.geometries[0].coords
+      },
+      'type': 'Feature',
+      'properties': this.properties
+    };
+  } else {
+    let multiline = [];
+    for (let i = 0; i < this.geometries.length; i++) {
+      multiline.push(this.geometries[i].coords);
+    }
+    return {
+      'geometry': {
+        'type': 'MultiLineString',
+        'coordinates': multiline
+      },
+      'type': 'Feature',
+      'properties': this.properties
+    };
+  }
+};
+
+// TODO - output proper multilinestring
+Arc.prototype.wkt = function () {
+  let wktString = '';
+  let wkt = 'LINESTRING(';
+  let collect = function (c) {
+    wkt += c[0] + ' ' + c[1] + ',';
+  };
+  for (let i = 0; i < this.geometries.length; i++) {
+    if (this.geometries[i].coords.length === 0) {
+      return 'LINESTRING(empty)';
+    } else {
+      let coords = this.geometries[i].coords;
+      coords.forEach(collect);
+      wktString += wkt.substring(0, wkt.length - 1) + ')';
+    }
+  }
+  return wktString;
+};
+
+/*
+ * http://en.wikipedia.org/wiki/Great-circle_distance
+ *
+ */
+export const GreatCircle = function (start, end, properties) {
+  if (!start || start.x === undefined || start.y === undefined) {
+    throw new Error('GreatCircle constructor expects two args: start and end objects with x and y properties');
+  }
+  if (!end || end.x === undefined || end.y === undefined) {
+    throw new Error('GreatCircle constructor expects two args: start and end objects with x and y properties');
+  }
+  this.start = new Coord(start.x, start.y);
+  this.end = new Coord(end.x, end.y);
+  this.properties = properties || {};
+  
+  let w = this.start.x - this.end.x;
+  let h = this.start.y - this.end.y;
+  let z = Math.pow(Math.sin(h / 2.0), 2) +
+    Math.cos(this.start.y) *
+    Math.cos(this.end.y) *
+    Math.pow(Math.sin(w / 2.0), 2);
+  this.g = 2.0 * Math.asin(Math.sqrt(z));
+  
+  if (this.g === Math.PI) {
+    throw new Error('it appears ' + start.view() + ' and ' + end.view() + " are 'antipodal', e.g diametrically opposite, thus there is no single route but rather infinite");
+  } else if (isNaN(this.g)) {
+    throw new Error('could not calculate great circle between ' + start + ' and ' + end);
+  }
+};
+
+/*
+ * http://williams.best.vwh.net/avform.htm#Intermediate
+ */
+GreatCircle.prototype.interpolate = function (f) {
+  let A = Math.sin((1 - f) * this.g) / Math.sin(this.g);
+  let B = Math.sin(f * this.g) / Math.sin(this.g);
+  let x = A * Math.cos(this.start.y) * Math.cos(this.start.x) + B * Math.cos(this.end.y) * Math.cos(this.end.x);
+  let y = A * Math.cos(this.start.y) * Math.sin(this.start.x) + B * Math.cos(this.end.y) * Math.sin(this.end.x);
+  let z = A * Math.sin(this.start.y) + B * Math.sin(this.end.y);
+  let lat = R2D * Math.atan2(z, Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
+  let lon = R2D * Math.atan2(y, x);
+  return [lon, lat];
+};
+
+
+/*
+ * Generate points along the great circle
+ */
+GreatCircle.prototype.Arc = function (npoints, options) {
+  let firstPass = [];
+  if (!npoints || npoints <= 2) {
+    firstPass.push([this.start.lon, this.start.lat]);
+    firstPass.push([this.end.lon, this.end.lat]);
+  } else {
+    let delta = 1.0 / (npoints - 1);
+    for (let i = 0; i < npoints; ++i) {
+      let step = delta * i;
+      let pair = this.interpolate(step);
+      firstPass.push(pair);
+    }
+  }
+  /* partial port of dateline handling from:
+    gdal/ogr/ogrgeometryfactory.cpp
+
+    TODO - does not handle all wrapping scenarios yet
+  */
+  let bHasBigDiff = false;
+  let dfMaxSmallDiffLong = 0;
+  // from http://www.gdal.org/ogr2ogr.html
+  // -datelineoffset:
+  // (starting with GDAL 1.10) offset from dateline in degrees (default long. = +/- 10deg, geometries within 170deg to -170deg will be splited)
+  let dfDateLineOffset = options && options.offset ? options.offset : 10;
+  let dfLeftBorderX = 180 - dfDateLineOffset;
+  let dfRightBorderX = -180 + dfDateLineOffset;
+  let dfDiffSpace = 360 - dfDateLineOffset;
+  
+  // https://github.com/OSGeo/gdal/blob/7bfb9c452a59aac958bff0c8386b891edf8154ca/gdal/ogr/ogrgeometryfactory.cpp#L2342
+  for (let j = 1; j < firstPass.length; ++j) {
+    let dfPrevX = firstPass[j - 1][0];
+    let dfX = firstPass[j][0];
+    let dfDiffLong = Math.abs(dfX - dfPrevX);
+    if (dfDiffLong > dfDiffSpace &&
+      ((dfX > dfLeftBorderX && dfPrevX < dfRightBorderX) || (dfPrevX > dfLeftBorderX && dfX < dfRightBorderX))) {
+      bHasBigDiff = true;
+    } else if (dfDiffLong > dfMaxSmallDiffLong) {
+      dfMaxSmallDiffLong = dfDiffLong;
+    }
+  }
+  
+  let poMulti = [];
+  if (bHasBigDiff && dfMaxSmallDiffLong < dfDateLineOffset) {
+    let poNewLS = [];
+    poMulti.push(poNewLS);
+    for (let k = 0; k < firstPass.length; ++k) {
+      let dfX0 = parseFloat(firstPass[k][0]);
+      if (k > 0 && Math.abs(dfX0 - firstPass[k - 1][0]) > dfDiffSpace) {
+        let dfX1 = parseFloat(firstPass[k - 1][0]);
+        let dfY1 = parseFloat(firstPass[k - 1][1]);
+        let dfX2 = parseFloat(firstPass[k][0]);
+        let dfY2 = parseFloat(firstPass[k][1]);
+        if (dfX1 > -180 && dfX1 < dfRightBorderX && dfX2 === 180 &&
+          k + 1 < firstPass.length &&
+          firstPass[k - 1][0] > -180 && firstPass[k - 1][0] < dfRightBorderX) {
+          poNewLS.push([-180, firstPass[k][1]]);
+          k++;
+          poNewLS.push([firstPass[k][0], firstPass[k][1]]);
+          continue;
+        } else if (dfX1 > dfLeftBorderX && dfX1 < 180 && dfX2 === -180 &&
+          k + 1 < firstPass.length &&
+          firstPass[k - 1][0] > dfLeftBorderX && firstPass[k - 1][0] < 180) {
+          poNewLS.push([180, firstPass[k][1]]);
+          k++;
+          poNewLS.push([firstPass[k][0], firstPass[k][1]]);
+          continue;
+        }
+        
+        if (dfX1 < dfRightBorderX && dfX2 > dfLeftBorderX) {
+          // swap dfX1, dfX2
+          let tmpX = dfX1;
+          dfX1 = dfX2;
+          dfX2 = tmpX;
+          // swap dfY1, dfY2
+          let tmpY = dfY1;
+          dfY1 = dfY2;
+          dfY2 = tmpY;
+        }
+        if (dfX1 > dfLeftBorderX && dfX2 < dfRightBorderX) {
+          dfX2 += 360;
+        }
+        
+        if (dfX1 <= 180 && dfX2 >= 180 && dfX1 < dfX2) {
+          let dfRatio = (180 - dfX1) / (dfX2 - dfX1);
+          let dfY = dfRatio * dfY2 + (1 - dfRatio) * dfY1;
+          poNewLS.push([firstPass[k - 1][0] > dfLeftBorderX ? 180 : -180, dfY]);
+          poNewLS = [];
+          poNewLS.push([firstPass[k - 1][0] > dfLeftBorderX ? -180 : 180, dfY]);
+          poMulti.push(poNewLS);
+        } else {
+          poNewLS = [];
+          poMulti.push(poNewLS);
+        }
+        poNewLS.push([dfX0, firstPass[k][1]]);
+      } else {
+        poNewLS.push([firstPass[k][0], firstPass[k][1]]);
+      }
+    }
+  } else {
+    // add normally
+    let poNewLS0 = [];
+    poMulti.push(poNewLS0);
+    for (let l = 0; l < firstPass.length; ++l) {
+      poNewLS0.push([firstPass[l][0], firstPass[l][1]]);
+    }
+  }
+  
+  let arc = new Arc(this.properties);
+  for (let m = 0; m < poMulti.length; ++m) {
+    let line = new LineString();
+    arc.geometries.push(line);
+    let points = poMulti[m];
+    for (let j0 = 0; j0 < points.length; ++j0) {
+      line.move_to(points[j0]);
+    }
+  }
+  return arc;
+};
+

src/utils/style.js

+import {Circle, Fill, Icon, IconImage, Image, RegularShape, Stroke, Style, Text} from 'ol/style' // Atlas, AtlasManager, 
+
+/**
+ * style json对象解析，通过传入json格式数据解析成Style实例
+ * @param {Object} options ,json数据，去匹配转化成Style实例,
+ * 其中每个实例节点需要有className属性，为字符串，className包括:
+ * Atlas/AtlasManager/Circle/Fill/Icon/IconImage/Image/RegularShape/Stroke/Style/Text
+ * 分别匹配Style对应的对象实例，其余属性，为对象实例化时传入的对象；
+ * 如果没有包含className的对象属性，则直接返回该对象。
+ * 如：{
+ *   className: 'Style',
+ *   fill: {
+ *     className: 'Fill',
+ *     color: 'rgba(255, 255, 255, 0.2)'
+ *   },
+ *   stroke: {
+ *     className: 'Stroke',
+ *     color: '#ffcc33',
+ *     width: 2
+ *   },
+ *   image: {
+ *     className: 'Circle',
+ *     radius: 7,
+ *     fill: {
+ *       className: 'Fill',
+ *       color: '#ffcc33'
+ *     }
+ *   }
+ * }
+ * 解析后等同于
+ *  new Style({
+ *    fill: new Fill({
+ *      color: 'rgba(255, 255, 255, 0.2)'
+ *    }),
+ *    stroke: new Stroke({
+ *      color: '#ffcc33',
+ *      width: 2
+ *    }),
+ *    image: new Circle({
+ *      radius: 7,
+ *      fill: new Fill({
+ *        color: '#ffcc33'
+ *      })
+ *    })
+ *  })
+ */
+
+const StyleMap = {Circle, Fill, Icon, IconImage, Image, RegularShape, Stroke, Style, Text} // Atlas, AtlasManager, 
+
+export function parse(options) {
+  if (options && options.className && StyleMap[options.className]) {
+    let childOptions = {};
+    Object.keys(options).map(v => {
+      if (v !== 'className') {
+        if (typeof options[v] === 'object' && options[v].className) {
+          childOptions[v] = parse(options[v]);
+        } else {
+          childOptions[v] = options[v];
+        }
+      }
+    });
+    return new StyleMap[options.className](childOptions)
+  }
+}
+
+export function colorRgba(sHex, alpha = 1) {
+  // 十六进制颜色值的正则表达式
+  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+  /* 16进制颜色转为RGB格式 */
+  let sColor = sHex.toLowerCase()
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      let sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+      }
+      sColor = sColorNew
+    }
+    //  处理六位的颜色值
+    let sColorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+    }
+    // return sColorChange.join(',')
+    // 或
+    return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
+  } else {
+    return sColor
+  }
+}

src/views/Home.vue

@@ -7,6 +7,8 @@
         :uploadFileFlag="uploadFileFlag"
         @uploadFileFlagFunc="uploadFileFlagFunc"
         @changeCurTypeFunc="changeCurTypeFunc"
+        @getSortArray="getSortArray"
+        @showLeftDialog="showLeftDialog"
       ></header-one>
     </div>
     <div class="decision-content">
@@ -47,27 +49,29 @@ export default {
       uploadFileFlag: false,
       curType: "",
       list: [],
-        total: 0,
+      total: 0
     };
   },
   mounted() {
-    this.getList(1)
+    this.getList(1);
   },
   created() {},
   computed: {},
   methods: {
-      editItemFunc(item){
-        this.$refs.headerOne.editFunc(item)
-      },
+    editItemFunc(item) {
+      this.$refs.headerOne.editFunc(item);
+    },
     uploadFileFlagFunc(flag) {
       // this.uploadFileFlag = flag;
-      if(flag) {
-        this.$refs.creatActiveMain.curPageChange(this.$refs.creatActiveMain.currentPage)
+      if (flag) {
+        this.$refs.creatActiveMain.curPageChange(
+          this.$refs.creatActiveMain.currentPage
+        );
         // this.getList(1)
       }
     },
     getList(page) {
-      const that = this
+      const that = this;
       let params = {
         lrr: "",
         startTime: "",
@@ -77,17 +81,25 @@ export default {
       };
       getList(params)
         .then(res => {
-          that.list = res.data.list
-          that.total = res.count
+          that.list = res.data.list;
+          that.total = res.count;
         })
         .catch(() => {})
         .finally(() => {});
     },
     changeCurTypeFunc(type) {
       this.curType = type;
-      if(type!== 'upload') {
-        this.uploadFileFlag = true
+      if (type !== "upload") {
+        this.uploadFileFlag = true;
       }
+    },
+    // 将排序好的数组传给左侧 dialog
+    getSortArray(val) {
+      this.$refs.creatActiveMain.tableData = val;
+    },
+    // 打开左侧的 dialog
+    showLeftDialog() {
+      this.$refs.creatActiveMain.btnHandleFunc();
     }
   }
 };