crithesJie的博客文档

地图相关

# 地图相关

# 1.地图常用文档

SuperMap官方api文档： SuperMap api (opens new window)

# 2.初始化地图

// 遥感
const ioUrl = `${process.env.VUE_APP_MAP}/iserver/services/map-ugcv5-ZSmapBlue4490/rest/maps/ZSmapBlue4490`
mounted () {
    this.setEventBus()
},
// 设置监听器
setEventBus () {
    const eventArr = [
        // 地图初始化
        'initMap'
    ]
    eventArr.forEach(item => {
        window.eventBus.$on(item, e => {
            this[item](e)
        })
    })
},
// 初始化地图
initMap (e) {
  state.map = state.L.map('map', {
    crs: state.L.CRS.EPSG4326,
    center: [22.51270296284929, 113.42823031358421],
    // minZoom: 9.8,
    zoom: state.initZoom,
    zoomSnap: 0.1, // 设置地图的步长
    // scrollWheelZoom: false, // 滚轮缩放
    // doubleClickZoom: false, // 双击放大
    zoomControl: false, // 控制按钮
    // dragging: false, // 拖拽
  })
  state.baseLayer = state.L.supermap.tiledMapLayer(ioUrl, { transparent: true })
  state.baseLayer.addTo(state.map)
},
// 使用
// 初始化地图
window.eventBus.$emit('initMap')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 3.添加地图

// 添加地图
addMaps () {
  // 图层没有时，调用
  // 防止图层重复调用
  if (state.baseLayer === null) {
    state.baseLayer = state.L.supermap.tiledMapLayer(ioUrl, { transparent: true })
    state.baseLayer.addTo(state.map)
  }
},
// 使用
// 添加地图
window.eventBus.$emit('addMaps')
1
2
3
4
5
6
7
8
9
10
11
12

# 4.移除地图

// 移除地图
removeMap () {
  // 移除图层
  state.baseLayer.remove()
  // 置空
  state.baseLayer = null
},
// 使用
// 移除地图
window.eventBus.$emit('removeMap')
1
2
3
4
5
6
7
8
9
10

# 5.地图复位

// 地图复位
restoration (e) {
  // leaflet容器变化，地图重新加载
  state.map.invalidateSize(true)
  state.map.setView([22.51270296284929, 113.42823031358421], state.initZoom)
},
// 使用
// 地图复位
window.eventBus.$emit('restoration')
1
2
3
4
5
6
7
8
9

# 6.设置点击中山行政区域名称，放大所在镇街区域

// 设置点击中山行政区域名称，放大所在镇街区域
setRectMap (name) {
  const cBoundsX = []
  const cBoundsY = []
  if (name === '全市') {
    streetsArea.features.forEach(item => {
      item.geometry.coordinates[0].forEach(c => {
        cBoundsX.push(c[0])
        cBoundsY.push(c[1])
      })
    })
  } else if (typeof name === 'string' && name !== '全市') {
    streetsArea.features.forEach(item => {
      if (item.properties.JDNAME === name) {
        item.geometry.coordinates[0].forEach(item => {
          cBoundsX.push(Number(item[0]))
          cBoundsY.push(Number(item[1]))
        })
      }
    })
  } else if (Array.isArray(name)) {
    name.forEach(item => {
      cBoundsX.push(Number(item[0]))
      cBoundsY.push(Number(item[1]))
    })
  }
  const maxX = Math.max.apply(null, cBoundsX)
  const minX = Math.min.apply(null, cBoundsX)
  const maxY = Math.max.apply(null, cBoundsY)
  const minY = Math.min.apply(null, cBoundsY)
  this.center = [(maxX + minX) / 2, (maxY + minY) / 2]
  const corner1 = state.L.latLng(minY, minX)
  const corner2 = state.L.latLng(maxY, maxX)
  const bounds = state.L.latLngBounds(corner1, corner2)
  if (name === '全市') {
    state.map.setMaxBounds(null)
    this.restoration()
  } else {
    state.map.setMaxBounds(bounds)
    state.map.setZoom(state.map.getBoundsZoom(bounds))
  }
},
// 使用
window.eventBus.$emit('setRectMap', '全市')
window.eventBus.$emit('setRectMap', item.value)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 7.通过url图层地址，绘制图层

// 定义
// 使用
// 绘制非行政区域图层可执行多次在地图上绘制多个图层  两种方式 图层服务  图层数据 根据实际情况选择一种使用
drawCoverage (
    obj = {
        operation: 'add',
        CoverageName: '图层1',
        // 图层边框颜色
        color: 'yellow',
        // 图层填充颜色
        fillColor: 'yellow',
        // points 数据格式必须与下面小榄镇一样的图层数据 必须(geojson格式数据)
        points: [],
        url: '', // 图层地址 如果存在图层地址则不使用数据渲染
        PoupComponent: PoupMap
    }
) {
    if (obj.operation === 'add') {
        if (obj.url) {
            state[obj.CoverageName] = state.L.supermap.tiledMapLayer(obj.url, { transparent: true })
        } else {
            state[obj.CoverageName] = window.L.geoJSON(obj.points, obj.color ? {
                color: obj.color || '',
                weight: 1,
                fillColor: obj.fillColor || '',
                opacity: 1,
                fillOpacity: 1,
            } : null)
        }
        state[obj.CoverageName].addTo(state.map)
        // state[obj.CoverageName].bindPopup('2222').openPopup()
        state[obj.CoverageName].on('click', (e) => {
            console.log(e, '重点行业企业地块444')
            const mean = e.layer.feature.properties
            window.eventBus.$emit('setRectMapMean', mean)
        })
    }
    if (obj.operation === 'remove') {
        state[obj.CoverageName].remove()
        state[obj.CoverageName] = undefined
    }
},
// 使用
window.eventBus.$emit('drawCoverage', {
    operation: 'add',
    CoverageName: '生态功能区划',
    url: `${process.env.VUE_APP_MAP}/iserver/services/map-JianCeHeYong/rest/maps/生态功能区划`
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 8.通过已有的json文件，绘制区域图层

import streetsArea from '@/views/ecological-environment/json/street-area.json'
// 绘制中山行政区域图层
magnifyMap (
    obj = {
        name: '小榄镇',
        // 图层边框颜色
        color: 'yellow',
        // 图层填充颜色
        fillColor: 'yellow',
    }
) {
    if (state.overlayLayer) {
        state.map.removeLayer(state.overlayLayer)
        state.overlayLayer = null
    }
    let cp = []
    if (obj.name === '全市') {
        cp = streetsArea.features
    } else {
        streetsArea.features.forEach(item => {
            if (item.properties.JDNAME === obj.name) {
                cp.push(item)
            }
        })
    }
    state.overlayLayer = window.L.geoJSON(cp, {
        color: obj.color,
        fillColor: obj.fillColor,
        weight: 1,
        opacity: 1,
        fillOpacity: 0.9,
    })
    state.overlayLayer.options.style = new window.SuperMap.ThemeStyle({
        shadowBlur: 16,
        shadowColor: 'black',
        fillColor: 'red',
        color: 'red',
    })
    state.map.addLayer(state.overlayLayer)
    // // 点击绘制图层触发,获取点击的镇
    // state.overlayLayer.on('click', (e) => {
    //   const objData = { value: e.layer.feature.properties.JDNAME }
    //   // console.log(objData, '所属镇区')
    //   window.eventBus.$emit('getArea', objData)
    // })
},
// 使用
window.eventBus.$emit('magnifyMap', {
    name: '全市',
    color: 'red',
    // 图层填充颜色
    fillColor: 'red',
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 9.移除地图所有打点

// 移除地图所有打点
removeMarke () {
  if (state.markers.length > 0) {
    state.markers.forEach(item => {
      if (state.markers.length > 3) {
        state.resultLayer.removeLayer(item)
      } else {
        item.remove()
      }
    })
    state.resultLayer = null
    state.markers = []
  }
},
// 使用
window.eventBus.$emit('removeMarke')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 10.打点并绑定弹框

 // 打点并绑定弹框
addMarke (
  obj = {
    points: [
      {
        type: '巡游车',
        latitude: '22.51270296284929',
        longitude: '113.42823031358421',
      },
    ],
    iconType: {
      巡游车: '/asserts-ecological-environment/common/mark-icon.png',
      其他车型: '/asserts-ecological-environment/common/mark-icon.png',
    },
    iconSize: [45, 45],
    PoupComponent: PoupMap, // 弹框文件名
  }
) {
  return new Promise((resolve, reject) => {
    // console.log(state.markers, '----------------')
    // 3个点不用聚合图层 3个点以上使用聚合图层
    if (state.markers.length < 4 && state.markers.length > 0) {
      state.markers.forEach(item => {
        item.remove()
      })
    }
    if (state.markers.length > 3) {
      state.markers.forEach(item => {
        state.resultLayer.removeLayer(item)
      })
    }
    state.markers = []
    if (!state.resultLayer) {
      state.resultLayer = state.L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        showCoverageOnHover: false, // 设置为true时显示聚类所占据的范围
        zoomToBoundsOnClick: true, // 设置为true时会向低一级聚类缩放
        disableClusteringAtZoom: 12 // 指定多少缩放层级不再聚合
      })
    }
    // eslint-disable-next-line no-unused-vars
    let component = null
    obj.points.map(item => {
      let objData = {}
      if (obj.PoupComponent) {
        objData = item
        const info = {
          component: {
            template: '<poup-map :data="objData" @close="closeCp" @tash="tash"></poup-map>',
            name: 'PoupMap',
            components: {
              'poup-map': obj.PoupComponent,
            },
            data () {
              return {
                objData,
              }
            },
            methods: {
              // 点击右上角关闭按钮，关闭弹框
              closeCp (e) {
                // console.log(222, e)
                // 关闭弹框
                marker.closePopup(component.$el)
              },
              tash () { },
            },
          },
        }
        // eslint-disable-next-line no-unused-vars
        var Content = null
        Content = Vue.extend(info.component)
        // shipin = Vue.extend(shipininfo.component)
      }

      if (obj.showTab === true && obj.PoupComponent) {
        objData = item
        const info = {
          component: {
            template: '<poup-map :data="objData"></poup-map>',
            name: 'PoupMap',
            components: {
              'poup-map': obj.PoupComponent,
            },
            data () {
              return {
                objData,
              }
            },
          },
        }
        // var Content = null
        Content = Vue.extend(info.component)
      }
      // 可加判断区分不同类型
      var icon
      if (item.content) {
        if (item.type === '一般监管企业' || item.type === '重点监管企业') {
          icon = state.L.divIcon({
            html: item.content, // marker标注
            className: obj.iconType[item.type],
            iconSize: [40, 48], // marker宽高
            iconAnchor: [0, 0], // 文字标注相对位置
            type: item.type,
          })
        } else {
          icon = state.L.divIcon({
            // 加入的数字内容
            html: item.content, // marker标注
            className: 'my-div-icon' + ' ' + obj.iconType[item.type],
            iconSize: [80, 80], // marker宽高
            iconAnchor: [0, 0], // 文字标注相对位置
            type: item.type,
          })
        }
      } else {
        icon = state.L.icon({
          iconUrl: obj.iconType[item.type],
          iconSize: obj.iconSize,
          type: item.type,
        })
      }
      const marker = state.L.marker([item.latitude, item.longitude], {
        icon: icon
      })
      // console.log(marker, 1111111)
      // 3个点不用聚合图层 3个点以上使用聚合图层
      if (obj.points.length < 4) {
        marker.addTo(state.map)
      } else {
        state.resultLayer.addLayer(marker)
      }
      marker.on('click', function (e) {
        if (obj.PoupComponent) {
          component = new Content().$mount()
          marker.unbindPopup().bindPopup(component.$el).openPopup()
        }
        window.eventBus.$emit('objData', objData)
      })
      state.markers.push(marker)
    })
    state.resultLayer.addTo(state.map)
  })
},
// 使用
import ManagementDialog from './widget/management-dialog.vue'
this.$http.zhongshanApi('hjxzgl_hjyj_yjwz', [{ field: '1', value: this.$refs.getValue.value }, { field: '1', value: '1' }]).then((res) => {
    if (!res.length) {
        return null
    }
    this.map = []
    res.datarow.forEach((item, index) => {
        this.map.push({
            type: '特大风险企业',
            latitude: item.zb.split(',')[1],
            longitude: item.zb.split(',')[0],
            id: item.id,
            items: item
        })
    })
    window.eventBus.$emit('addMarke', {
        points: this.map,
        iconType: {
            特大风险企业: '/asserts-ecological-environment/environmental-administration/jingshi1.png',
            较大风险企业: '/asserts-ecological-environment/environmental-administration/jingshi0.png'
        },
        iconSize: [45, 45],
        PoupComponent: ManagementDialog
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

# 11.设置图标与点位联动

// 设置图标与点位联动
setLinked (
  object = {
    operation: 'add',
    type: '巡游车',
  }
) {
  state.markers.forEach(item => {
    if (object.operation === 'add') {
      if (item.options.icon.options.type === object.type) {
        if (state.markers.length < 4) {
          item.addTo(state.map)
        } else {
          state.resultLayer.addLayer(item)
        }
      }
    }
    if (object.operation === 'remove') {
      if (item.options.icon.options.type === object.type) {
        if (state.markers.length < 4) {
          item.remove()
        } else {
          state.resultLayer.removeLayer(item)
        }
      }
    }
  })
  console.log(state.markers)
},
// 使用
// 控制点位的显示隐藏
showPoints (val) {
    const arr = ['涉气重点排污单位', '工地扬尘源', '重点餐饮油烟企业', '机动车尾气监测']
    arr.forEach(item => {
        if (val === item) {
            window.eventBus.$emit('setLinked', { type: item, operation: 'add' })
        } else {
            window.eventBus.$emit('setLinked', { type: item, operation: 'remove' })
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 12.画线

operaLine (
  obj = {
    name: 'line1', // 线唯一表标识
    operation: 'add',
    Array: [
      [22.51270296284929, 113.42843031358421],
      [22.51470296284929, 113.42823031358421],
      [22.51570296284929, 113.42853031358421],
      [22.51870296284929, 113.42823031358421],
      [22.51870296284929, 113.42883031358421],
    ],
    style: {
      dashLines: 18, // 虚线长度 不是虚线此属性为0
      color: 'yellow', // 线颜色
      weight: 6,
      opacity: 0.9,
    },
  }
) {
  // console.log(state, 111)
  if (obj.operation === 'add') {
    if (state.line[obj.name]) {
      state.line[obj.name].remove()
    }
    state.map.fitBounds(obj.Array)
    // console.log(state, 111)
    // state.line[obj.name] = state.L.polyline(obj.Array, { className: 'dashLines', color: obj.style.color, weight: obj.style.weight, opacity: obj.style.opacity })
    state.line[obj.name] = state.L.polyline(obj.Array, {
      dashArray: obj.style.dashLines ? obj.style.dashLines : 0,
      color: obj.style.color,
      weight: obj.style.weight,
      opacity: obj.style.opacity,
    })
    // liner.addTo(state.map).bindPopup('green to red')
    state.line[obj.name].addTo(state.map)
  }
  if (obj.operation === 'remove') {
    // 清楚时传name 清除指定 不传清所有
    if (obj.name) {
      state.line[obj.name].remove()
      delete state.line[obj.name]
    } else {
      for (var key of state.line) {
        state.line[key].remove()
      }
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 13.画圆

// 画圆
operaCircle (
  obj = {
    operation: 'add',
    radius: 2000,
    color: 'green',
    fillColor: '#f03',
    points: [
      [22.51270296284929, 113.42823031358421],
      [22.51470296284929, 113.42823031358421],
      [22.51570296284929, 113.42823031358421],
      [22.51870296284929, 113.42823031358421],
      [22.51870296284929, 113.42823031358421],
    ],
  }
) {
  if (obj.operation === 'add') {
    obj.points.forEach((item, index) => {
      state.circles[index] = state.L.circle(item, {
        color: obj.color,
        fillColor: obj.fillColor,
        fillOpacity: 0.5,
        radius: obj.radius, // 米
      }).addTo(state.map)
    })
  }
  if (obj.operation === 'remove') {
    state.circles.forEach(item => {
      item.remove()
    })
    state.circle = []
  }
  // state.map.addFeatures(pointlayer)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 14.风格图层

// 风格图层 一个具有不同颜色块的图层
operateThemeLayer (
  obj = {
    operation: 'add',
    points: [], // 数据格式参照下列请求返回
    themeField: 'POP_DENSITY99',
    styleGroups: [
      {
        start: 0,
        end: 0.02,
        style: {
          color: '#FDE2CA',
        },
      },
      {
        start: 0.02,
        end: 0.0,
        style: {
          color: '#FACE9C',
        },
      },
      {
        start: 0.04,
        end: 0.06,
        style: {
          color: '#F09C42',
        },
      },
      {
        start: 0.06,
        end: 0.1,
        style: {
          color: '#D0770B',
        },
      },
      {
        start: 0.1,
        end: 0.2,
        style: {
          color: '#945305',
        },
      },
    ],
  }
) {
  if (obj.operation === 'add') {
    if (state.themeLayer) {
      state.themeLayer.remove()
      state.themeLayer = null
    }
    state.themeLayer = state.L.supermap.rangeThemeLayer('ThemeLayer', {
      // 开启 hover 高亮效果
      isHoverAble: true,
      opacity: 0.8,
      alwaysMapCRS: true,
    })
    state.themeLayer.addTo(state.map)
    state.themeLayer.style = new window.SuperMap.ThemeStyle({
      shadowBlur: 16,
      shadowColor: '#000000',
      fillColor: '#FFFFFF',
    })
    state.themeLayer.highlightStyle = new window.SuperMap.ThemeStyle({
      stroke: true,
      strokeWidth: 4,
      strokeColor: 'blue',
      fillColor: '#00EEEE',
      fillOpacity: 0.8,
    })
    // 用于单值专题图的属性字段名称
    state.themeLayer.themeField = obj.themeField
    state.themeLayer.on('click', e => {
      var fea = state.themeLayer.getFeatureById(e.target.refDataID)
      console.log(fea, '3333')
    })
    // 风格数组，设定值对应的样式
    state.themeLayer.styleGroups = obj.styleGroups
    state.themeLayer.addFeatures(obj.points)
  }
  if (obj.operation === 'remove') {
    state.themeLayer.remove()
    state.themeLayer = null
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

# 15.回放历史轨迹操作

// 回放历史轨迹操作
hisroute (
  obj = {
    operation: 'add',
    icon: {
      iconUrl: '/asserts-traffic-operation/common/mark-icon.png',
      iconSize: [25.1, 25],
    },
    Array: [
      [22.51270296284929, 113.42823031358421],
      [22.51470296284929, 113.42823031358421],
      [22.51570296284929, 113.42823031358421],
      [22.51870296284929, 113.42823031358421],
      [22.51870296284929, 113.42823031358421],
    ],
    speed: 11000,
  }
) {
  if (state.Htrack) {
    state.Htrack.remove()
    state.Htrack = null
  }
  if (obj.operation === 'add') {
    state.map.fitBounds(obj.Array)
    var carIcon = state.L.icon({
      iconUrl: obj.icon.iconUrl,
      iconSize: obj.icon.iconSize,
    })
    state.Htrack = state.L.motion.polyline(
      obj.Array,
      {
        color: '#FF8055',
      },
      {
        auto: true,
        duration: obj.speed,
        easing: state.L.Motion.Ease.easeInOutQuart,
      },
      {
        removeOnEnd: false,
        icon: carIcon,
      }
    )
    state.Htrack.addTo(state.map)
  }
  if (obj.operation === 'remove') {
    state.Htrack.remove()
    state.Htrack = null
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 16.热力图

// 热力图
operateHeatLayer (
  obj = {
    operation: 'add',
    points: [
      ['22.6780696962', '113.421436143', 6],
      ['22.5681158848', '113.501375453', 6],
      ['22.5581107472', '113.484678449', 6],
      ['22.5587395802', '113.477080663', 6],
      ['22.5978174883', '113.177046715', 6],
    ],
  }
) {
  if (state.HeatLayer) {
    state.HeatLayer.remove()
    state.HeatLayer = null
  }
  if (obj.operation === 'add') {
    state.HeatLayer = window.L.heatLayer(obj.points, {
      radius: 15,
      minOpacity: 0.5,
    })
    state.HeatLayer.addTo(state.map)
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 17.圈地

// 圈地功能
paintLand (
  obj = {
    operation: 'add',
  }
) {
  if (obj.operation === 'add') {
    var options = {
      position: 'bottomleft', // 控件位置
      drawMarker: false, // marker绘制是否可选
      drawPolygon: true, // drawPolygon绘制是否可选
      drawPolyline: false, // drawPolyline绘制是否可选
      editPolygon: false, // editPolygon编辑是否可选
      deleteLayer: true, // 删除图层
      drawCircle: false, // 画圆
      drawCircleMarker: false, // 画圆标记
      drawRectangle: false, // 绘制矩形
      dragMode: false, // 移动图层
      cutPolygon: false, // 切割图层
    }
    state.map.pm.addControls(options)
    state.map.pm.setLang('zh')
    // state.map.on('pm:drawstart', this.drawStart)
    state.map.on('pm:drawstart', this.drawStart)
    state.map.on('pm:create', opt => {
      console.log(opt, opt.marker, 'opt.markerss')
      state.enclosureOption.push(opt.marker)
      if (opt.shape === 'Polygon') {
        // 多边形绘制完成后,显示弹框
        window.eventBus.$emit('drawEnd', { marker: opt.marker })
      } else if (opt.shape === 'Line') {
        console.log(222, 'Line')
        // this.getMeasureData(opt.marker, 'line').then(res => {
        //   // 测量距离的统计结果
        //   window.eventBus.$emit('measureDistance', res.result.distance.toFixed(2))
        // })
      }
    })
    // state.map.on('pm:create', this.getAreaInfo)
  }
  // 关闭圈地功能
  if (obj.operation === 'remove') {
    console.log(state.map.pm, 'removes')
    state.map.pm.removeControls()
  }
  // 添加捕捉绘制控件
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 18.飞线图

// 飞线图
flyLine (
  obj = {
    name: 'fly',
    link: [
      {
        from: '小榄镇',
        count: 354551,
        to: '东区',
      },
      {
        from: '横栏镇',
        count: 97323,
        to: '东区',
      },
    ],
    // 线配置
    lineOptions: {
      strokeStyle: 'rgba(255, 250, 50, 0.8)',
      shadowColor: 'rgba(255, 250, 50, 1)',
      shadowBlur: 20,
      lineWidth: 10,
    },
    // 点配置
    pointOptions: {
      fillStyle: 'rgba(254,175,3,0.7)',
      shadowColor: 'rgba(55, 50, 250, 0.5)',
      shadowBlur: 10,
      size: 10,
    },
    // 动画配置
    timeOptions: {
      fillStyle: 'rgba(255, 250, 250, 0.5)',
      size: 3.5,
    },
  }
) {
  state.flys[obj.name] = {}
  var geojsonDataSet = mapv.geojson.getDataSet(geojson)
  var qianxi = new mapv.DataSet(obj.link)
  var qianxiData = qianxi.get()
  var lineData = []
  var pointData = [] // 点数据
  var textData = [] // 文本数据
  var timeData = [] // 时间线数据
  var citys = {}
  var fromCenter = {}
  var toCenter = {}
  for (var i = 0; i < qianxiData.length; i++) {
    geojson.features.forEach(item => {
      if (item.properties.XZQMC === qianxiData[i].from) {
        fromCenter.lng = item.geometry.coordinates[0]
        fromCenter.lat = item.geometry.coordinates[1]
      }
      if (item.properties.XZQMC === qianxiData[i].to) {
        // console.log(toCenter, '----------------')
        toCenter.lng = item.geometry.coordinates[0]
        toCenter.lat = item.geometry.coordinates[1]
      }
    })
    if (!fromCenter || !toCenter) {
      continue
    }
    citys[qianxiData[i].from] = qianxiData[i].count
    citys[qianxiData[i].to] = 100
    pointData.push({
      geometry: {
        type: 'Point',
        coordinates: [fromCenter.lng, fromCenter.lat],
      },
    })
    pointData.push({
      geometry: {
        type: 'Point',
        coordinates: [toCenter.lng, toCenter.lat],
      },
    })
    textData.push({
      geometry: {
        type: 'Point',
        coordinates: [fromCenter.lng, fromCenter.lat],
      },
      text: qianxiData[i].from,
    })
    textData.push({
      geometry: {
        type: 'Point',
        coordinates: [toCenter.lng, toCenter.lat],
      },
      text: qianxiData[i].to,
    })
    var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]) // 线
    for (var j = 0; j < curve.length; j++) {
      timeData.push({
        geometry: {
          type: 'Point',
          coordinates: curve[j],
        },
        count: 1,
        time: j,
      })
    }
    // 构成了时间线
    lineData.push({
      geometry: {
        type: 'LineString',
        coordinates: curve,
        // coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
      },
      count: 30 * Math.random(),
    })
  }
  // 从json中取端点的点位信息
  var data = geojsonDataSet.get({
    filter: function (item) {
      if (!citys[item.name]) {
        return false
      }

      item.count = citys[item.name]
      return true
    },
  })
  geojsonDataSet = new mapv.DataSet(data)
  // L.supermap.mapVLayer(geojsonDataSet, geojsonOptions).addTo(map); /////地图面数据塞入leafleft
  var textDataSet = new mapv.DataSet(textData)

  var textOptions = {
    draw: 'text',
    font: '16px Arial',
    fillStyle: 'white',
    shadowColor: 'yellow',
    shadowBlue: 10,
    zIndex: 11,
    shadowBlur: 10,
  }
  state.flys[obj.name].flylText = state.L.supermap
    .mapVLayer(textDataSet, textOptions)
    .addTo(state.map) /// 文本数据塞入leafleft

  var lineDataSet = new mapv.DataSet(lineData)
  let bool = false
  var lineOptions = {
    strokeStyle: obj.lineOptions.strokeStyle,
    shadowColor: obj.lineOptions.shadowColor,
    shadowBlur: obj.lineOptions.shadowBlur,
    lineWidth: obj.lineOptions.lineWidth,
    zIndex: 100,
    draw: 'simple',
    methods: {
      click: function (item) {
        // console.log(item, 'sssssssssssss')
        if (item) {
          const obj = item.count
          state.flys[obj.name].flyLine.removeData(function (data) {
            if (data.count !== obj) {
              return true
            }
          })
          //  lineLayer.clearData()
          bool = true
        } else {
          if (bool) {
            state.flys[obj.name].flyLine.clearData()
            var lineDataSet2 = new mapv.DataSet(lineData)
            state.flys[obj.name].flyLine.addData(lineDataSet2, lineOptions)
          }
        }
        // console.log(item,'sssssssssssss') // 只针对移动端,点击事件
      },
    },
  }
  state.flys[obj.name].flyLine = state.L.supermap
    .mapVLayer(lineDataSet, lineOptions)
    .addTo(state.map) /// 线数据塞入leafleft
  var pointOptions = {
    fillStyle: obj.pointOptions.fillStyle,
    shadowColor: obj.pointOptions.shadowColor,
    shadowBlur: obj.pointOptions.shadowBlur,
    size: obj.pointOptions.size,
    zIndex: 10,
    draw: 'simple',
  }
  var pointDataSet = new mapv.DataSet(pointData)
  state.flys[obj.name].flyPoint = state.L.supermap.mapVLayer(pointDataSet, pointOptions)
  state.flys[obj.name].flyPoint.addTo(state.map) // 端点数据塞入leafleft
  var timeDataSet = new mapv.DataSet(timeData)
  var timeOptions = {
    fillStyle: obj.timeOptions.fillStyle,
    zIndex: 200,
    size: obj.timeOptions.size,
    animation: {
      type: 'time', // 按时间展示动画
      stepsRange: {
        // 动画时间范围,time字段中值
        start: 0,
        end: 50,
      },
      trails: 10, // 时间动画的拖尾大小
      duration: 2, // 单个动画的时间，单位秒
    },
    draw: 'simple', // 最直接的方式绘制点线面
  }
  state.flys[obj.name].flylTime = state.L.supermap
    .mapVLayer(timeDataSet, timeOptions)
    .addTo(state.map) // 第一个参数MapV图层数据集,第二个参数MapV 图层参数
  // 发光线图层塞入leafleft--发光线的实现本质是一组依次闪烁的点组成的
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

# 19.移除飞线图

// 移除飞线图
removeflyLine (name) {
  state.flys[name].flyLine.clearData()
  state.flys[name].flyLine = null
  state.flys[name].flylTime.clearData()
  state.flys[name].flylTime = null
  state.flys[name].flyPoint.clearData()
  state.flys[name].flyPoint = null
  state.flys[name].flylText.clearData()
  state.flys[name].flylText = null
},
1
2
3
4
5
6
7
8
9
10
11

# 20.切换图层

// 切换底图
cutBaseMap (name) {
  state.baseLayer.remove()
  if (name === '矢量') {
    state.baseLayer = state.L.supermap.tiledMapLayer(ioUrl1, { transparent: true })
    state.baseLayer.addTo(state.map)
  }
  if (name === '遥感') {
    state.baseLayer = state.L.supermap.tiledMapLayer(ioUrl, { transparent: true })
    state.baseLayer.addTo(state.map)
  }
},
1
2
3
4
5
6
7
8
9
10
11
12

源码系列