A Provider for China Tilelayer Service plugin for the vue2-leaflet package
MIT License
A Provider for China Tms Service plugin for the vue2-leaflet package.
This is a chinatmsproviders plugin extension for vue2-leaflet package
npm install vue2-leaflet-chinatilelayer
or
yarn add vue2-leaflet-chinatilelayer
Example:
<template>
<l-map style="height: 100vh;" :zoom="zoom" :center="center">
<l-china-tilelayer :layerName="layerName" :options="options" />
</l-map>
</template>
<script>
import 'leaflet/dist/leaflet.css'
import { LMap } from 'vue2-leaflet'
import LChinaTilelayer from 'vue2-leaflet-chinatilelayer'
export default {
components: { LMap, LChinaTilelayer },
data() {
return {
zoom: 13,
layerName: 'GaoDe.Normal.Map',
options: {
maxZoom: 18,
minZoom: 9,
},
center: [32.06031863553111, 118.76315116882326],
}
},
}
</script>
If you're using TianDiTu, please apply the key and config it in the option, like this:
<script>
import 'leaflet/dist/leaflet.css'
import { LMap } from 'vue2-leaflet'
import LChinaTilelayer from 'vue2-leaflet-chinatilelayer'
export default {
components: { LMap, LChinaTilelayer },
data() {
return {
zoom: 13,
layerName: 'TianDiTu.Normal.Map',
options: {
maxZoom: 18,
minZoom: 9,
key: '***************'
},
center: [32.06031863553111, 118.76315116882326],
}
},
}
</script>
I added a key to the source code, but this key should only be used for testing.
Name | Type | Required | Description |
---|---|---|---|
layerName |
Object |
Yes | A Leaflet China TileLayer. See leaflet.chinatmsproviders |
options |
Object |
No | Options to pass to the plugin. See leaflet.chinatmsproviders |