# leaflet-template

**Repository Path**: hhan1027/leaflet-template

## Basic Information

- **Project Name**: leaflet-template
- **Description**: 11111111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-26
- **Last Updated**: 2022-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FirstTime

```powershell
win+r
cmd
cd leaflet-template
npm i
npm run dev
cd leaflet-template/serve
npm i
npm i nodemon -g
nodemon app
```

# MapContainer

## MapTypes:

```javascript
{
    TianDiTu: {
        Normal: ['Map', 'Annotion'],
        Satellite: ['Map', 'Annotion'],
        Terrain: ['Map', 'Annotion'],
    },
    GaoDe: {
        Normal: ['Map'],
        Satellite: ['Map', 'Annotion'],
    },
    Google: {
        Normal: ['Map'],
        Satellite: ['Map', 'Annotion'],
    },
    Geoq: {
        Normal: ['Map', 'PurplishBlue', 'Gray', 'Warm'],
        Theme: ['Hydro'],
    },
    OSM: {
        Normal: ['Map'],
    },
    Baidu: {
        Normal: ['Map'],
        Satellite: ['Map', 'Annotion'],
    },
    Tencent: {
        Normal: ['Map'],
        Satellite: ['Map'],
        Terrain: ['Map'],
    },
}
```

## example:

```vue
<mapContainer
    map-name="gaode"
    map-type="GaoDe.Satellite"
    :annotion="true"
    :other-map-layer="['PurplishBlue', 'Gray', 'Warm']"
    :center="[31.59, 120.29]"
    :zoom-index="12"
    :map-options="{
        zoomControl: true,
        attributionControl: false,
        preferCanvas: true,
    }"
    :layer-options="{
        maxZoom: 18,
        minZoom: 5,
    }"
    :is-location="true"
    :is-message="false"
/>
```

## options:

| 属性            | 类型                                                         | 默认值                                                       | 说明                         |
| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------------------------- |
| map-name        | string                                                       | map                                                          | 地图名称                     |
| map-type        | string                                                       | TianDiTu.Normal                                              | 地图类型                     |
| annotion        | boolean                                                      | false                                                        | 是否显示标注图层，默认不显示 |
| other-map-layer | array                                                        | []                                                           | 其他图层                     |
| center          | array                                                        | [31.59, 120.29]                                              | 中心坐标                     |
| zoom-index      | number                                                       | 12                                                           | 缩放等级                     |
| map-options     | {<br/>        zoomControl: \<boolean\>,<br/>        attributionControl: \<boolean\>,<br/>        preferCanvas:\<boolean\>,<br/>} | {<br/>        zoomControl: false,<br/>        attributionControl: false,<br/>        preferCanvas: true,<br/>} | 地图配置                     |
| layer-options   | {<br/>        maxZoom: \<number\>,<br/>        minZoom: \<number\>,<br/> } | {<br/>        maxZoom: 18,<br/>        minZoom: 5,<br/> }    | 图层配置                     |
| is-location     | boolean                                                      | true                                                         | 是否定位，默认定位           |
| is-message      | boolean                                                      | true                                                         | 是否提示，默认提示           |