腾讯位置服务地图组件库

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-polygon
      ref="polygonRef"
      :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 },
];

export default defineComponent({
  name: 'PolygonDemo',
  setup() {
    const mapRef = ref(null);
    const polygonRef = 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(polygonRef.value.polygon);
    };

    const getLayerInstance = () => {
      // 可以获取多边形实例，调用多边形实例方法
      console.log(polygonRef.value.polygon);
    };
    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      polygonRef,
      geometries: [
        {
          id: 'polygon', // 多边形图形数据的标志信息
          styleId: 'polygon', // 样式id
          paths, // 多边形的位置信息
          properties: {
            // 多边形的属性数据
            title: 'polygon',
          },
        },
      ],
      styles: {
        polygon: {
          color: '#3777FF', // 面填充色
          showBorder: false, // 是否显示拔起面的边线
          borderColor: '#00FFFF', // 边线颜色
        },
      },
      options: {
        zIndex: 1,
      },
      onMapInited,
      getLayerInstance,
    };
  },
});
</script>

props ​

名称类型说明
idString图层 id
styles{ [key: string]: TMap.MultiPolygonStyleHash }多边形的相关样式
geometriesTMap.PolygonGeometry[]多边形数据数组
optionsTMap.MultiPolygonOptions除了上述属性的其他配置参数，参考TMap.MultiPolygonOptions

TMap.MultiPolygonOptions ​

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

事件 ​

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

组件实例属性 ​

名称类型说明
polygonTMap.MultiPolygon多边形实例。实例方法TMap.MultiPolygon方法

TMap.MultiPolygon方法 ​

方法返回值说明
setMap(map:Map)this设置地图对象，如果map为null意味着将多边形同时从地图中移除。
setZIndex(zIndex: Number)this设置图层绘制顺序。
setGeometries(geometries: PolygonGeometry[])this更新多边形数据，如果参数为null或undefined不会做任何处理。
setStyles(styles:MultiPolygonStyleHash)this设置MultiPolygon图层相关样式信息，如果参数为null或undefined不会做任何处理。
setVisible(visible: Boolean)this设置图层是否可见。
getMap()Map获取地图对象，若为空返回null。
getGeometries()PolygonGeometry[]获取多边形数据。
getStyles()MultiPolygonStyleHash获取图层相关样式信息。
getVisible()visible获取可见状态。
getZIndex()Number获取图层绘制顺序。
getGeometryById(id:String)PolygonGeometry根据多边形数据id来获取点数据。
updateGeometries(geometry:PolygonGeometry[])this更新多边形数据，如果geometry的id存在于集合中，会更新对id的数据，如果之前不存在于集合中，会作为新的多边形添加到集合中；如果参数为null或undefined不会做任何处理。
add(geometries: PolygonGeometry[])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()销毁图层对象