xy-map 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -10,11 +10,13 @@ import {
   setLayout,
   setPaint,
   setFilter,
+  setHigh,
   getLayerAll
 } from './layers/index.js'
 
 import {
-  addLayerLine
+  addLayerLine,
+  addLayerLineAnimation
 } from './layers/Line.js'
 
 import {
@@ -29,6 +31,7 @@ import {
 
 import {
   toGeoJson,
+  loadImage,
   ranging,
   drawArea,
   clearDraw,
@@ -58,12 +61,14 @@ const mapLayers = {
   setLayout,
   setPaint,
   setFilter,
+  setHigh,
   getLayerAll
 }
 
 // 绘制
 const mapDraw = {
   addLayerLine,
+  addLayerLineAnimation,
   addLayerPoint,
   addDiyPoint,
   addLayerImagePoint,
@@ -73,6 +78,7 @@ const mapDraw = {
 // 地图工具
 const mapTools = {
   toGeoJson,
+  loadImage,
   ranging,
   drawArea,
   clearDraw,

package/src/layers/Line.js

@@ -21,7 +21,10 @@ const defaultOptions = {
     layout: {},
     paint: {}
   },
-  style: {},
+  style: {
+    layout: {},
+    paint: {},
+  },
   hover: null,
   click: null,
 }
@@ -62,7 +65,6 @@ export const addLayerLine = (option, layerId) => {
     })
   }
 
-
   map.addLayer({
     id: id,
     type: 'line',
@@ -71,6 +73,26 @@ export const addLayerLine = (option, layerId) => {
     paint: paintOpt
   }, layerId)
 
+  // 高亮样式
+  if (opt.high) {
+    let highPaint = opt.high.paint ? opt.high.paint : {
+      'line-color': '#ff0'
+    }
+    let highPaintOpt = Object.assign({
+      ...paintOpt
+    }, highPaint)
+
+    map.addLayer({
+      id: id + '-high',
+      type: 'line',
+      source: id,
+      layout: layoutOpt,
+      paint: highPaintOpt,
+      filter: ['==', ['boolean', ['get', 'high']], true]
+    }, layerId)
+  }
+
+
   if (opt.click) {
     mapClick(opt.id, opt.click)
   }

package/src/layers/Point.js

@@ -7,6 +7,9 @@ import {
 import {
   addLayerText
 } from './Text'
+import {
+  loadImage
+} from '../util/mapTools'
 import {
   mapClick
 } from '../util/mapEvent'
@@ -218,6 +221,30 @@ export const addLayerImagePoint = async (option, layerId) => { // 点
       paint: paintOpt
     }, layerId)
 
+    // 高亮样式
+    if (opt.high) {
+      let highLayout = opt.high.layout ? opt.high.layout : {}
+      let highLayoutOpt = Object.assign({
+        ...layoutOpt,
+      }, highLayout)
+
+      let highPaint = opt.high.paint ? opt.high.paint : {
+        'text-color': '#ff0'
+      }
+      let highPaintOpt = Object.assign({
+        ...paintOpt,
+      }, highPaint)
+
+      map.addLayer({
+        id: id + '-high',
+        type: 'symbol',
+        source: id,
+        layout: highLayoutOpt,
+        paint: highPaintOpt,
+        filter: ['==', ['boolean', ['get', 'high']], true]
+      }, layerId)
+    }
+
     if (opt.cluster.cluster) {
       let style = opt.style || {}
       clusterLayer(id, style)
@@ -250,19 +277,6 @@ export const addLayerImagePoint = async (option, layerId) => { // 点
   }
 }
 
-/**
- * 加载图片
- */
-export const loadImage = (src, width = 24, height = 24) => {
-  return new Promise((resolve) => {
-    let image = new Image(width, height)
-    image.src = src
-    image.onload = () => {
-      resolve(image)
-    }
-  })
-}
-
 /**
  * 点聚合图层
  */

package/src/layers/Polygon.js

@@ -38,18 +38,18 @@ export const addLayerPolygon = (option, layerId) => {
     return
   }
 
-  let layout = option.style ? option.style.layout : {}
+  let layout = opt.style ? opt.style.layout : {}
   let layoutOpt = Object.assign({
     'visibility': 'visible',
   }, layout)
 
-  let paint = option.style ? option.style.paint : {}
+  let paint = opt.style ? opt.style.paint : {}
   let paintOpt = Object.assign({
     'fill-color': '#28b2ff',
     'fill-opacity': 0.3
   }, paint)
 
-  let line = option.style ? option.style.line : {}
+  let line = opt.style ? opt.style.line : {}
   let lineOpt = Object.assign({
     'line-color': '#fff',
     'line-width': 1,
@@ -82,6 +82,30 @@ export const addLayerPolygon = (option, layerId) => {
     paint: lineOpt
   }, layerId)
 
+  // 高亮样式
+  if (opt.high) {
+    let highLayout = opt.high.layout ? opt.high.layout : {}
+    let highLayoutOpt = Object.assign({
+      ...layoutOpt,
+    }, highLayout)
+
+    let highPaint = opt.high.paint ? opt.high.paint : {
+      'fill-opacity': 0.5
+    }
+    let highPaintOpt = Object.assign({
+      ...paintOpt,
+    }, highPaint)
+
+    map.addLayer({
+      id: id + '-high',
+      type: 'fill',
+      source: id,
+      layout: highLayoutOpt,
+      paint: highPaintOpt,
+      filter: ['==', ['boolean', ['get', 'high']], true]
+    }, layerId)
+  }
+
   if (opt.click) {
     mapClick(id, opt.click)
   }

package/src/layers/index.js

@@ -118,4 +118,13 @@ export const setFilter = (key, filter) => {
   } = mapSdk
 
   map.setFilter(key, filter)
+}
+
+// 设置高亮
+export const setHigh = (id, filter) => {
+  let {
+    map
+  } = mapSdk
+
+  map.setFilter(id + '-high', filter)
 }

package/src/util/mapEvent.js

@@ -16,6 +16,7 @@ export const mapClick = (id, callback) => {
     // if (callback) {
     //   e.preventDefault()
     // } else {
+
     if (e.defaultPrevented) return
     e.preventDefault()
 
@@ -31,10 +32,12 @@ export const mapClick = (id, callback) => {
       coordinates = [e.lngLat.lng, e.lngLat.lat]
     }
     const properties = e.features[0].properties
+    const features = map.queryRenderedFeatures(e.point)
 
     const event = {
       coordinates,
       properties,
+      features,
       e,
       position: [e.lngLat.lng, e.lngLat.lat]
     }
@@ -105,4 +108,4 @@ export const changeMapCursor = (id) => {
       })
     }
   })
-}
+}

package/src/util/mapTools.js

@@ -15,6 +15,7 @@ import {
 export const toGeoJson = (list, type, props = 'position') => {
   let pointsData = list.map((item, index) => {
     return {
+      id: item.id || '',
       type: 'Feature',
       geometry: {
         type: type,
@@ -115,3 +116,16 @@ export const polygonCenter = (area) => {
   let center = turf.centerOfMass(polygon)
   return center
 }
+
+/**
+ * 加载图片
+ */
+export const loadImage = (src, width = 24, height = 24) => {
+  return new Promise((resolve) => {
+    let image = new Image(width, height)
+    image.src = src
+    image.onload = () => {
+      resolve(image)
+    }
+  })
+}