Leaflet入门,Leaflet加载xyz地图,以vue-leaflet插件加载高德地图为例

前言

本章介绍Leaflet使用vue2-leaflet或者vue-leaflet插件方式便捷加载xyz高德地图。
Leaflet入门,Leaflet加载xyz地图,以vue-leaflet插件加载高德地图为例_第1张图片# 效果演示
Leaflet入门,Leaflet加载xyz地图,以vue-leaflet插件加载高德地图为例_第2张图片

vue如何使用Leaflet

  1. vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图,以及初始化后拿到leaflet对象,方便调用leaflet的api》

  2. vue3如何使用:《Leaflet入门,如何使用vue-leaflet实现vue3双向绑定式的使用Leaflet地图》
    vue2和vue3使用leaflet的区别只在于初始化变量时data和setup方式的区别,因此文章中所有代码只使用vue2方式进行展现,vue3需要读者手动迁移到setup方式。

实现功能

  1. 加载xyz高德地图

api说明

  1. l-map组件用于创建地图容器

你可能感兴趣的:(Leaflet入门,vue.js,前端,javascript,xyz地图加载,xyz瓦片加载,高德地图加载,leaflet加载地图)