lf-map-ts v0.0.10

lf-map-ts

简介

这是一个基于Leaflet地图组件的TS封装。 注意：项目处于实验阶段，不能在产品环境中使用。 仅实现以下功能：

• 加载行政区划geojosn。
• 鼠标悬浮高亮显示行政区域。
• 自定义边界、行政区域默认及行政区域高亮颜色。

使用方法

准备你的geojson

在public目录下新建文件夹geo_data，并将你的geojosn文件拷贝到这里。

安装本lib依赖

• npm i --save lf-map-ts OR yarn add lf-map-ts

前端使用

示例vue文件

// Demo.vue
<template>
  <div id="leaflet" class="map"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { LeafletMap } from 'lf-map-ts'

export default defineComponent({
  name: 'App',
  components: {},
  data () {
    return {
    }
  },
  setup () {
    onMounted(() => {
      const map = new LeafletMap('leaflet',  { minZoom: 3, maxZoom: 15, zoom: 4, crs: 'EPSG:3857' }) // LeafletMap(containerId: string, config?: options)
      map.readRegionGeoJson('/geo_data/china.json') // 加载geojson
    })
  }
})
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 100%;
  position: absolute;
}

.leaflet-container {
  background: transparent;
}
</style>

更多功能及用法

To be continued