1.0.4 • Published 3 years ago
location-map-image v1.0.4
location-map-image
坐落图生成插件
插件功能
给插件传入geojson，直接点击确定按钮，生成带有坐标的坐落图。 支持Feature或Geometry生成坐落图，不支持FeatureCollection传入
使用方法
# 安装插件
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
示例数据
- geoJson数据格式1
{
"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
{
"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示例数据
{
"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
]
]
]
}
}
]
}更多详情，可以参考官方博客