xy-map 1.0.0

package/layers/index.js

@@ -0,0 +1,119 @@
+// import mapBoxGl from 'mapbox-gl'
+import mapSdk from '../map'
+
+// 更新数据
+export const setSource = (id, data) => {
+  let {
+    map
+  } = mapSdk
+  let hasSource = map.getSource(id)
+  if (hasSource) {
+    map.getSource(id).setData(data)
+  }
+}
+// 判断图层是否存在
+export const hasLayer = (id) => {
+  let {
+    map
+  } = mapSdk
+
+  return map.getLayer(id)
+}
+
+// 判断数据是否存在
+export const hasSource = (id) => {
+  let {
+    map
+  } = mapSdk
+
+  return map.getSource(id)
+}
+
+// 删除图层
+export const removeLayer = (id) => {
+  let {
+    map
+  } = mapSdk
+
+  let arr = getLayerAll()
+  let layers = arr.filter(item => item.id.includes(id + '-') || item.id === id)
+
+  layers.forEach(item => {
+    if (hasLayer(item.id)) {
+      map.removeLayer(item.id)
+    }
+  })
+}
+
+/**
+ * 获取所有图层
+ */
+export const getLayerAll = () => {
+  let {
+    map
+  } = mapSdk
+  let data = map.getStyle().layers
+  return data
+}
+
+// 显示隐藏图层
+export const showLayer = (id, show = false) => {
+  let {
+    map
+  } = mapSdk
+
+  let arr = getLayerAll()
+  let layers = arr.filter(item => item.id.includes(id + '-') || item.id === id)
+
+  show = show ? 'visible' : 'none'
+  layers.forEach(item => {
+    if (hasLayer(item.id)) {
+      map.setLayoutProperty(item.id, 'visibility', show)
+    }
+  })
+}
+
+// 显隐文字
+export const showLayerText = (show, id = '') => {
+  let {
+    map
+  } = mapSdk
+
+  if (id) {
+    setPaint(id, 'text-opacity', show ? 1 : 0)
+  } else {
+    let textLayer = map.getStyle().layers
+    textLayer.forEach(layer => {
+      if (layer.type === 'symbol') {
+        setPaint(layer.id, 'text-opacity', show ? 1 : 0)
+      }
+    })
+  }
+}
+
+// 修改Layout
+export const setLayout = (id, key, value) => {
+  let {
+    map
+  } = mapSdk
+
+  map.setLayoutProperty(id, key, value)
+}
+
+// 修改Paint
+export const setPaint = (id, key, value) => {
+  let {
+    map
+  } = mapSdk
+
+  map.setPaintProperty(id, key, value)
+}
+
+// 修改Filter
+export const setFilter = (key, filter) => {
+  let {
+    map
+  } = mapSdk
+
+  map.setFilter(key, filter)
+}

package/map.js

@@ -0,0 +1,400 @@
+var defaultOptions = {
+  container: 'map',
+  zoom: 12,
+  minZoom: 11,
+  center: [102.485544, 24.921785],
+  pitch: 0, // 3d倾斜视角
+  bearing: -50, // 旋转
+  terrain: true, // 开启地形
+  build: true, // 显示建筑
+  pitchWithRotate: true, // 禁止绕x轴旋转 false禁止
+  attributionControl: true, // 隐藏地图所属信息
+  projection: 'globe',
+  style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'
+  // style: 'mapbox://styles/mapbox/streets-v9',
+}
+
+import mapBoxGl from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import './style/map.css'
+
+var popup = null
+
+class mapSdk {
+  constructor() {
+    this.accessToken = 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2t4NzAxZzdvMDZ5MTJ2azN0NzBqZGt0bCJ9.cRDXTquac05DVKJ5wc854w'
+    this.options = defaultOptions // 初始参数
+    this.map = null
+  }
+
+  /**
+   * 初始化地图
+   * @param {*} options
+   */
+  initMap = (options) => {
+    mapBoxGl.accessToken = options.accessToken || this.accessToken
+    this.options = Object.assign(defaultOptions, options)
+
+    const map = this.map = new mapBoxGl.Map(this.options)
+
+    return new Promise((resolve, reject) => {
+      map.on('load', () => {
+        this.addFog()
+        if (this.options.terrain) {
+          this.setTerrain()
+        }
+        if (this.options.build) {
+          this.addBuildings()
+        }
+        resolve(map)
+      })
+    })
+  }
+
+  /**
+   * 摄像机视角飞行
+   * @param {*}
+   */
+  flyTo = (config) => {
+    return new Promise((resolve) => {
+      let map = this.map
+      let options = Object.assign({
+        duration: 1000, // Animate over 12 seconds
+        essential: true,
+        speed: 1,
+      }, config)
+      map.flyTo(options, {
+        moveend: 'flyEnd'
+      })
+
+      // 飞行结束
+      map.on('moveend', (e) => {
+        if (e.moveend && e.moveend === 'flyEnd') {
+          resolve(true)
+        }
+      })
+    })
+  }
+
+  /**
+   * 地图平移到某个点
+   */
+  easeTo(position, duration = 1000) {
+    this.map.easeTo({
+      center: position,
+      duration
+    })
+  }
+
+  /**
+   * 添加地形
+   */
+  setTerrain() {
+    let map = this.map
+    map.addSource('mapbox-dem', {
+      'type': 'raster-dem',
+      // 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
+      'url': 'mapbox://mapbox.terrain-rgb',
+      'tileSize': 512,
+      'maxzoom': 14
+    })
+    map.setTerrain({
+      'source': 'mapbox-dem',
+      'exaggeration': 1.5
+    })
+  }
+
+  /**
+   * 添加雾
+   */
+  addFog() {
+    let map = this.map
+    if (this.options.night) {
+      // 晚上
+      map.setFog({
+        'range': [1, 15],
+        'horizon-blend': 0.1,
+        'color': '#242B4B',
+        'high-color': '#161B36',
+        'space-color': '#0B1026',
+        'star-intensity': 0.1
+      })
+    } else {
+      // 天空
+      map.addLayer({
+        'id': 'sky',
+        'type': 'sky',
+        'paint': {
+          'sky-type': 'atmosphere',
+          'sky-atmosphere-sun': [0.0, 0.0],
+          'sky-atmosphere-sun-intensity': 15
+        }
+      })
+
+      // 白天
+      map.setFog({
+        'range': [1, 15],
+        'horizon-blend': 0.1,
+        'color': 'white',
+        'high-color': '#add8e6',
+        'space-color': '#161B36',
+        'star-intensity': 0.1
+      })
+    }
+  }
+
+  /**
+   * 添加建筑
+   */
+  addBuildings() {
+    let map = this.map
+    const layers = map.getStyle().layers
+    const labelLayerId = layers.find((layer) => layer.type === 'symbol' && layer.layout['text-field']).id
+    map.addLayer({
+        'id': 'add-3d-buildings',
+        'source': 'composite',
+        'source-layer': 'building',
+        'filter': ['==', 'extrude', 'true'],
+        'type': 'fill-extrusion',
+        'minzoom': 15,
+        'paint': {
+          'fill-extrusion-color': '#fff',
+
+          // Use an 'interpolate' expression to
+          // add a smooth transition effect to
+          // the buildings as the user zooms in.
+          'fill-extrusion-height': [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            15,
+            0,
+            15.05,
+            ['get', 'height']
+          ],
+          'fill-extrusion-base': [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            15,
+            0,
+            15.05,
+            ['get', 'min_height']
+          ],
+          'fill-extrusion-opacity': 0.7
+        }
+      },
+      labelLayerId
+    )
+  }
+
+  /**
+   * 行政区域边界
+   * @param {*} geoJson
+   * @param {*} config
+   */
+  drawCityBorder(geoJson, config = {}) {
+    const style = Object.assign({
+      lineWidth: 4,
+      lineColor: 'rgb(100,149,237)',
+      lineOpacity: 1,
+      fillColor: 'rgb(2,26,79)',
+      fillOpacity: 0.2
+    }, config)
+    let mbData = geoJson.features[0].geometry.coordinates[0].flat(1)
+    this.map.addLayer({
+      //蒙版边界
+      id: 'bj-line',
+      type: 'line',
+      source: {
+        type: 'geojson',
+        data: geoJson, //区划的面数据
+      },
+      paint: {
+        'line-color': style.lineColor || 'rgb(100,149,237)',
+        'line-width': style.lineWidth || 3,
+        'line-opacity': style.lineOpacity || 1
+      },
+      layout: {
+        visibility: 'visible',
+      }
+    })
+
+    this.map.addLayer({
+      //蒙版图层   //通过边界数据反选 达到挖洞效果
+      id: 'bj-model',
+      type: 'fill',
+      source: {
+        type: 'geojson',
+        data: {
+          type: 'Feature',
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [-180, 90],
+                [180, 90],
+                [180, -90],
+                [-180, -90],
+              ],
+              mbData,
+            ],
+          },
+        },
+      },
+      paint: {
+        'fill-color': style.fillColor || 'rgba(255,255,255,.2)',
+        'fill-opacity': style.fillOpacity || 1 /* 透明度 */ ,
+      },
+      layout: {
+        visibility: 'visible',
+      },
+    })
+  }
+
+  /**
+   * 获取摄像机位置
+   */
+  getCamera() {
+    let {
+      center,
+      pitch,
+      zoom,
+      bearing
+    } = this.map.transform
+    let data = {
+      lat: center.lat,
+      lng: center.lng,
+      center: [center.lng, center.lat],
+      pitch,
+      zoom,
+      bearing
+    }
+    console.log(data)
+    return data
+  }
+
+  /**
+   * 添加气泡弹窗
+   * @param {*} coordinates
+   * @param {*} html
+   */
+  addPopup(coordinates, html) {
+    this.removePopup()
+    popup = new mapBoxGl.Popup()
+      .setLngLat(coordinates)
+      .setHTML(html)
+      .addTo(this.map)
+    popup.on('close', (e) => {
+      popup = null
+    })
+  }
+
+  /**
+   * 删除气泡
+   */
+  removePopup() {
+    if (popup) {
+      popup.remove()
+      popup = null
+    }
+  }
+
+  /**
+   * 适应线段范围
+   * @param {*} coordinates
+   * @param {*} options
+   */
+  fitLineBounds(coordinates, options) {
+    let bounds = coordinates.reduce((bounds, coord) => {
+      return bounds.extend(coord)
+    }, new mapBoxGl.LngLatBounds(coordinates[0], coordinates[0]))
+    this.map.fitBounds(bounds, options)
+  }
+
+  /**
+   * 放大 / 缩小地图
+   * @param {*} type  // type = in 放大
+   * @param {*} center  // center中心点
+   */
+  zoom(type, center = '') {
+    const maxZoom = this.options.maxZoom || 18
+    const minZoom = this.options.minZoom || 6
+    let zoom = this.map.getZoom()
+    if (!center) {
+      center = this.map.getCenter()
+    }
+    if (type === 'in') {
+      // 点击+
+      if (zoom < maxZoom) {
+        zoom += 1
+      }
+    } else {
+      if (zoom > minZoom) {
+        zoom -= 1
+      }
+    }
+    this.map.flyTo({
+      center,
+      zoom
+    })
+  }
+
+  /**
+   * 禁用旋转视角
+   */
+  pitchWithRotate(value) {
+    if (value) {
+      this.map.dragRotate.enable()
+    } else {
+      this.map.dragRotate.disable()
+    }
+  }
+
+  /**
+   * 禁用地图缩放
+   */
+  disableZoom(value) {
+    if (value) {
+      this.map.scrollZoom.enable()
+    } else {
+      this.map.scrollZoom.disable()
+    }
+  }
+
+  /**
+   * 修改地图样式
+   * @param {*} style // 地图样式
+   * @returns
+   */
+  checkStyle(style = 'mapbox://styles/mapbox/streets-v11') {
+    let map = this.map
+    return new Promise((resolve) => {
+      map.setStyle(style)
+      map.on('style.load', () => {
+        this.addFog()
+        resolve(true)
+      })
+    })
+  }
+
+  /**
+   * 设置覆盖地图颜色
+   * @param {*} color
+   */
+  setMapColor(color = 'rgba(3, 20, 57, 0.4)') {
+    let map = this.map
+    map.addLayer({
+      'id': 'mapColor',
+      'type': 'background',
+      'paint': {
+        'background-color': color
+      },
+      'metadata': {
+        'mapbox:group': '92ca48f13df25'
+      }
+    })
+  }
+}
+
+export default new mapSdk()

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "xy-map",
+  "version": "1.0.0",
+  "description": "地图组件",
+  "main": "map.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish": "npm publish"
+  },
+  "keywords": [],
+  "author": "han",
+  "license": "ISC"
+}

package/style/hoverHtml.css

@@ -0,0 +1,29 @@
+.xy-hover-html {
+}
+
+.xy-hover-html .hover-item {
+  display: flex;
+}
+.xy-hover-html .hover-item .label {
+  width: 80px;
+}
+
+.xy-hover-html .hover-item .value {
+  flex: 1;
+}
+
+.xy-hover-html .waring-color {
+  color: #e6a23c;
+}
+
+.xy-hover-html .success-color {
+  color: #67c23a;
+}
+
+.xy-hover-html .error-color {
+  color: #f56c6c;
+}
+
+.xy-hover-html .info-color {
+  color: #909399;
+}

package/style/map.css

@@ -0,0 +1,7 @@
+.mapboxgl-ctrl-attrib {
+  display: none;
+}
+
+.mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/util/mapEvent.js

@@ -0,0 +1,108 @@
+import mapSdk from '../map'
+
+/**
+ * 地图点击
+ * @param {*} id 图层id
+ * @param {*} callback 点击事件回调
+ */
+export const mapClick = (id, callback) => {
+  let {
+    map
+  } = mapSdk
+  changeMapCursor(id)
+
+  map.on('click', id, (e) => {
+    //阻止点击重合部分触发事件 重叠时点（isPoint = true）图层优先显示
+    // if (callback) {
+    //   e.preventDefault()
+    // } else {
+    if (e.defaultPrevented) return
+    e.preventDefault()
+
+    // }
+    let coordinates
+    //点图层返回点要素经纬度，线面返回所点击的点经纬度
+    if (callback) {
+      coordinates = e.features[0].geometry.coordinates.slice()
+      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
+      }
+    } else {
+      coordinates = [e.lngLat.lng, e.lngLat.lat]
+    }
+    const properties = e.features[0].properties
+
+    const event = {
+      coordinates,
+      properties,
+      e,
+      position: [e.lngLat.lng, e.lngLat.lat]
+    }
+    callback(event)
+  })
+}
+
+/**
+ * 图表hover事件
+ */
+export const mapHover = (id, callback) => {
+  let {
+    map
+  } = mapSdk
+  changeMapCursor(id)
+  map.on('mousemove', id, (e) => {
+    if (callback) {
+      e.preventDefault()
+    } else {
+      if (e.defaultPrevented) return
+    }
+
+    let coordinates
+    //点图层返回点要素经纬度，线面返回所点击的点经纬度
+    if (callback) {
+      coordinates = e.features[0].geometry.coordinates.slice()
+      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
+      }
+    } else {
+      coordinates = [e.lngLat.lng, e.lngLat.lat]
+    }
+    const properties = e.features[0].properties
+
+    const event = {
+      coordinates,
+      properties,
+      e,
+      position: [e.lngLat.lng, e.lngLat.lat]
+    }
+    callback(event)
+  })
+
+  map.on('mouseleave', id, () => {
+    map.getCanvas().style.cursor = ''
+    callback(false)
+  })
+}
+
+
+/**
+ * 改变图层手势为手型
+ * @param {*} id 图层id
+ */
+export const changeMapCursor = (id) => {
+  let {
+    map
+  } = mapSdk
+  const layers = map.getStyle().layers
+  layers.forEach(layer => {
+    const layerId = layer.id
+    if (layerId.includes(id)) {
+      map.on('mousemove', layerId, () => {
+        map.getCanvas().style.cursor = 'pointer'
+      })
+      map.on('mouseleave', layerId, (e) => {
+        map.getCanvas().style.cursor = ''
+      })
+    }
+  })
+}