海量点

<hcm-amap-multipoint>

简介

<hcm-amap-multipoint>组件用于在地图上绘制海量点坐标图层，<hcm-amap-multipoint>组件必须以子组件的形式存在于<hcm-amap>中，<hcm-amap-multipoint>不支持子组件

属性

positionList

海量点数据坐标数组，数组里是坐标点对象，坐标点对象，其属性必须包含以下两项：

• latitude (浮点型 / 必选) -- 高德坐标系下坐标点的纬度
• longitude (浮点型 / 必选) -- 高德坐标系下坐标点的经度

pointColor

点颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

icon

海量点图标URL，支持base64的图片

事件

事件返回的数据对象为positionList数组中与之相对应的数据

示例

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
      <hcm-amap-multipoint class="map-point"
                              v-for="(point, idx) in points"
                              :key="idx"
                              :positionList="point.positionList"
                              :pointColor="point.pointColor"
                              @selected="selectedPoint"
                              @deselected="deselectedPoint">
      </hcm-amap-multipoint>
    </hcm-amap>
    <text class="close" @click="close">关闭</text>
  </div>
</template>

<script>
const modal = weex.requireModule('modal')
const amap = weex.requireModule('amap')
const stream = weex.requireModule('stream')
export default {
  data () {
    return {
      map: {
        zoomLevel: 16,
        showScale: false,
        showPositioning: true,
        showUserLocation: false,
        center: {
          latitude: 30.238753,
          longitude: 120.145336
        }
      },
      points: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    close () {
      amap.close()
    },
    fetchData () {
      const me = this
      stream.fetch({
        method: 'GET',
        url: 'http://yd-mobile.cn/www/points.json',
        type: 'json',
        timeout: 10000
      }, function (res) {
        if (res.ok) {
          for (let i = 0; i < parseInt(res.data.length / 10000); i++) {
            let point = {
              pointColor: me.randomColor(),
              positionList: res.data.slice(i * 10000, (i + 1) * 10000 - 1)
            }
            me.points.push(point)
          }
        } else {
          modal.alert({
            message: res.statusText
          })
        }
      })
    },
    randomColor () {
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      var color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
      return color
    },
    selectedPoint (e) {
      modal.toast({
        message:
          'selecteded line' + JSON.stringify(e.data),
        duration: 1.0
      })
    },
    deselectedPoint (e) {
      modal.toast({
        message:
          'delecteded line' + JSON.stringify(e.data),
        duration: 1.0
      })
    }
  }
}
</script>
<style scoped>
.wrapper {
  flex: 1;
}
.map {
  flex: 1;
}
.close {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 88px;
  height: 88px;
  background-color: white;
  text-align: center;
  line-height: 88px;
  font-size: 30px;
  border-radius: 44px;
}
</style>