1.1.16 • Published 4 years ago
vue2-leaflet-chinatilelayer v1.1.16
vue2-leaflet-chinatilelayer
A Provider for China Tms Service plugin for the vue2-leaflet package.
This is a chinatmsproviders plugin extension for vue2-leaflet package
Example
Dependencies
Installation
npm install vue2-leaflet-chinatilelayer
or
yarn add vue2-leaflet-chinatilelayer
Usage
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>
key
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.
Props
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 |