xy-map 1.0.0

package/compontents/detail-dialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog :title="title"
+             :visible.sync="show"
+             :width="width"
+             append-to-body>
+    <el-row :gutter="24">
+      <el-col v-for="(item, index) in columns"
+              :key="index"
+              :span="colSpan"
+              v-show="data[item.key]"
+              class="item">
+        <el-col :span="labelSpan"
+                class="label">{{ item.label }}</el-col>
+        <el-col :span="24 - labelSpan"
+                class="value">
+          <span v-if="item.type === 'select'">{{ getValue(item) }}</span>
+          <div class="flex flex-wrap flex-align-center"
+               style="margin-top: 8px"
+               v-else-if="item.type === 'image' && data[key]">
+            <el-image class="viewImg margin-right margin-bottom"
+                      v-for="(img,index) in data[key].split(',').map(m => $website.imgPath + m)"
+                      :key="index"
+                      :src="img"
+                      fit="cover"
+                      :preview-src-list="data[key].split(',').map(m => $website.imgPath + m)"
+                      style="width: 100px;height: 100px"
+                      z-index="9999"></el-image>
+          </div>
+          <span v-else-if="item.type === 'imgVideo'">
+            <imgVideoBox :fileList="getFileList(data[item.key])"
+                         :mode="3"></imgVideoBox>
+          </span>
+          <span v-else>{{ data[item.key] }}</span>
+          <span v-if="item.suffixText">{{ item.suffixText }}</span>
+        </el-col>
+      </el-col>
+      <div v-if="columns.length === 0">暂无数据~</div>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '60%'
+    }
+  },
+  data () {
+    return {
+      title: '详情',
+      colSpan: 12,
+      labelSpan: 5,
+      show: false,
+      data: {},
+      columns: [
+        {
+          label: '实时地址',
+          key: 'address',
+        },
+        {
+          label: '汇水面积',
+          key: 'catchmentArea',
+          suffixText: 'm²',
+        },
+        {
+          label: '淹水等级',
+          key: 'grade',
+          type: 'select',
+          dicData: [
+            {
+              label: '轻度',
+              value: 0,
+            },
+            {
+              label: '中度',
+              value: 1,
+            },
+            {
+              label: '重度',
+              value: 3,
+            },
+          ],
+        },
+        {
+          label: '淹水原因',
+          key: 'content',
+        },
+        {
+          label: '积水开始时间',
+          key: 'ysdTime',
+        },
+        {
+          label: '上报时间',
+          key: 'reportTime',
+        },
+        {
+          label: '上报用户',
+          key: 'userName',
+        },
+        {
+          label: '经度',
+          key: 'lgtd',
+        },
+        {
+          label: '纬度',
+          key: 'lttd',
+        },
+        {
+          label: '积水图片/视频',
+          key: 'attachUrl',
+          type: 'imgVideo',
+          span: 24,
+        },
+      ],
+    }
+  },
+  methods: {
+    // 获取dic数据
+    getValue (item) {
+      const currentObj = item.dicData.find(
+        (f) => f.value === this.data[item.key]
+      )
+      if (currentObj) {
+        return currentObj.label
+      }
+      return ''
+    },
+    openDialog (data, columns, title) {
+      if (title) this.title = title
+      this.columns = columns
+      this.show = true
+      this.data = data
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/layers/Line.js

@@ -0,0 +1,175 @@
+import mapSdk from '../map'
+import * as turf from '@turf/turf'
+
+import {
+  hasSource,
+  setSource,
+  hasLayer,
+} from './index'
+import {
+  addLayerText
+} from './Text'
+import {
+  mapClick
+} from '../util/mapEvent'
+
+const defaultOptions = {
+  id: '',
+  data: [],
+  text: {
+    show: true,
+    layout: {},
+    paint: {}
+  },
+  style: {},
+  hover: null,
+  click: null,
+}
+
+/**
+ * 添加线图层
+ */
+export const addLayerLine = (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({
+    'line-join': 'round',
+    'line-cap': 'round',
+    'visibility': 'visible',
+  }, layout)
+
+  let paint = opt.style ? opt.style.paint : {}
+  let paintOpt = Object.assign({
+    'line-color': '#28b2ff',
+    'line-width': 3,
+    'line-opacity': 1
+  }, paint)
+
+  if (!hasSource(id)) {
+    map.addSource(opt.id, {
+      type: 'geojson',
+      data: opt.data
+    })
+  }
+
+
+  map.addLayer({
+    id: id,
+    type: 'line',
+    source: id,
+    layout: layoutOpt,
+    paint: paintOpt
+  }, layerId)
+
+  if (opt.click) {
+    mapClick(opt.id, opt.click)
+  }
+
+  if (opt.style && opt.style.animate) {
+    addLayerLineAnimation(opt, layerId)
+  }
+
+  // 添加文本图层
+  if (opt.text && opt.text.show) {
+    addLayerText('line', opt)
+  }
+}
+
+
+/**
+ * 添加动画线图层
+ * addLayerLine配置图层
+ */
+export const addLayerLineAnimation = (option, layerId) => {
+  let {
+    map
+  } = mapSdk
+
+  let opt = option
+  let parentId = opt.id
+  let id = parentId + '-animate'
+  if (hasLayer(id)) {
+    setSource(id, opt.data)
+    return
+  }
+
+  let layout = opt.style ? opt.style.layout : {}
+  let layoutOpt = Object.assign({
+    'line-join': 'round',
+    'line-cap': 'round',
+    'visibility': 'visible',
+  }, layout)
+
+  let paint = opt.style ? opt.style.animate : {}
+  let paintOpt = Object.assign({
+    'line-width': 3,
+    'line-opacity': 1,
+    'line-gradient': [
+      'interpolate',
+      ['linear'],
+      ['line-progress'],
+      0, 'transparent',
+      1, '#2bffdf',
+    ]
+  }, paint)
+
+
+  if (!hasSource(id)) {
+    map.addSource(id, {
+      type: 'geojson',
+      lineMetrics: true,
+      data: {
+        type: 'FeatureCollection',
+        features: []
+      }
+    })
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'line',
+    source: id,
+    layout: layoutOpt,
+    paint: paintOpt
+  }, layerId)
+
+  // 动态节点数据
+  let step = opt.animate && opt.animate.step ? opt.animate.step : 400
+  opt.data.features.forEach(f => {
+    let coordinates = f.geometry.coordinates
+    if (coordinates.length > 0) {
+      let arc = []
+      // 计算起点和终点长度，切割数组
+      let lineDistance = turf.lineDistance(f, 'kilometers')
+      for (let q = 0; q < lineDistance; q += lineDistance / step) {
+        let segment = turf.along(f, q, 'kilometers')
+        arc.push(segment.geometry.coordinates)
+      }
+
+      // 更新数据
+      let i = 0
+      f.geometry.coordinates = [arc[i]]
+      setInterval(() => {
+        if (arc[i]) {
+          f.geometry.coordinates.push(arc[i])
+          map.getSource(id).setData(opt.data)
+        }
+        i++
+        if (i > arc.length) {
+          i = 0
+          f.geometry.coordinates = [arc[i]]
+        }
+      }, 10)
+    }
+  })
+}

package/layers/Point.js

@@ -0,0 +1,251 @@
+import mapSdk from '../map'
+import {
+  hasSource,
+  hasLayer,
+  setSource
+} from './index'
+import {
+  mapClick
+} from '../util/mapEvent'
+
+const defaultOptions = {
+  id: '',
+  data: [],
+  text: {
+    show: true,
+    layout: {},
+    paint: {}
+  },
+  image: {
+    width: 24,
+    height: 24,
+    imageList: [],
+  },
+  style: {},
+  cluster: {
+    cluster: false,
+    clusterMaxZoom: 16,
+    clusterRadius: 500
+  },
+  hover: null,
+  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,
+      ...opt.cluster
+    })
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'circle',
+    source: id,
+    paint: paintOpt
+  }, layerId)
+
+  if (opt.cluster.cluster) {
+    let style = opt.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', 'imgId'] : `${id}-marker`,
+    'icon-size': 1,
+    'text-field': ['get', '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,
+      ...opt.cluster
+    })
+  }
+
+  // 图片加载完成后的操作
+  const afterOperation = () => {
+    map.addLayer({
+      id: id,
+      type: 'symbol',
+      source: id,
+      layout: layoutOpt,
+      paint: paintOpt
+    }, layerId)
+
+    if (opt.cluster.cluster) {
+      let style = opt.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 => {
+          map.addImage(`${img.id}`, image)
+          resolve()
+        })
+      })
+      await loadImg
+    }
+    afterOperation()
+  } else {
+    const img = require('../image/marker.png')
+    loadImage(img).then(image => {
+      map.addImage(`${id}-marker`, image)
+      afterOperation()
+    })
+  }
+}
+
+/**
+ * 加载图片
+ */
+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)
+    }
+  })
+}
+
+/**
+ * 点聚合图层
+ */
+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',
+      750,
+      '#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/layers/Polygon.js

@@ -0,0 +1,94 @@
+import mapSdk from '../map'
+import {
+  addLayerText
+} from './Text'
+import {
+  setSource,
+  hasSource,
+  hasLayer
+} from './index'
+import {
+  mapClick
+} from '../util/mapEvent'
+
+const defaultOptions = {
+  id: '',
+  data: [],
+  text: {
+    show: true,
+    layout: {},
+    paint: {}
+  },
+  style: {},
+  hover: null,
+  click: null,
+}
+
+/**
+ * 添加面图层
+ */
+export const addLayerPolygon = (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 = option.style ? option.style.layout : {}
+  let layoutOpt = Object.assign({
+    'visibility': 'visible',
+  }, layout)
+
+  let paint = option.style ? option.style.paint : {}
+  let paintOpt = Object.assign({
+    'fill-color': '#28b2ff',
+    'fill-opacity': 0.3
+  }, paint)
+
+  let line = option.style ? option.style.line : {}
+  let lineOpt = Object.assign({
+    'line-color': '#fff',
+    'line-width': 1,
+    'line-opacity': 0.8
+  }, line)
+
+  if (!hasSource(id)) {
+    map.addSource(id, {
+      type: 'geojson',
+      data: opt.data
+    })
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'fill',
+    source: id,
+    layout: layoutOpt,
+    paint: paintOpt
+  })
+
+  // 面描边
+  map.addLayer({
+    id: id + '-line',
+    type: 'line',
+    source: id,
+    layout: {
+      'visibility': 'visible',
+    },
+    paint: lineOpt
+  }, layerId)
+
+  if (opt.click) {
+    mapClick(id, opt.click)
+  }
+
+  // 添加文本图层
+  if (opt.text && opt.text.show) {
+    addLayerText('point', opt)
+  }
+}

package/layers/Text.js

@@ -0,0 +1,46 @@
+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
+  }
+
+  map.addLayer({
+    id: id,
+    type: 'symbol',
+    source: parentId,
+    layout: Object.assign({
+      'symbol-placement': placement,
+      'text-field': ['get', 'name'],
+      /* 使用text标签显示的值，Feature属性使用{域名}格式*/
+      'text-font': ['Open Sans Semibold'],
+      /* 文本字体 */
+      'text-size': 10,
+      'text-offset': [0, 0], // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
+      // 'text-anchor': 'top',
+      'text-ignore-placement': false, // 是否忽略文本位置
+      'visibility': 'visible'
+    }, opt.text.layout),
+    paint: Object.assign({
+      'text-color': '#ffffff',
+      'text-halo-color': 'rgba(0, 0, 0, .5)',
+      'text-halo-width': 0.8,
+      'text-opacity': 1
+    }, opt.text.paint)
+  }, layerId)
+}