圆形

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

基础示例

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-circle
      ref="circleRef"
      :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';

export default defineComponent({
  name: 'CircleDemo',
  setup() {
    const mapRef = ref(null);
    const circleRef = ref(null);
    const center = ref({ lat: 39.91799, lng: 116.397027 });
    const zoom = ref(15);

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、窗口实例，调用地图实例、窗口实例方法
      console.log(mapRef.value.map);
      console.log(circleRef.value.circle);
    };

    const getLayerInstance = () => {
      // 可以获取窗口实例，调用窗口实例方法
      console.log(circleRef.value.circle);
    };
    const onClick = (e: Event) => {
      console.log(e);
    };
    return {
      center,
      zoom,
      onClick,
      onMapInited,
      getLayerInstance,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      circleRef,
      geometries: [
        { styleId: 'circle', radius: 500,  center: { lat: 39.91799, lng: 116.397027 } },
      ],
      styles: {
        circle: {
          color: 'rgba(41,91,255,0.16)',
          showBorder: true,
          borderColor: 'rgba(41,91,255,1)',
          borderWidth: 2,
        },
      },
      options: {
        zIndex: 1,
      },
    };
  },
});
</script>

props

名称	类型	说明
id	`String`	图层 id，参考官网文档
styles	`{ [key: string]: TMap.MultiCircleStyleHash }`	圆形的相关样式，参考官网文档
geometries	`TMap.CircleGeometry[]`	圆形数据数组，参考官网文档
options	`TMap.MultiCircleOptions`	除了上述属性的其他配置参数，参考TMap.MultiCircleOptions

TMap.MultiCircleOptions

属性名称	类型	说明
zIndex	Number	图层绘制顺序

事件

名称	参数	说明
click	GeometryOverlayEvent	点击事件
dblclick	GeometryOverlayEvent	双击事件
mousedown	GeometryOverlayEvent	鼠标在地图区域中左键按下时触发，只在桌面浏览器中触发
mouseup	GeometryOverlayEvent	鼠标在地图区域中左键按下又弹起时触发，只在桌面浏览器中触发
mousemove	GeometryOverlayEvent	鼠标在地图上移动时触发，只在桌面浏览器中触发
hover	GeometryOverlayEvent	鼠标在图层上悬停对象改变时触发，事件对象中的geometry属性会指向交互位置所在图形的CircleGeometry，无图形时事件对象为null,只在桌面浏览器中触发
touchstart	GeometryOverlayEvent	在地图区域触摸开始时触发，只在移动浏览器中触发
touchmove	GeometryOverlayEvent	在地图区域触摸移动时触发，只在移动浏览器中触发
touchend	GeometryOverlayEvent	在地图区域触摸结束时触发，只在移动浏览器中触发

组件实例属性

名称	类型	说明
circle	`TMap.MultiCircle`	圆形实例。实例方法参考TMap.MultiCircle方法

TMap.MultiCircle方法

方法	返回值	说明
setMap(map:Map)	this	设置地图对象，如果map为null意味着将多圆同时从地图中移除
setZIndex(zIndex: Number)	this	设置图层绘制顺序
setGeometries(geometries:CircleGeometry[])	this	更新多圆数据，如果参数为null或undefined不会做任何处理
setStyles(styles:MultiCircleStyleHash)	this	设置MultiCircle图层相关样式信息，如果参数为null或undefined不会做任何处理
setVisible(visible: Boolean)	this	设置图层是否可见。
getMap()	Map	获取地图对象，若为空返回null
getGeometries()	CircleGeometry[]	获取多圆数据
getStyles()	MultiCircleStyleHash	获取图层相关样式信息
getVisible()	visible	获取可见状态
getZIndex()	Number	获取图层绘制顺序
getGeometryById(id:String)	CircleGeometry	根据多圆数据id来获取点数据
updateGeometries(geometry: CircleGeometry[])	this	更新多圆数据，如果geometry的id存在于集合中，会更新对id的数据，如果之前不存在于集合中，会作为新的圆添加到集合中；如果参数为null或undefined不会做任何处理
add(geometries: CircleGeometry[])	this	向图层中添加圆，如果geometry的id已经存在集合中，则该geometry不会被重复添加，如果geometry没有id或者id不存在于集合中会被添加到集合，没有id的geometry会被赋予一个唯一id；如果要添加到集合中的多边形存在重复id，这些多边形会被重新分配id；如果参数为null或undefined不会做任何处理
remove(ids: String[])	this	移除指定id的圆，如果参数为null或undefined不会做任何处理
destroy()		销毁图层对象

圆形 ​

基础示例 ​

props ​

TMap.MultiCircleOptions ​

事件 ​

组件实例属性 ​

TMap.MultiCircle方法 ​

圆形

基础示例

props

TMap.MultiCircleOptions

事件

组件实例属性

TMap.MultiCircle方法