# 168 add 根据空间空间数据缩放范围，add 矢量图层叠加样式可传函数，fix logo bug，fix 图层对比，fix 图层清除方法

sakitam-fdd · Jun 8, 2017 · 0b6cef6 · 0b6cef6
1 parent eb3a180
commit 0b6cef6
Show file tree

Hide file tree

Showing 15 changed files with 570 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -26,9 +26,9 @@ npm run build
 ### CDN引用
 
 ```bash
-https://unpkg.com/[email protected].2/dist/HMap.js
-https://unpkg.com/[email protected].2/dist/HMap.min.js
-https://unpkg.com/[email protected].2/dist/HMap.css
+https://unpkg.com/[email protected].4/dist/HMap.js
+https://unpkg.com/[email protected].4/dist/HMap.min.js
+https://unpkg.com/[email protected].4/dist/HMap.css
 ```
 
 ### NPM包管理

diff --git a/dist/HMap.js b/dist/HMap.js
diff --git a/dist/HMap.js.map b/dist/HMap.js.map
diff --git a/dist/HMap.min.js b/dist/HMap.min.js
diff --git a/example/layers/mapboxVectorLayer.html b/example/layers/mapboxVectorLayer.html
@@ -49,6 +49,13 @@
       }
     ]
   });
+
+  Maps.map.on('click', function (event) {
+    var feature = Maps.map.forEachFeatureAtPixel(event.pixel, function (feature) {
+      return feature
+    })
+    console.log(feature)
+  })
 </script>
 </body>
 </html>
diff --git a/example/osmLayer.html b/example/osmLayer.html
@@ -44,16 +44,22 @@
         layerName: 'openstreetmap',
         isDefault: true,
         layerType: 'OSM',
-        attribution: {
-          url: 'https://aurorafe.github.io',
-          title: '恒达时讯',
-          messages: '版权所有'
-        },
+//        attribution: {
+//          url: 'https://aurorafe.github.io',
+//          title: '恒达时讯',
+//          messages: '版权所有'
+//        },
         opaque: true, //图层是否不透明
         layerUrl: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
       }
     ]
   });
+
+  function mapFirstClickHandler (event) {
+    console.log(event.coordinate)
+  }
+  Maps.map.on('click', mapFirstClickHandler)
+  Maps.map.un('click', mapFirstClickHandler)
 </script>
 </body>
 </html>
diff --git a/example/testGeomParse.html b/example/testGeomParse.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="renderer" content="webkit">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>测试空间数据解析</title>
+  <link rel="stylesheet" href="../dist/HMap.css" type="text/css">
+  <style>
+    html, body, #map {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+<div id="map"></div>
+<script src="../dist/HMap.js"></script>
+<script type="text/javascript">
+  var Maps = new HMap.Map();
+  Maps.initMap('map', {
+    view: {
+      center: [108.70284725808892, -54.69173110027741],
+      projection: 'EPSG:3857',
+      zoom: 5, // resolution
+    },
+    baseLayers: [
+      {
+        layerName: 'openstreetmap',
+        isDefault: true,
+        layerType: 'OSM',
+        opaque: true, //图层是否不透明
+        layerUrl: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      }
+    ]
+  });
+
+  function mapFirstClickHandler (event) {
+    console.log(event.coordinate)
+  }
+  Maps.map.on('click', mapFirstClickHandler)
+  Maps.map.un('click', mapFirstClickHandler)
+</script>
+</body>
+</html>
diff --git a/lib/mathLine.js b/lib/mathLine.js
@@ -0,0 +1,35 @@
+/**
+ * Created by FDD on 2017/6/6.
+ */
+class MathLine {
+  constructor (radius) {
+    if (radius && typeof radius === 'number') {
+      this.radius = radius
+    } else {
+      this.radius = 6378137
+    }
+  }
+
+  /**
+   * 计算地理坐标两点之间距离
+   * @param c1
+   * @param c2
+   * @returns {number}
+   */
+  haversineDistance (c1, c2) {
+    let lat1 = this.toRadians(c1[1])
+    let lat2 = this.toRadians(c2[1])
+    let deltaLatBy2 = (lat2 - lat1) / 2
+    let deltaLonBy2 = this.toRadians(c2[0] - c1[0]) / 2
+    let a = Math.sin(deltaLatBy2) * Math.sin(deltaLatBy2) +
+      Math.sin(deltaLonBy2) * Math.sin(deltaLonBy2) *
+      Math.cos(lat1) * Math.cos(lat2)
+    return 2 * this.radius * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  }
+
+  toRadians (angleInDegrees) {
+    return angleInDegrees * Math.PI / 180
+  }
+}
+
+export default MathLine
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hmap-js",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "private": false,
   "description": "WEBGIS API",
   "keywords": [
@@ -22,8 +22,6 @@
     "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
   },
   "dependencies": {
-    "echarts": "^3.6.1",
-    "mathjs": "^3.12.0",
     "openlayers": "^4.0.1",
     "proj4": "^2.4.3"
   },

diff --git a/src/controls/CompareLayer.js b/src/controls/CompareLayer.js
@@ -55,19 +55,20 @@ ol.inherits(CompareLayer, ol.control.Control)
 /**
  * 通过canvas切割视图
  * @param beforeMap
- * @param swipe
+ * @param value
  */
-CompareLayer.prototype.clipLayer = function (beforeMap, swipe) {
-  beforeMap.on('precompose', event => {
+CompareLayer.prototype.clipLayer = function (beforeMap, value) {
+  this.getMap().un('precompose', this.precompose)
+  this.getMap().un('postcompose', this.postcompose)
+  this.precompose = beforeMap.on('precompose', event => {
     let ctx = event.context
-    let width = ctx.canvas.width * (swipe.value / 100)
+    let width = ctx.canvas.width * (value / 100)
     ctx.save()
     ctx.beginPath()
     ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height)
     ctx.clip()
   })
-
-  beforeMap.on('postcompose', event => {
+  this.postcompose = beforeMap.on('postcompose', event => {
     let ctx = event.context
     ctx.restore()
   })

diff --git a/src/feature/feature.js b/src/feature/feature.js
@@ -520,6 +520,130 @@ class Feature extends mix(Style, Layer) {
     }
   }
 
+  /**
+   * 获取线当前范围和中心点
+   * @param line
+   * @returns {{extent: *, center: ol.Coordinate}}
+   */
+  getCenterExtentFromLine (line) {
+    try {
+      let geom = null
+      if (!(line instanceof ol.geom.Geometry)) {
+        geom = (new ol.format.WKT()).readGeometry(line)
+      }
+      let [MultiLine] = [(new ol.geom.MultiLineString([]))]
+      if (geom && geom instanceof ol.geom.LineString) {
+        MultiLine.appendLineString(geom)
+      } else if (geom && geom instanceof ol.geom.MultiLineString) {
+        let multiGeoms = geom.getLineStrings()
+        if (multiGeoms && Array.isArray(multiGeoms) && multiGeoms.length > 0) {
+          multiGeoms.forEach(_geom => {
+            if (_geom && _geom instanceof ol.geom.LineString) {
+              MultiLine.appendLineString(geom)
+            }
+          })
+        }
+      }
+      let extent = this._getExtent(MultiLine)
+      let center = ol.extent.getCenter(extent)
+      return ({
+        extent: extent,
+        center: center
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  /**
+   * 获取当前面范围和中心点
+   * @param polygon
+   * @returns {{extent: *, center: ol.Coordinate}}
+   */
+  getCenterExtentFromPolygon (polygon) {
+    try {
+      let geom = null
+      if (!(polygon instanceof ol.geom.Geometry)) {
+        geom = (new ol.format.WKT()).readGeometry(polygon)
+      }
+      let [MultiPolygon] = [(new ol.geom.MultiPolygon([]))]
+      if (geom && geom instanceof ol.geom.Polygon) {
+        MultiPolygon.appendPolygon(geom)
+      } else if (geom && geom instanceof ol.geom.MultiPolygon) {
+        let multiGeoms = geom.getPolygons()
+        if (multiGeoms && Array.isArray(multiGeoms) && multiGeoms.length > 0) {
+          multiGeoms.forEach(_geom => {
+            if (_geom && _geom instanceof ol.geom.Polygon) {
+              MultiPolygon.appendPolygon(geom)
+            }
+          })
+        }
+      }
+      let extent = this._getExtent(MultiPolygon)
+      let center = ol.extent.getCenter(extent)
+      return ({
+        extent: extent,
+        center: center
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  /**
+   * 读取空间信息
+   * @param geomData
+   * @param options
+   * @returns {*}
+   */
+  getGeomFromGeomData (geomData, options) {
+    try {
+      let featureGeom = null
+      if (geomData['geomType'] === 'GeoJSON') {
+        featureGeom = (new ol.format.GeoJSON()).readGeometry(geomData['geometry'])
+      } else if (geomData['geomType'] === 'WKT') {
+        featureGeom = (new ol.format.WKT()).readGeometry(geomData['geometry'])
+      } else if (geomData['geomType'] === 'EsriJSON') {
+        featureGeom = (new ol.format.EsriJSON()).readGeometry(geomData['geometry'])
+      } else if (geomData['geomType'] === 'Polyline') {
+        featureGeom = (new ol.format.Polyline()).readGeometry(geomData['geometry'])
+      } else if (Array.isArray(geomData['geometry']) && geomData['geometry'].length === 2) {
+        featureGeom = new ol.geom.Point(geomData['geometry'])
+      }
+      return featureGeom
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  /**
+   * 简单兼容
+   * @param geomData
+   * @param options
+   * @returns {{extent: *, center: ol.Coordinate}}
+   */
+  getCenterExtentFromGeom (geomData, options) {
+    let geom = this.getGeomFromGeomData(geomData, options)
+    let extent = this._getExtent(geom)
+    let center = ol.extent.getCenter(extent)
+    let bExtent = true
+    extent.every(item => {
+      if (item === Infinity || isNaN(item) || item === undefined || item === null) {
+        bExtent = false
+        return false
+      } else {
+        return true
+      }
+    })
+    if (bExtent && options['zoomToExtent']) {
+      this.zoomToExtent(extent, true)
+    }
+    return ({
+      extent: extent,
+      center: center
+    })
+  }
+
   /**
    * 设置热力图样式
    * @param layerName

diff --git a/src/layer/Layer.js b/src/layer/Layer.js
@@ -432,6 +432,51 @@ class Layer extends mix(Style) {
     }
   }
 
+  /**
+   * 创建矢量要素图层
+   * @param layerName
+   * @param params
+   * @returns {*}
+   */
+  createVectorFeatureLayer (layerName, params) {
+    try {
+      let layer = this.getLayerByLayerName(layerName)
+      if (!(layer instanceof ol.layer.Vector)) {
+        layer = null
+      } else if (this.map && (layer instanceof ol.layer.Vector) && !(params['addLayer'] === false)) {
+        this.map.removeLayer(layer)
+        layer = null
+      }
+      if (!layer && params && params['layerUrl'] && params['create']) {
+        let proj = params['projection'] ? params['projection'] : 'EPSG:3857'
+        let style = this.getStyleByParams(params['style'])
+        layer = new ol.layer.Vector({
+          layerName: layerName,
+          params: params,
+          layerType: 'vector',
+          visible: (params['visible'] === false) ? params['visible'] : true,
+          opacity: ((params['opacity'] && (typeof params['opacity'] === 'number')) ? params['opacity'] : 1),
+          source: new ol.source.Vector({
+            format: new ol.format.GeoJSON(),
+            crossOrigin: (params['crossOrigin'] ? params['crossOrigin'] : undefined),
+            url: function (extent) {
+              return params['layerUrl'] + extent.join(',') + ',' + proj
+            },
+            wrapX: false,
+            strategy: ol.loadingstrategy.bbox
+          }),
+          style: style
+        })
+      }
+      if (this.map && layer && !(params['addLayer'] === false)) {
+        this.map.addLayer(layer)
+      }
+      return layer
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
   /**
    * 创建WMTS图层
    * @param layerName
@@ -651,8 +696,8 @@ class Layer extends mix(Style) {
   removeLayerByLayerName (layerName) {
     if (this.map) {
       let layer = this.getLayerByLayerName(layerName)
-      if (layer && layer instanceof ol.layer.Vector && layer.getSource() && layer.getSource().clear) {
-        layer.getSource().clear()
+      if (layer) {
+        this.map.removeLayer(layer)
       }
     }
   }

diff --git a/src/map/Map.js b/src/map/Map.js