vuejs+leaflet展示底图

目录

 

1.导入leaflet等包

2.展示底图

---

1.导入leaflet等包

import L from 'leaflet';
import "leaflet/dist/leaflet.css";
import '@supermap/iclient-leaflet';
import "@supermap/iclient-leaflet/dist/iclient-leaflet.min.css";

2.展示底图

<template>
    <div ref="map" style="width:500px;height:400px;"></div>
</template>

export default {
    name: 'Test',
    mounted(){
        //创建地图
        this.map = L.map(this.$refs.map, {
          center: [43.3424, 125.4242],
          crs: L.CRS.EPSG3857,
          zoom: 10,
          maxZoom: 23,
          editable: true
        });
        //展示底图
        L.supermap.cloudTileLayer('http://t2.supermapcloud.com/FileService/image')
        .addTo(this.map);
    },
    data() {
        return {
            map:undefined
        }
    }
}