xy-map 1.0.56 → 1.0.58

package/package.json

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

package/src/layers/Point.js

@@ -1,384 +1,384 @@
-import mapSdk from '../map'
-import {
-  hasSource,
-  hasLayer,
-  setSource
-} from './index'
-import {
-  addLayerText
-} from './Text'
-import {
-  loadImage
-} from '../util/mapTools'
-import {
-  mapClick
-} from '../util/mapEvent'
-
-const defaultOptions = {
-  id: '',
-  data: [],
-  text: {
-    show: true,
-    layout: {
-      'text-size': 10,
-      'text-offset': [0, 1],
-    },
-    paint: {}
-  },
-  image: {
-    width: 24,
-    height: 24,
-    src: '',
-    imageList: [],
-  },
-  style: {
-    layout: {},
-    paint: {}
-  },
-  cluster: {
-    cluster: false,
-    clusterMaxZoom: 16,
-    clusterRadius: 500,
-    style: {
-      layout: {},
-      paint: {}
-    }
-  },
-  click: null,
-}
-
-/**
- * 添加点图层
- */
-export const addLayerPoint = (option, layerId) => { // 点
-  let {
-    map
-  } = mapSdk
-
-  let opt = Object.assign({}, defaultOptions, option)
-  let id = opt.id
-  if (hasLayer(id)) {
-    setSource(id, opt.data)
-    return
-  }
-
-  let paint = opt.style ? opt.style.paint : {}
-  let paintOpt = Object.assign({
-    'circle-color': '#11b4da',
-    'circle-radius': 4,
-    'circle-stroke-width': 1,
-    'circle-stroke-color': '#fff'
-  }, paint)
-
-  if (!hasSource(id)) {
-    map.addSource(id, {
-      type: 'geojson',
-      data: opt.data,
-      cluster: opt.cluster.cluster,
-      clusterMaxZoom: opt.cluster.clusterMaxZoom,
-      clusterRadius: opt.cluster.clusterRadius
-    })
-  }
-
-  map.addLayer({
-    id: id,
-    type: 'circle',
-    source: id,
-    paint: paintOpt,
-    ...opt.other
-  }, layerId)
-
-  if (opt.cluster.cluster) {
-    let style = opt.cluster.style || {}
-    clusterLayer(id, style)
-  }
-
-  if (opt.click) {
-    mapClick(id, opt.click)
-  }
-
-  // 添加文本图层
-  if (opt.text && opt.text.show) {
-    addLayerText('point', opt)
-  }
-
-  // 高亮样式
-  if (opt.high) {
-    let highPaint = opt.high.paint ? opt.high.paint : {
-      'circle-color': '#f00'
-    }
-    let highPaintOpt = Object.assign({
-      ...paintOpt,
-    }, highPaint)
-
-    map.addLayer({
-      id: id + '-high',
-      type: 'circle',
-      source: id,
-      paint: highPaintOpt,
-      filter: ['==', ['boolean', ['get', 'high']], true]
-    }, layerId)
-  }
-}
-
-/**
- * 添加自定义点图层
- */
-export const addDiyPoint = (option, layerId) => { // 点
-  let {
-    map
-  } = mapSdk
-
-  let opt = Object.assign({}, defaultOptions, option)
-  let id = opt.id
-  if (hasLayer(id)) {
-    setSource(id, opt.data)
-    return
-  }
-
-  let layout = opt.style ? opt.style.layout : {}
-  let layoutOpt = Object.assign({
-    'text-field': '{name}',
-    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
-    'text-font': ['Open Sans Semibold'],
-    /* 文本字体 */
-    'text-size': 10,
-    'text-offset': [0, 1], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
-    'text-anchor': 'top', // 图标与锚点的位置关系
-    'icon-allow-overlap': false, // 是否允许图标重叠
-    'icon-ignore-placement': false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
-    'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
-    'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
-    // 'text-max-width': 12,        // 文本宽度
-    'visibility': 'visible'
-  }, layout)
-
-  let paint = opt.style ? opt.style.paint : {}
-  let paintOpt = Object.assign({
-    'text-color': '#ffffff',
-    'text-halo-color': 'rgba(0, 0, 0, .5)',
-    'text-halo-width': 0.8,
-    'text-opacity': 1
-  }, paint)
-
-  if (!hasSource(id)) {
-    map.addSource(id, {
-      type: 'geojson',
-      data: opt.data,
-      cluster: opt.cluster.cluster,
-      clusterMaxZoom: opt.cluster.clusterMaxZoom,
-      clusterRadius: opt.cluster.clusterRadius
-    })
-  }
-
-  map.addLayer({
-    id: id,
-    type: 'symbol',
-    source: id,
-    layout: layoutOpt,
-    paint: paintOpt,
-    ...opt.other
-  }, layerId)
-
-  if (opt.cluster.cluster) {
-    let style = opt.cluster.style || {}
-    clusterLayer(id, style)
-  }
-
-  if (opt.click) {
-    mapClick(id, opt.click)
-  }
-}
-
-/**
- * 添加图片点图层
- */
-export const addLayerImagePoint = async (option, layerId) => { // 点
-  let {
-    map
-  } = mapSdk
-
-  let opt = Object.assign({}, defaultOptions, option)
-  let id = opt.id
-  if (hasLayer(id)) {
-    setSource(id, opt.data)
-    return
-  }
-
-  let image = opt.image
-
-  let layout = opt.style ? opt.style.layout : {}
-  let layoutOpt = Object.assign({
-    'icon-image': image.imageList && image.imageList.length > 0 ? ['get', opt.image.key || 'imgId'] : `${id}-marker`,
-    'icon-size': 1,
-    'text-field': '{name}',
-    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
-    'text-font': ['Open Sans Semibold'],
-    /* 文本字体 */
-    'text-size': 10,
-    'text-offset': [0, 1], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
-    'text-anchor': 'top', // 图标与锚点的位置关系
-    'icon-allow-overlap': false, // 是否允许图标重叠
-    'icon-ignore-placement': false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
-    'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
-    'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
-    // 'text-max-width': 12,        // 文本宽度
-    'visibility': 'visible'
-  }, layout)
-
-  let paint = opt.style ? opt.style.paint : {}
-  let paintOpt = Object.assign({
-    'text-color': '#ffffff',
-    'text-halo-color': 'rgba(0, 0, 0, .5)',
-    'text-halo-width': 0.8,
-    'text-opacity': 1
-  }, paint)
-
-  if (!hasSource(id)) {
-    map.addSource(id, {
-      type: 'geojson',
-      data: opt.data,
-      cluster: opt.cluster.cluster,
-      clusterMaxZoom: opt.cluster.clusterMaxZoom,
-      clusterRadius: opt.cluster.clusterRadius
-    })
-  }
-
-  // 图片加载完成后的操作
-  const afterOperation = () => {
-    map.addLayer({
-      id: id,
-      type: 'symbol',
-      source: id,
-      layout: layoutOpt,
-      paint: paintOpt,
-      ...opt.other
-    }, 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.cluster.style || {}
-      clusterLayer(id, style)
-    }
-
-    if (opt.click) {
-      mapClick(id, opt.click)
-    }
-  }
-  //图像处理导入
-  if (image.imageList && image.imageList.length > 0) {
-    // 循环遍历图片，同步执行，避免layer重复创建
-    for (let i = 0; i < image.imageList.length; i++) {
-      const img = image.imageList[i]
-      const loadImg = new Promise((resolve, reject) => {
-        loadImage(img.url, image.width, image.height).then(image => {
-          if (map.hasImage(`${img.id}`)) {
-            map.updateImage(`${img.id}`, image)
-          } else {
-            map.addImage(`${img.id}`, image)
-          }
-          resolve()
-        })
-      })
-      await loadImg
-    }
-    afterOperation()
-  } else {
-    const img = image.src || require('../image/marker.png')
-    loadImage(img, image.width, image.height).then(image => {
-      if (map.hasImage(`${id}-marker`)) {
-        map.updateImage(`${id}-marker`, image)
-      } else {
-        map.addImage(`${id}-marker`, image)
-      }
-      afterOperation()
-    })
-  }
-}
-
-/**
- * 点聚合图层
- */
-export const clusterLayer = (option, style) => {
-  let {
-    map
-  } = mapSdk
-
-  let id = option.id
-  if (hasLayer(id)) {
-    setSource(id, option.data)
-    return
-  }
-
-  let layout = style ? style.layout : {}
-  let layoutOpt = Object.assign({
-    'text-field': '{point_count_abbreviated}',
-    'text-size': 12,
-    'visibility': 'visible'
-  }, layout)
-
-  let paint = style ? style.paint : {}
-  let paintOpt = Object.assign({
-    'circle-color': [
-      'step',
-      ['get', 'point_count'],
-      '#51bbd6',
-      100,
-      '#f1f075',
-      350,
-      '#f28cb1'
-    ],
-    'circle-radius': [
-      'step',
-      ['get', 'point_count'],
-      20,
-      100,
-      30,
-      750,
-      40
-    ]
-  }, paint)
-
-  map.addLayer({
-    id: id + '-clusters',
-    type: 'circle',
-    source: id,
-    filter: ['has', 'point_count'],
-    paint: paintOpt
-  })
-
-  map.addLayer({
-    id: id + '-cluster-count',
-    type: 'symbol',
-    source: option.id,
-    filter: ['has', 'point_count'],
-    layout: layoutOpt
-  })
-
-  mapClick(id + 'clusters', (e) => {
-    mapSdk.zoom('in', e.position)
-  })
+import mapSdk from '../map'
+import {
+  hasSource,
+  hasLayer,
+  setSource
+} from './index'
+import {
+  addLayerText
+} from './Text'
+import {
+  loadImage
+} from '../util/mapTools'
+import {
+  mapClick
+} from '../util/mapEvent'
+
+const defaultOptions = {
+  id: '',
+  data: [],
+  text: {
+    show: true,
+    layout: {
+      'text-size': 10,
+      'text-offset': [0, 1],
+    },
+    paint: {}
+  },
+  image: {
+    width: 24,
+    height: 24,
+    src: '',
+    imageList: [],
+  },
+  style: {
+    layout: {},
+    paint: {}
+  },
+  cluster: {
+    cluster: false,
+    clusterMaxZoom: 16,
+    clusterRadius: 500,
+    style: {
+      layout: {},
+      paint: {}
+    }
+  },
+  click: null,
+}
+
+/**
+ * 添加点图层
+ */
+export const addLayerPoint = (option, layerId) => { // 点
+  let {
+    map
+  } = mapSdk
+
+  let opt = Object.assign({}, defaultOptions, option)
+  let id = opt.id
+  if (hasLayer(id)) {
+    setSource(id, opt.data)
+    return
+  }
+
+  let paint = opt.style ? opt.style.paint : {}
+  let paintOpt = Object.assign({
+    'circle-color': '#11b4da',
+    'circle-radius': 4,
+    'circle-stroke-width': 1,
+    'circle-stroke-color': '#fff'
+  }, paint)
+
+  if (!hasSource(id)) {
+    map.addSource(id, {
+      type: 'geojson',
+      data: opt.data,
+      cluster: opt.cluster.cluster,
+      clusterMaxZoom: opt.cluster.clusterMaxZoom,
+      clusterRadius: opt.cluster.clusterRadius
+    })
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'circle',
+    source: id,
+    paint: paintOpt,
+    ...opt.other
+  }, layerId)
+
+  if (opt.cluster.cluster) {
+    let style = opt.cluster.style || {}
+    clusterLayer(id, style)
+  }
+
+  if (opt.click) {
+    mapClick(id, opt.click)
+  }
+
+  // 添加文本图层
+  if (opt.text && opt.text.show) {
+    addLayerText('point', opt)
+  }
+
+  // 高亮样式
+  if (opt.high) {
+    let highPaint = opt.high.paint ? opt.high.paint : {
+      'circle-color': '#f00'
+    }
+    let highPaintOpt = Object.assign({
+      ...paintOpt,
+    }, highPaint)
+
+    map.addLayer({
+      id: id + '-high',
+      type: 'circle',
+      source: id,
+      paint: highPaintOpt,
+      filter: ['==', ['boolean', ['get', 'high']], true]
+    }, layerId)
+  }
+}
+
+/**
+ * 添加自定义点图层
+ */
+export const addDiyPoint = (option, layerId) => { // 点
+  let {
+    map
+  } = mapSdk
+
+  let opt = Object.assign({}, defaultOptions, option)
+  let id = opt.id
+  if (hasLayer(id)) {
+    setSource(id, opt.data)
+    return
+  }
+
+  let layout = opt.style ? opt.style.layout : {}
+  let layoutOpt = Object.assign({
+    'text-field': '{name}',
+    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
+    'text-font': ['Open Sans Semibold'],
+    /* 文本字体 */
+    'text-size': 10,
+    'text-offset': [0, 1], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
+    'text-anchor': 'top', // 图标与锚点的位置关系
+    'icon-allow-overlap': false, // 是否允许图标重叠
+    'icon-ignore-placement': false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
+    'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
+    'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
+    // 'text-max-width': 12,        // 文本宽度
+    'visibility': 'visible'
+  }, layout)
+
+  let paint = opt.style ? opt.style.paint : {}
+  let paintOpt = Object.assign({
+    'text-color': '#ffffff',
+    'text-halo-color': 'rgba(0, 0, 0, .5)',
+    'text-halo-width': 0.8,
+    'text-opacity': 1
+  }, paint)
+
+  if (!hasSource(id)) {
+    map.addSource(id, {
+      type: 'geojson',
+      data: opt.data,
+      cluster: opt.cluster.cluster,
+      clusterMaxZoom: opt.cluster.clusterMaxZoom,
+      clusterRadius: opt.cluster.clusterRadius
+    })
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'symbol',
+    source: id,
+    layout: layoutOpt,
+    paint: paintOpt,
+    ...opt.other
+  }, layerId)
+
+  if (opt.cluster.cluster) {
+    let style = opt.cluster.style || {}
+    clusterLayer(id, style)
+  }
+
+  if (opt.click) {
+    mapClick(id, opt.click)
+  }
+}
+
+/**
+ * 添加图片点图层
+ */
+export const addLayerImagePoint = async (option, layerId) => { // 点
+  let {
+    map
+  } = mapSdk
+
+  let opt = Object.assign({}, defaultOptions, option)
+  let id = opt.id
+  if (hasLayer(id)) {
+    setSource(id, opt.data)
+    return
+  }
+
+  let image = opt.image
+
+  let layout = opt.style ? opt.style.layout : {}
+  let layoutOpt = Object.assign({
+    'icon-image': image.imageList && image.imageList.length > 0 ? ['get', opt.image.key || 'imgId'] : `${id}-marker`,
+    'icon-size': 1,
+    'text-field': '{name}',
+    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
+    'text-font': ['Open Sans Semibold'],
+    /* 文本字体 */
+    'text-size': 10,
+    'text-offset': [0, 1], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
+    'text-anchor': 'top', // 图标与锚点的位置关系
+    'icon-allow-overlap': false, // 是否允许图标重叠
+    'icon-ignore-placement': false, // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
+    'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
+    'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
+    // 'text-max-width': 12,        // 文本宽度
+    'visibility': 'visible'
+  }, layout)
+
+  let paint = opt.style ? opt.style.paint : {}
+  let paintOpt = Object.assign({
+    'text-color': '#ffffff',
+    'text-halo-color': 'rgba(0, 0, 0, .5)',
+    'text-halo-width': 0.8,
+    'text-opacity': 1
+  }, paint)
+
+  if (!hasSource(id)) {
+    map.addSource(id, {
+      type: 'geojson',
+      data: opt.data,
+      cluster: opt.cluster.cluster,
+      clusterMaxZoom: opt.cluster.clusterMaxZoom,
+      clusterRadius: opt.cluster.clusterRadius
+    })
+  }
+
+  // 图片加载完成后的操作
+  const afterOperation = () => {
+    map.addLayer({
+      id: id,
+      type: 'symbol',
+      source: id,
+      layout: layoutOpt,
+      paint: paintOpt,
+      ...opt.other
+    }, 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.cluster.style || {}
+      clusterLayer(id, style)
+    }
+
+    if (opt.click) {
+      mapClick(id, opt.click)
+    }
+  }
+  //图像处理导入
+  if (image.imageList && image.imageList.length > 0) {
+    // 循环遍历图片，同步执行，避免layer重复创建
+    for (let i = 0; i < image.imageList.length; i++) {
+      const img = image.imageList[i]
+      const loadImg = new Promise((resolve, reject) => {
+        loadImage(img.url, image.width, image.height).then(image => {
+          if (map.hasImage(`${img.id}`)) {
+            map.updateImage(`${img.id}`, image)
+          } else {
+            map.addImage(`${img.id}`, image)
+          }
+          resolve()
+        })
+      })
+      await loadImg
+    }
+    afterOperation()
+  } else {
+    const img = image.src || require('../image/marker.png')
+    loadImage(img, image.width, image.height).then(image => {
+      if (map.hasImage(`${id}-marker`)) {
+        map.updateImage(`${id}-marker`, image)
+      } else {
+        map.addImage(`${id}-marker`, image)
+      }
+      afterOperation()
+    })
+  }
+}
+
+/**
+ * 点聚合图层
+ */
+export const clusterLayer = (option, style) => {
+  let {
+    map
+  } = mapSdk
+
+  let id = option.id
+  if (hasLayer(id)) {
+    setSource(id, option.data)
+    return
+  }
+
+  let layout = style ? style.layout : {}
+  let layoutOpt = Object.assign({
+    'text-field': '{point_count_abbreviated}',
+    'text-size': 12,
+    'visibility': 'visible'
+  }, layout)
+
+  let paint = style ? style.paint : {}
+  let paintOpt = Object.assign({
+    'circle-color': [
+      'step',
+      ['get', 'point_count'],
+      '#51bbd6',
+      100,
+      '#f1f075',
+      350,
+      '#f28cb1'
+    ],
+    'circle-radius': [
+      'step',
+      ['get', 'point_count'],
+      20,
+      100,
+      30,
+      750,
+      40
+    ]
+  }, paint)
+
+  map.addLayer({
+    id: id + '-clusters',
+    type: 'circle',
+    source: id,
+    filter: ['has', 'point_count'],
+    paint: paintOpt
+  })
+
+  map.addLayer({
+    id: id + '-cluster-count',
+    type: 'symbol',
+    source: option.id,
+    filter: ['has', 'point_count'],
+    layout: layoutOpt
+  })
+
+  mapClick(id + 'clusters', (e) => {
+    mapSdk.zoom('in', e.position)
+  })
 }

package/src/layers/Text.js

@@ -1,53 +1,53 @@
-import mapSdk from '../map'
-import {
-  setSource,
-  hasLayer
-} from './index'
-
-/**
- * 添加文字图层
- */
-export const addLayerText = (placement = 'point', option, layerId) => { // 文本
-  let {
-    map
-  } = mapSdk
-
-  let opt = option
-  let parentId = opt.id
-  let id = parentId + '-text'
-  if (hasLayer(id)) {
-    setSource(id, opt.data)
-    return
-  }
-
-  let layout = opt.text ? opt.text.layout : {}
-  let layoutOpt = Object.assign({
-    'symbol-placement': placement,
-    'text-field': '{name}',
-    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
-    'text-font': ['Open Sans Semibold'],
-    /* 文本字体 */
-    'text-size': 10,
-    'text-offset': [0, 0], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
-    // 'text-anchor': 'top',
-    'text-ignore-placement': false, // 是否忽略文本位置
-    'visibility': 'visible'
-  }, layout)
-
-  let paint = opt.text ? opt.text.paint : {}
-  let paintOpt = Object.assign({
-    'text-color': '#ffffff',
-    'text-halo-color': 'rgba(0, 0, 0, .5)',
-    'text-halo-width': 0.8,
-    'text-opacity': 1
-  }, paint)
-
-  map.addLayer({
-    id: id,
-    type: 'symbol',
-    source: opt.source || parentId,
-    layout: layoutOpt,
-    paint: paintOpt,
-    ...opt.other
-  }, layerId)
+import mapSdk from '../map'
+import {
+  setSource,
+  hasLayer
+} from './index'
+
+/**
+ * 添加文字图层
+ */
+export const addLayerText = (placement = 'point', option, layerId) => { // 文本
+  let {
+    map
+  } = mapSdk
+
+  let opt = option
+  let parentId = opt.id
+  let id = parentId + '-text'
+  if (hasLayer(id)) {
+    setSource(id, opt.data)
+    return
+  }
+
+  let layout = opt.text ? opt.text.layout : {}
+  let layoutOpt = Object.assign({
+    'symbol-placement': placement,
+    'text-field': '{name}',
+    /* 使用text标签显示的值，Feature属性使用{域名}格式*/
+    'text-font': ['Open Sans Semibold'],
+    /* 文本字体 */
+    'text-size': 10,
+    'text-offset': [0, 0], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
+    // 'text-anchor': 'top',
+    'text-ignore-placement': false, // 是否忽略文本位置
+    'visibility': 'visible'
+  }, layout)
+
+  let paint = opt.text ? opt.text.paint : {}
+  let paintOpt = Object.assign({
+    'text-color': '#ffffff',
+    'text-halo-color': 'rgba(0, 0, 0, .5)',
+    'text-halo-width': 0.8,
+    'text-opacity': 1
+  }, paint)
+
+  map.addLayer({
+    id: id,
+    type: 'symbol',
+    source: opt.source || parentId,
+    layout: layoutOpt,
+    paint: paintOpt,
+    ...opt.other
+  }, layerId)
 }

package/src/map.js

@@ -25,7 +25,8 @@ var defaultOptions = {
         'type': 'raster',
         'tiles': [
           'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
-          // 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+          // 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          // 'https://map.ynmdgq.com/{z}/{x}/{y}.png'
         ],
         'tileSize': 256
       }

package/src/util/gaodeApi.js

@@ -1,67 +1,67 @@
-import axios from 'axios'
-
-// 获取浏览器定位
-export function GeoAddress(lnglat) {
-  return new Promise((resolve) => {
-    axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=39d46e3fcb4c9740d08e8ecb1f15ff8c&location=${lnglat[0]},${lnglat[1]}&extensions=all`).then(({
-      data
-    }) => {
-      if (data.status === '1') {
-        // result为对应的地理位置详细信息
-        let address = {
-          formattedAddress: data.regeocode.formatted_address,
-          ...data.regeocode.addressComponent
-        }
-        // console.log(address)
-        resolve(address)
-      }
-    })
-  })
-}
-
-
-// 获取浏览器定位
-export function Geolocation() {
-  return new Promise((resolve) => {
-    // eslint-disable-next-line no-undef
-    new AMap.plugin('AMap.Geolocation', () => {
-      // eslint-disable-next-line no-undef
-      const geolocation = new AMap.Geolocation({
-        // 是否使用高精度定位，默认：true
-        enableHighAccuracy: true,
-        // 设置定位超时时间，默认：无穷大
-        timeout: 10000,
-        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
-        // eslint-disable-next-line no-undef
-        buttonOffset: new AMap.Pixel(10, 20),
-        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
-        zoomToAccuracy: true,
-        //  定位按钮的排放位置,  RB表示右下
-        buttonPosition: 'RB'
-      })
-
-      geolocation.getCurrentPosition((status, result) => {
-        if (status === 'complete') {
-          onComplete(result)
-        } else {
-          onError(result)
-        }
-      })
-
-      function onComplete(data) {
-        // data是具体的定位信息
-        const info = {
-          lng: data.position.lng,
-          lat: data.position.lat,
-          formattedAddress: data.formattedAddress,
-          ...data.addressComponent
-        }
-        resolve(info)
-      }
-
-      function onError(data) {
-        // 定位出错
-      }
-    })
-  })
+import axios from 'axios'
+
+// 获取浏览器定位
+export function GeoAddress(lnglat) {
+  return new Promise((resolve) => {
+    axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=39d46e3fcb4c9740d08e8ecb1f15ff8c&location=${lnglat[0]},${lnglat[1]}&extensions=all`).then(({
+      data
+    }) => {
+      if (data.status === '1') {
+        // result为对应的地理位置详细信息
+        let address = {
+          formattedAddress: data.regeocode.formatted_address,
+          ...data.regeocode.addressComponent
+        }
+        // console.log(address)
+        resolve(address)
+      }
+    })
+  })
+}
+
+
+// 获取浏览器定位
+export function Geolocation() {
+  return new Promise((resolve) => {
+    // eslint-disable-next-line no-undef
+    new AMap.plugin('AMap.Geolocation', () => {
+      // eslint-disable-next-line no-undef
+      const geolocation = new AMap.Geolocation({
+        // 是否使用高精度定位，默认：true
+        enableHighAccuracy: true,
+        // 设置定位超时时间，默认：无穷大
+        timeout: 10000,
+        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+        // eslint-disable-next-line no-undef
+        buttonOffset: new AMap.Pixel(10, 20),
+        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+        zoomToAccuracy: true,
+        //  定位按钮的排放位置,  RB表示右下
+        buttonPosition: 'RB'
+      })
+
+      geolocation.getCurrentPosition((status, result) => {
+        if (status === 'complete') {
+          onComplete(result)
+        } else {
+          onError(result)
+        }
+      })
+
+      function onComplete(data) {
+        // data是具体的定位信息
+        const info = {
+          lng: data.position.lng,
+          lat: data.position.lat,
+          formattedAddress: data.formattedAddress,
+          ...data.addressComponent
+        }
+        resolve(info)
+      }
+
+      function onError(data) {
+        // 定位出错
+      }
+    })
+  })
 }

package/vue.config.js

@@ -17,7 +17,8 @@ module.exports = defineConfig({
       // proxyon为代理前缀，如果请求中包含该前缀，就走代理
       '/api': {
         // 真实的后端服务器地址
-        target: 'https://www.ynmdgq.com/api',
+        target: 'http://39.129.112.151:9091/api',
+        // target: 'https://www.ynmdgq.com/api',
         ws: true,
         // 控制请求头中的host
         changeOrigin: true,
@@ -25,7 +26,7 @@ module.exports = defineConfig({
         pathRewrite: {
           '^/api': ''
         }
-      },
+      }
     }
   },
 })