海量折线

<hcm-amap-multipolyline>

简介

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

属性

属性名 类型 默认值 必选 支持iOS 支持Android 说明
points ObjectArray - N Y Y 见下文解释
points2 Object - N Y Y 见下文解释
strokeColor String #4087fd N Y Y 线的颜色
selectedStrokeColor String #ff0000 N Y Y 被选中后线的颜色
lineWidth Double 2.0 N Y Y 线的宽度
lineDashType Int 0 N Y Y 虚线类型
lineCapType Int 0 N Y Y 线头类型
selectable Bool true N Y Y 是否可被选中

strokeColor

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

selectedStrokeColor

选中后线条颜色，其格式目前只能为#RRGGBBAA或者#RRGGBB

lineDashType

虚线样式，其值为一下其中值的一个:

  • 0 -- 不画虚线，默认
  • 1 -- 方块样式的虚线
  • 2 -- 圆点样式的虚线

lineCapType

线头类型，其值为一下其中值的一个:

  • 0 -- 普通头，默认
  • 1 -- 扩展头
  • 2 -- 箭头
  • 3 -- 圆形头

事件

事件名 支持iOS 支持Android 说明
selected Y Y 线被选中
deselected Y Y 线取消选中
onSearchPolylineLine Y Y 点击地图后触发，会返回点击点附近的海量点数据信息

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

配置海量线数据的方式，我们提供了两种方法：

  1. 直接赋值给属性points，其中points要求是一个对象数组，其其中的对象属性可配置：

    • weight: 权重，可选配置，Int，默认：1

    • points: 构成折线的数据，类型为对象数组，数组里是坐标点对象，坐标点对象，其属性必须包含以下两项：

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

    • strokeColor: 折线颜色，可选配置，String，默认：#4087fd

    • selectedStrokeColor: 折线选中后颜色，可选配置，String，默认：#ff0000

    • lineWidth: 折线宽度，可选配置，Double，默认：2.0

    • lineDashType: 虚线类型，可选配置，Int，默认：0

    • lineCapType: 线头类型，可选配置，Int，默认：0

    • selectable: 是否可被选中，可选配置，Bool，默认：true

  2. 在使用第一种方法时，需要前端对数据进行按要求的处理，在数据量超过一定量后，这样的处理需要耗费一定的时间且还可能造成手机内存的暴增。另外，一般像这种坐标点的数据都是固定的，可以让手机缓存下来，不必每次都去更新。于是我们推出了第二种配置数据的方式：从数据库表中配置海量线数据，这种方式需要搭配数据库插件一起使用，所以在使用该方法之前请确保APP已安装数据库插件。points2即标记着从数据库表中配置海量线数据，其值为一个对象，可支持配置以下属性：

    • tableName:数据库表表名，必选配置，String

    • points: 自定义转换关系，可选配置，Object。对存储到数据库中的数据我们要求还是如第一种方式一样的配置格式，但考虑到其麻烦性，我们提供了该字段，进行数据库表中的字段到指定字段的转换。具体的使用方法可参考示例2

        {
      "weight": "数据库表中代表该字段的表字段名",
      "points": "数据库表中代表该字段的表字段名",
      "strokeColor": "数据库表中代表该字段的表字段名",
      "selectedStrokeColor": "数据库表中代表该字段的表字段名",
      "lineWidth": "数据库表中代表该字段的表字段名",
      "lineDashType": "数据库表中代表该字段的表字段名",
      "lineCapType": "数据库表中代表该字段的表字段名",
      "selectable": "数据库表中代表该字段的表字段名"
  }

示例1

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
      <hcm-amap-multipolyline class="map-polyline"
                              v-for="(line, idx) in lines"
                              :key="idx"
                              :points="line.list"
                              :strokeColor="line.color"
                              @onSearchPolylineLine="searchNearby"
                              @selected="selectedPoint"
                              @deselected="deselectedPoint">
      </hcm-amap-multipolyline>
    </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
        }
      },
      lines: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    close () {
      amap.close()
    },
    fetchData () {
      const me = this
      stream.fetch({
        method: 'GET',
        url: 'http://yd-mobile.cn/www/line.json',
        type: 'json',
        timeout: 10000
      }, function (res) {
        if (res.ok) {
          for (let i = 0; i < parseInt(res.data.length / 10000); i++) {
            let line = {
              color: me.randomColor(),
              list: res.data.slice(i * 10000, (i + 1) * 10000 - 1)
            }
            me.lines.push(line)
          }
        } 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.alert({
        message:
          'selecteded line' + JSON.stringify(e),
        duration: 1.0
      })
    },
    deselectedPoint (e) {
      console.log('delecteded line' + JSON.stringify(e.data))
    },
    searchNearby (e) {
      modal.toast({
        message:
          'searchNearby' + 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>

示例2

<template>
  <div class="wrapper">
    <hcm-amap class="map"
              :zoomLevel="map.zoomLevel"
              :showScale="map.showScale"
              :center="map.center"
              :showPositioning="map.showPositioning"
              :showUserLocation="true">
      <hcm-amap-multipolyline class="map-polyline"
                              :points2="point"
                              @onSearchPolylineLine="searchNearby"
                              @selected="selectedPoint"
                              @deselected="deselectedPoint"
                              v-if="show"
                              >
      </hcm-amap-multipolyline>
    </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')
const storage = weex.requireModule('amap-storage')

export default {
  data () {
    return {
      map: {
        zoomLevel: 16,
        showScale: false,
        showPositioning: true,
        showUserLocation: false,
        center: {
          latitude: 30.238753,
          longitude: 120.145336
        }
      },
      lines: [],
      point: {
        tableName: 'map_lines',
        points: {
          weight: 'weight'
        }
      },
      show: false
    }
  },
  mounted () {
    this.createTable()
  },
  methods: {
    close () {
      amap.close()
    },
    createTable () {
      // 创建数据库表
      const me = this
      const sql = 'CREATE TABLE IF NOT EXISTS ' + this.point.tableName + ' (id integer PRIMARY KEY AUTOINCREMENT, points text NOT NULL, weight integer NOT NULL);'
      storage.execSQL(sql, function (res) {
        if (res.success) {
          me.queryData()
        } else {
          modal.toast({
            message: JSON.stringify(res.message)
          })
        }
      })
    },
    queryData () {
      // 查询表中是否有数据
      const sql = 'SELECT count(*) FROM ' + this.point.tableName
      const me = this
      storage.rawQuery(sql, function (res) {
        if (res.data === null) {
          me.fetchData()
        } else {
          const count = res.data[0]['count(*)']
          if (count === 0) {
            me.fetchData()
          } else {
            // 有数据，触发数据更新
            me.show = true
          }
        }
      })
    },
    storageData (data) {
      const me = this
      storage.loadFromJson(data, this.point.tableName, ['points', 'weight'], function (res) {
        if (res.success) {
          me.show = true
        } else {
          modal.toast({
            message: JSON.stringify(res.message)
          })
        }
      })
    },
    fetchData () {
      const me = this
      stream.fetch({
        method: 'GET',
        url: 'http://yd-mobile.cn/www/line.json',
        timeout: 10000
      }, function (res) {
        if (res.ok) {
          me.storageData(res.data)
        } else {
          modal.alert({
            message: res.statusText
          })
        }
      })
    },
    selectedPoint (e) {
      modal.toast({
        message:
          'selecteded line' + JSON.stringify(e.data),
        duration: 1.0
      })
    },
    deselectedPoint (e) {
      console.log('delecteded line' + JSON.stringify(e.data))
    },
    searchNearby (e) {
      modal.toast({
        message:
          'searchNearby' + 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>

results matching ""

    No results matching ""