m-vue-map v0.0.10

Vue3 离线地图组件

使用

import { createApp } from 'vue';
import App from './App.vue';
import MVueMap from 'm-vue-map';

createApp(App).use(MVueMap, 'http://{z}/{x}/{y}/x={x}&y={y}&z={z}.png').mount('#app');

<m-vue-map ref="mapRef" @resize="resize" />

import { ref, onMounted } from 'vue';

const mapRef = ref();

onMounted(() => {
    console.log(mapRef.value); // { mMap, mTile, ... } mMap：Map实例对象，mTile：TileLayer实例对象
    mapRef.value.mMap.addMarker([39.885266, 116.416629], { icon: mapRef.value.icon({ iconUrl:'图片', iconSize: [10, 10] }) }); //添加标注图标
});

//尺寸改变事件
const resize = () => {
    mapRef.value.mMap.invalidateSize(true);
};

属性

width: { type: [Number, String], default: '100%' }, //地图宽度
height: { type: [Number, String], default: '100%' }, //地图高度
options: { type: Object, default: () => ({ center: [36, 110], zoom: 5, minZoom: 3, maxZoom: 10, attributionControl: false }) }, // 地图配置
tileUrl: { type: String, default: '' }, //瓦片地址
tileOptions: { type: Object, default: () => ({}) } // 瓦片配置

mMap方法

addMarker(latlng: LatLngExpression, options?: MarkerOptions); // 添加标注
addPopup(latlng: LatLngExpression, options?: TooltipOptions); // 添加弹出层
addTooltip(latlng: LatLngExpression, options?: TooltipOptions); // 添加提示
addImageOverlay(imageUrl: string, bounds: LatLngBoundsExpression, options?: ImageOverlayOptions); // 添加图片
addVideoOverlay(video: string | string[] | HTMLVideoElement, bounds: LatLngBoundsExpression, options?: VideoOverlayOptions); // 添加视频
addSvgOverlay(svgImage: string | SVGElement, bounds: LatLngBoundsExpression, options?: ImageOverlayOptions); // 添加SVG
addPolyline(latlngs: LatLngExpression[] | LatLngExpression[][], options?: PolylineOptions); // 添加折线
addPolygon(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions); // 添加多边形
addRectangle(latLngBounds: LatLngBoundsExpression, options?: PolylineOptions); // 添加长方形
addCircle(latlng: LatLngExpression, options?: CircleOptions); // 添加圆形
addGroup(layers: Layer[], options?: LayerOptions); // 添加到组
addLayerGroup(layer: Layer, layers: Layer[], options?: LayerOptions); // 添加到层组

其他属性、方法、事件

文档地址：https://leafletjs.com/reference.html