xy-map 1.0.13 → 1.0.14

package/package.json

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

package/src/index.js

@@ -10,6 +10,7 @@ import {
   setLayout,
   setPaint,
   setFilter,
+  setHigh,
   getLayerAll
 } from './layers/index.js'
 
@@ -58,6 +59,7 @@ const mapLayers = {
   setLayout,
   setPaint,
   setFilter,
+  setHigh,
   getLayerAll
 }
 

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

@@ -218,6 +218,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)

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,
@@ -114,4 +115,4 @@ export const polygonCenter = (area) => {
   let polygon = turf.polygon(area)
   let center = turf.centerOfMass(polygon)
   return center
-}
+}