腾讯位置服务地图组件库

Appearance

折线 ​

地图折线组件，表示地图上的多个折线，可以自定义每个折线的样式。

基础示例 ​

vue
<template>
  <tlbs-map
    ref="mapRef"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
    @map_inited="onMapInited"
  >
    <tlbs-multi-polyline
      ref="polylineRef"
      :geometries="geometries"
      :styles="styles"
      :options="options"
    />
    <div class="control-container">
      <button @click.stop="getLayerInstance">
        打印折线实例
      </button>
    </div>
  </tlbs-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue-demi';
// 普通折线路径
const paths = [
  { lat: 40.041117253378246, lng: 116.2722415837743 },
  { lat: 40.03942536171407, lng: 116.2726277820093 },
  { lat: 40.03970460886076, lng: 116.27483769345417 },
  { lat: 40.041404706498625, lng: 116.27443003983899 },
];

// 彩虹折线路径
const rainbowPaths = [
  {
    path: [
      { lat: 40.03819372750479, lng: 116.26842823488005 },
      { lat: 40.03850574866959, lng: 116.27198887995291 },
      { lat: 40.038932722719686, lng: 116.27529212938498 },
    ],
    color: '#ED273D',
    borderColor: '#9C1C2A',
  },
  {
    path: [
      { lat: 40.038932722719686, lng: 116.27529212938498 },
      { lat: 40.039540301341184, lng: 116.27835947187123 },
    ],
    color: '#2C68FF',
    borderColor: '#004EE1',
  },
];

export default defineComponent({
  name: 'PolylineDemo',
  setup() {
    const mapRef = ref(null);
    const polylineRef = ref(null);
    const center = ref({ lat: 40.040452, lng: 116.273486 });
    const zoom = ref(16);
    const onClick = (e: Event) => {
      console.log(e);
    };
    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、折线实例，调用地图实例、折线实例方法
      console.log(mapRef.value.map);
      console.log(polylineRef.value.polyline);
    };

    const getLayerInstance = () => {
      // 可以获取折线实例，调用折线实例方法
      console.log(polylineRef.value.polyline);
    };
    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      polylineRef,
      geometries: [
        // 普通折线
        {
          id: 'polyline1',
          styleId: 'polyline',
          paths,
          properties: {
            title: 'polyline',
          },
        },
        // 彩虹折线
        {
          id: 'polyline2',
          styleId: 'polyline',
          rainbowPaths,
          properties: {
            title: 'polyline',
          },
        },
      ],
      styles: {
        polyline: {
          color: '#2C68FF', // 线填充色
          borderWidth: 2, // 边线宽度
          borderColor: '#004EE1', // 边线颜色
        },
      },
      options: {
        zIndex: 1,
      },
      onMapInited,
      getLayerInstance,
    };
  },
});
</script>

props ​

名称类型说明
idString图层 id
styles{ [key: string]: TMap.MultiPolylineStyleHash }折线的相关样式
geometriesTMap.PolylineGeometry[]折线数据数组
optionsTMap.MultiPolylineOptions除了上述属性的其他配置参数，参考TMap.MultiPolylineOptions

TMap.MultiPolylineOptions ​

属性名称类型说明
disableInteractiveBoolean图层是否禁止参与交互事件，默认为false
isStopPropagationBoolean是否阻止鼠标、触摸事件冒泡，默认为false

事件 ​

名称参数说明
clickGeometryOverlayEvent点击事件。
dblclickGeometryOverlayEvent双击事件。
rightclickGeometryOverlayEvent右键点击事件。
mousedownGeometryOverlayEvent鼠标在地图区域中左键按下时触发，只在桌面浏览器中触发。
mouseupGeometryOverlayEvent鼠标在地图区域中左键按下又弹起时触发，只在桌面浏览器中触发。
mousemoveGeometryOverlayEvent鼠标在地图上移动时触发，只在桌面浏览器中触发。
mouseoverGeometryOverlayEvent鼠标在移动到折线图层上时触发，只在桌面浏览器中触发。
mouseoutGeometryOverlayEvent鼠标移出折线图层时触发，只在桌面浏览器中触发。
hoverGeometryOverlayEvent鼠标在图层上悬停对象改变时触发，事件对象中的geometry属性会指向交互位置所在图形的PolylineGeometry，无图形时事件对象为null,只在桌面浏览器中触发。
touchstartGeometryOverlayEvent在地图区域触摸开始时触发，只在移动浏览器中触发。
touchmoveGeometryOverlayEvent在地图区域触摸移动时触发，只在移动浏览器中触发。
touchendGeometryOverlayEvent在地图区域触摸结束时触发，只在移动浏览器中触发。

组件实例属性 ​

名称类型说明
polylineTMap.MultiPolyline折线实例。实例方法TMap.MultiPolyline方法

TMap.MultiPolyline方法 ​

方法返回值说明
setMap(map:Map)this设置地图对象，如果map为null意味着将多折线同时从地图中移除。
setZIndex(zIndex: Number)this设置图层绘制顺序。
setGeometries(geometries: PolylineGeometry[])this更新折线数据，如果参数为null或undefined不会做任何处理。
setStyles(styles:MultiPolylineStyleHash)this设置MultiPolyline图层相关样式信息，如果参数为null或undefined不会做任何处理。
setVisible(visible: Boolean)this设置图层是否可见。
getMap()Map获取地图对象，若为空返回null。
getGeometries()PolylineGeometry[]获取折线数据。
getStyles()MultiPolylineStyleHash获取图层相关样式信息。
getVisible()visible获取可见状态。
getZIndex()Number获取图层绘制顺序。
getGeometryById(id:String)PolylineGeometry根据折线数据id来获取点数据。
updateGeometries(geometry: PolylineGeometry[])this更新折线数据，如果geometry的id存在于集合中，会更新对应id的数据，如果之前不存在于集合中，会作为新的折线添加到集合中；如果参数为null或undefined不会做任何处理。
add(geometries: PolylineGeometry[])this向图层中添加折线，如果geometry的id已经存在集合中，则该geometry不会被重复添加，如果geometry没有id或者id不存在于集合中会被添加到集合，没有id的geometry会被赋予一个唯一id；如果要添加到集合中的折线存在重复id，这些折线会被重新分配id；如果参数为null或undefined不会做任何处理。
remove(ids: String[])this移除指定id的折线，如果参数为null或undefined不会做任何处理。
on(eventName:String, listener:Function)this添加listener到eventName事件的监听器数组中。
off(eventName:String, listener:Function)this从eventName事件的监听器数组中移除指定的listener。
destroy()销毁图层对象。
eraseTo(id: String, index: Number, point:LatLng)用于线的擦除。第一个参数id 表示指定geometry的ID，擦除效果仅对该id对应的路线有效。
第二个参数index表示要擦除到的坐标索引 index 。
第三个参数指线段 （坐标索引为[ index -1 , index ] ）上擦除点的经纬度坐标（ 如果这个坐标不在擦除的索引范围内，会一直擦除到坐标索引为index的点 ）。只支持简单折线。查看示例