范围图层（多圆点）

demo

<template>
	<v-map class="home">
		<v-range-circle
			ref="circle"
			:visible="show"
			:geo-data="jsonData"
			:option="option" />
		<div
			style="
				width: 200px;
				height: 200px;
				background-color: aqua;
				position: absolute;
				z-index: 999;
			"
			@click="clusterClick">
			标点数据： {{data}} 切换
		</div>
	</v-map>
</template>

<script>
	import {VMap, VRangeCircle} from 'v-minemap'
	export default {
		components: {VMap, VRangeCircle},
		data() {
			return {
				show: false,
				data: {},
				option: {
					paint: [
						{
							'radius': 35,
							'color': '#cc32f2',
							'opacity': 0.8
						},
						{
							'radius': 25,
							'color': '#31fd31',
							'opacity': 0.8
						},
						{
							'radius': 10,
							'color': '#ff0000',
							'opacity': 0.8
						}
					],
					sourceName: 'pointSource'
				},
				jsonData: {
					'type': 'FeatureCollection',
					'features': [
						{
							'type': 'Feature',
							'geometry': {
								'type': 'Point',
								'coordinates': [113.02447, 23.06947]
							},
							'properties': {
								'title': '大学',
								'kind': 'school'
							}
						}
					]
				}
			}
		},
		mounted() {},
		methods: {
			clusterClick() {
				this.$refs.circle.initCircle(this.jsonData)
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100%;
	}
</style>

配置项

props	类型	描述
visible	Boolean	是否可见
option	Object	额外配置项，见下方详细
extData	Object	额外信息
geoData	Object|Array	坐标数据，对象则为标准坐标数据，数组则为接口数据，详细见下方geoData
transform	String	坐标转换，可选（bd09togcj02，gcj02tobd09，wgs84togcj02，gcj02towgs84）

option

props	类型	描述
sourceName	String	图层数据源名称
paint	Array	图层绘制样式，多个元素则多个图层，最靠前则在最底层
minzoom	String	图层的最小缩放等级（0-24）
maxzoom	String	图层的最大缩放等级（0-24）
beforeId	String	坐标转换，可选（bd09togcj02，gcj02tobd09，wgs84togcj02，gcj02towgs84）
lngName	String	当geoData为接口数据而不是标准geoJson格式时，经度对应的字段名称
latName	String	当geoData为接口数据而不是标准geoJson格式时，纬度对应的字段名称

geoData

// 标准数据格式
{
	'type': 'FeatureCollection',
	'features': [
		{
			'type': 'Feature',
			'geometry': {
				'type': 'Point',
				'coordinates': [113.12447, 23.16947]
			},
			'properties': { // 额外信息
				'title': '大学',
				'kind': 'school'
			}
		}
	]
},
// 接口数据格式
[
    {
        id:1,
        name:'xxx',
        lon:113.12447,
        lat:23.16947,
        ...
    },
    {
        id:2,
        name:'xxx',
        lon:113.22447,
        lat:23.26947,
        ...
    }
]
// 会将接口数据格式化生成标准数据格式
{
	'type': 'FeatureCollection',
	'features': [
		{
			'type': 'Feature',
			'geometry': {
				'type': 'Point',
				'coordinates': [113.12447, 23.16947]
			},
			'properties': { // 额外信息
				id:1,
        		name:'xxx',
        		lon:113.12447,
        		lat:23.16947,
                ...
			}
		},
        {
			'type': 'Feature',
			'geometry': {
				'type': 'Point',
				'coordinates': [113.12447, 23.16947]
			},
			'properties': { // 额外信息
				id:2,
        		name:'xxx',
        		lon:113.22447,
        		lat:23.26947,
                ...
			}
		}
	]
},