vue 使用 supermap/iclient-leaflet 地图

先安装以下插件

leaflet
@supermap/iclient-leaflet

接着在main.js中引入supermap 的样式

//supermap样式
import "leaflet/dist/leaflet.css";

 

然后新建一个组件

map.vue

<template>
  <div id="map" class="map-data"></div>
</template>
<script>
import L from "leaflet";
import "@supermap/iclient-leaflet";
export default {
  data() {
    return {
      width: "",
      height: ""
    };
  },
  created: function() {},
  methods: {
    addMap() {
      let host = "你的主机地址";
      let map,
        url = host + "iserver地址";
      map = L.map("map", {
        crs: L.CRS.EPSG4326,
        center: [22.2005758667108, 113.554589513591],
        maxZoom: 18,
        zoom: 17
      });
      L.supermap.tiledMapLayer(url).addTo(map);
    }
  },
  mounted() {
    this.height = document.getElementsByClassName(
      "content-wrapper"
    )[0].offsetHeight;
    this.width = document.getElementsByClassName(
      "content-wrapper"
    )[0].offsetWidth;
    this.addMap();
  }
};
</script>
<style scoped>
.map-data {
  width: 100%;
  height: calc(100vh - 80px);
}
.content-wrapper .main-content {
  margin: 0px;
}
</style>

使用组件

<template>
  <keep-alive>
    <Maps />
  </keep-alive>
</template>
<script>
import Maps from "../../../components/map.vue";
export default {
  name: "BusMap",
  components: {
    Maps
  }
};
</script>

效果：

注意!注意！注意！记得要以组件的方式进行使用