# location-map-image

**Repository Path**: GISuser/location-map-image

## Basic Information

- **Project Name**: location-map-image
- **Description**: 坐落图生成组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-02
- **Last Updated**: 2021-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# location-map-image

> 坐落图生成插件
## 插件功能
给插件传入geojson，直接点击确定按钮，生成带有坐标的坐落图。
支持Feature或Geometry生成坐落图，不支持FeatureCollection传入

## 使用方法

``` bash
# 安装插件
cnpm install location-map-image --save

# 引入插件
import LocationMapImage from "location-map-image";

# components中引入
components:{
   LocationMapImage
},

# 组件使用
<location-map-image :geo-json="geoJson" @createPng="createPng"></location-map-image>
```






## 参数
|参数名|类型|说明|
|:-----  |:-----|-----                           |
|geo-json|Json |geojson数据,只能是Feature或者Geometry |
|featureCollection|Json |FeatureCollertion,需要额外绘制在地图上的数据，属性里带有颜色 |
|confirm-text|string |确认按钮文字  |
|confirm-btn-class|string |确认按钮样式class |

## 事件
|参数名|参数类型|说明|
|:-----  |:-----|-----                           |
|createPng|base64 |点击确认后生成的图片base64数据 |

## Demo
[坐落图生成Demo](https://blog.csdn.net/GISuuser/article/details/113562458?spm=1001.2014.3001.5501)

## 示例数据

- geoJson数据格式1
```json
              {
                "type": "Feature",
                "properties": {},
                "geometry": {
                  "type": "Polygon",
                  "coordinates": [
                    [
                      [
                        97.20703125,
                        42.68243539838623
                      ],
                      [
                        83.671875,
                        25.958044673317843
                      ],
                      [
                        121.11328124999999,
                        13.239945499286312
                      ],
                      [
                        132.36328125,
                        31.653381399664
                      ],
                      [
                        127.96875,
                        49.724479188712984
                      ],
                      [
                        97.20703125,
                        42.68243539838623
                      ]
                    ]
                  ]
                }
              }
```
- geoJson示例数据2
```json
                 {
                  "type": "Polygon",
                  "coordinates": [
                    [
                      [
                        97.20703125,
                        42.68243539838623
                      ],
                      [
                        83.671875,
                        25.958044673317843
                      ],
                      [
                        121.11328124999999,
                        13.239945499286312
                      ],
                      [
                        132.36328125,
                        31.653381399664
                      ],
                      [
                        127.96875,
                        49.724479188712984
                      ],
                      [
                        97.20703125,
                        42.68243539838623
                      ]
                    ]
                  ]
                }
```
- featureCollection示例数据
```json
{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "color": "#FF0000"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            114.656625,
                            35.433375
                        ],
                        [
                            114.6534922,
                            35.4339973
                        ],
                        [
                            114.6537352,
                            35.4344537
                        ],
                        [
                            114.6540356,
                            35.4350347
                        ],
                        [
                            114.6563256,
                            35.4346485
                        ],
                        [
                            114.6563739,
                            35.4348067
                        ],
                        [
                            114.6567146,
                            35.4361621
                        ],
                        [
                            114.6567441,
                            35.4361729
                        ],
                        [
                            114.6568084,
                            35.4364706
                        ],
                        [
                            114.6573642,
                            35.4363982
                        ],
                        [
                            114.6574929,
                            35.436948
                        ],
                        [
                            114.6577585,
                            35.4371653
                        ],
                        [
                            114.6578363,
                            35.4372645
                        ],
                        [
                            114.6578631,
                            35.4372377
                        ],
                        [
                            114.6586999,
                            35.4366154
                        ],
                        [
                            114.6597943,
                            35.4362346
                        ],
                        [
                            114.6609262,
                            35.4359932
                        ],
                        [
                            114.6628842,
                            35.435531
                        ],
                        [
                            114.6621922,
                            35.4323182
                        ],
                        [
                            114.6621879,
                            35.4322876
                        ],
                        [
                            114.6603054,
                            35.4326554
                        ],
                        [
                            114.656625,
                            35.433375
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "color": "#00FFEE"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            114.6606186,
                            35.4359157
                        ],
                        [
                            114.6610612,
                            35.4358502
                        ],
                        [
                            114.660868,
                            35.4349826
                        ],
                        [
                            114.6604282,
                            35.4350481
                        ],
                        [
                            114.6606186,
                            35.4359157
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "color": "#00FFEE"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            114.6611819,
                            35.435778
                        ],
                        [
                            114.6616244,
                            35.4357147
                        ],
                        [
                            114.6614367,
                            35.4348427
                        ],
                        [
                            114.6609941,
                            35.4349039
                        ],
                        [
                            114.6611819,
                            35.435778
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "color": "#00FFEE"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            114.6606535,
                            35.4339948
                        ],
                        [
                            114.6606401,
                            35.4339336
                        ],
                        [
                            114.6602243,
                            35.4339948
                        ],
                        [
                            114.6604148,
                            35.4348645
                        ],
                        [
                            114.6608305,
                            35.4348034
                        ],
                        [
                            114.6606535,
                            35.4339948
                        ],
                        [
                            114.6606535,
                            35.4339948
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "color": "#00FFEE"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            114.6612114,
                            35.4338199
                        ],
                        [
                            114.6612033,
                            35.4337784
                        ],
                        [
                            114.6609083,
                            35.4338199
                        ],
                        [
                            114.6607661,
                            35.4338418
                        ],
                        [
                            114.6607983,
                            35.4339948
                        ],
                        [
                            114.660799,
                            35.4339948
                        ],
                        [
                            114.6609539,
                            35.4347159
                        ],
                        [
                            114.6613911,
                            35.4346526
                        ],
                        [
                            114.6612114,
                            35.4338199
                        ]
                    ]
                ]
            }
        }
    ]
}
```

更多详情，可以参考[官方博客](https://hanbo.blog.csdn.net/)