【Vue@Leaflet】创建TileLayer组件

参考：https://leafletjs.com/reference-1.6.0.html

这是vue@leaflet基础开发的最后一篇文章了，加上以前对leaflet api使用的文章， 就可以实现webgis的基本开发了，【vue@leaflet】的四篇文章主要是简单的介绍了 vue和leaflet结合开发的使用方式。没有对vue的语法或者leaflet做更多的介绍， leaflet的使用，可以参看以前发布的文章，有专门的介绍过。如果想了解更多的 vue@leaflet的开发可以参看视频

创建LTileLayer.vue 组件，因为这里面直接使用的是leaflet中 tilelayer api， 所以可以不用 template

引入 tilelayer

import { tileLayer } from 'leaflet';
//或
//import { TileLayer } from 'leaflet';
//区别
// tilelayer = new TileLayer()

添加tilelayer 到地图上

vm.layer = tileLayer(this.url, this.option);
//或
//vm.layer = new TileLayer(this.url, this.option);
vm.layer.addTo(this.map);

LTileLayer.vue 完整代码

<script>
import { tileLayer } from 'leaflet';
export default {
    name: 'LTileLayer',
    inject: ['getMap'],
    props: ['url', 'labelurl', 'option'],
    data() {
        return {
            map: null,
            layer: null,
            labelLayer: null,
        };
    },

    mounted() {
        let vm = this;
        vm.getMap(map => {
            vm.map = map;
            vm.addLayer();
        });
    },
    methods: {
        addLayer() {
            let vm = this;

            vm.layer = tileLayer(this.url, this.option);
            vm.layer.addTo(this.map);

            if (this.labelurl) {
                vm.labelLayer = tileLayer(this.labelurl, this.option);
                vm.labelLayer.addTo(this.map);
            } 
        },
    },
    render(h) {
        return h;
    },
};
</script>

查看相关视频

项目代码：