vue2-client 1.6.31 → 1.6.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -10,111 +10,112 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
</template>
|
|
12
12
|
<script>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
// 需要渲染的点位数据
|
|
25
|
-
markers: {
|
|
26
|
-
type: String,
|
|
27
|
-
default: null // lng:经度值 lat:纬度值
|
|
28
|
-
},
|
|
29
|
-
// 渲染点位的图片
|
|
30
|
-
imgurl: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: () => {
|
|
33
|
-
return require('../../../../assets/img/success1.png')
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
mapStyle: {
|
|
37
|
-
type: Object,
|
|
38
|
-
default: () => {
|
|
39
|
-
return {
|
|
40
|
-
width: '100%',
|
|
41
|
-
height: '85vh',
|
|
42
|
-
border: '2px solid lightgray',
|
|
43
|
-
'border-radius': '5px'
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
13
|
+
import { GetGDMap } from '@vue2-client/utils/map-utils'
|
|
14
|
+
import { mapState } from 'vuex'
|
|
15
|
+
export default {
|
|
16
|
+
name: 'AmapPointRendering',
|
|
17
|
+
props: {
|
|
18
|
+
// 选中点位后需要展示的信息描述
|
|
19
|
+
describeList: {
|
|
20
|
+
type: Array,
|
|
21
|
+
// eslint-disable-next-line vue/require-valid-default-prop
|
|
22
|
+
default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
|
|
47
23
|
},
|
|
48
|
-
|
|
49
|
-
|
|
24
|
+
// 需要渲染的点位数据
|
|
25
|
+
markers: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: null // lng:经度值 lat:纬度值
|
|
50
28
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
selectrow: {}
|
|
29
|
+
// 渲染点位的图片
|
|
30
|
+
imgurl: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: () => {
|
|
33
|
+
return "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
|
|
57
34
|
}
|
|
58
35
|
},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
36
|
+
mapStyle: {
|
|
37
|
+
type: Object,
|
|
38
|
+
default: () => {
|
|
39
|
+
return {
|
|
40
|
+
width: '100%',
|
|
41
|
+
height: '85vh',
|
|
42
|
+
border: '2px solid lightgray',
|
|
43
|
+
'border-radius': '5px'
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
computed: {
|
|
49
|
+
...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
|
|
50
|
+
},
|
|
51
|
+
data () {
|
|
52
|
+
return {
|
|
53
|
+
map: null,
|
|
54
|
+
geocoder: null, // 逆地理编码
|
|
55
|
+
infoWindow: null,
|
|
56
|
+
selectrow: {}
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
created () {
|
|
60
|
+
},
|
|
61
|
+
mounted () {
|
|
62
|
+
GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
|
|
63
|
+
this.initMap(aMap)
|
|
64
|
+
this.initData(aMap)
|
|
65
|
+
})
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
initMap (aMap) {
|
|
69
|
+
this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
|
|
70
|
+
resizeEnable: true, // 是否监控地图容器尺寸变化
|
|
71
|
+
zoom: 10, // 初始化地图层级
|
|
72
|
+
})
|
|
73
|
+
this.geocoder = new (aMap).Geocoder({
|
|
74
|
+
radius: 500 // 范围，默认：500
|
|
75
|
+
})
|
|
76
|
+
this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
|
|
77
|
+
// 初始化窗体
|
|
78
|
+
this.infoWindow = new (aMap).InfoWindow({
|
|
79
|
+
anchor: 'bottom-center',
|
|
80
|
+
isCustom: false, // 使用自定义窗体
|
|
81
|
+
autoMove: true,
|
|
82
|
+
content: '',
|
|
83
|
+
showShadow: true,
|
|
84
|
+
offset: new (aMap).Pixel(0, -25)
|
|
65
85
|
})
|
|
66
86
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
87
|
+
initData (aMap) {
|
|
88
|
+
// 创建一个 Marker 实例：
|
|
89
|
+
if (this.markers) {
|
|
90
|
+
const lngLat = this.markers.split(',')
|
|
91
|
+
console.log('this.imgurl',this.imgurl)
|
|
92
|
+
const lng = lngLat[0]
|
|
93
|
+
const lat = lngLat[1]
|
|
94
|
+
const marker = new (aMap).Marker({
|
|
95
|
+
// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
96
|
+
position: new (aMap).LngLat(lng, lat),
|
|
97
|
+
icon: new (aMap).Icon({
|
|
98
|
+
// 图标大小
|
|
99
|
+
size: new (aMap).Size(26, 28),
|
|
100
|
+
imageSize: new (aMap).Size(26, 28),
|
|
101
|
+
// 报警图标URL
|
|
102
|
+
image: this.imgurl,
|
|
103
|
+
// 图标偏移位置
|
|
104
|
+
anchor: new (aMap).Pixel(0, 0),
|
|
105
|
+
}),
|
|
106
|
+
extData: this.markers
|
|
72
107
|
})
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
this.infoWindow = new (aMap).InfoWindow({
|
|
79
|
-
anchor: 'bottom-center',
|
|
80
|
-
isCustom: false, // 使用自定义窗体
|
|
81
|
-
autoMove: true,
|
|
82
|
-
content: '',
|
|
83
|
-
showShadow: true,
|
|
84
|
-
offset: new (aMap).Pixel(0, -25)
|
|
108
|
+
marker.on('click', (e) => {
|
|
109
|
+
if(e.target.getExtData() && e.target.getExtData().lng){
|
|
110
|
+
this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
|
|
111
|
+
this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
|
|
112
|
+
}
|
|
85
113
|
})
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
if (this.markers) {
|
|
90
|
-
const lngLat = this.markers.split(',')
|
|
91
|
-
const lng = lngLat[0]
|
|
92
|
-
const lat = lngLat[1]
|
|
93
|
-
const marker = new (aMap).Marker({
|
|
94
|
-
// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
95
|
-
position: new (aMap).LngLat(lng, lat),
|
|
96
|
-
title: '北京',
|
|
97
|
-
icon: new (aMap).Icon({
|
|
98
|
-
// 图标大小
|
|
99
|
-
size: new (aMap).Size(26, 28),
|
|
100
|
-
// 报警图标URL
|
|
101
|
-
url: this.imgurl,
|
|
102
|
-
// 图标偏移位置
|
|
103
|
-
anchor: new (aMap).Pixel(0, 0),
|
|
104
|
-
}),
|
|
105
|
-
extData: this.markers
|
|
106
|
-
})
|
|
107
|
-
marker.on('click', (e) => {
|
|
108
|
-
if(e.target.getExtData() && e.target.getExtData().lng){
|
|
109
|
-
this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
|
|
110
|
-
this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
|
|
111
|
-
}
|
|
112
|
-
})
|
|
113
|
-
// 将创建的点标记添加到已有的地图实例：
|
|
114
|
-
this.map.add(marker)
|
|
115
|
-
this.map.setFitView()
|
|
116
|
-
}
|
|
114
|
+
// 将创建的点标记添加到已有的地图实例：
|
|
115
|
+
this.map.add(marker)
|
|
116
|
+
this.map.setFitView()
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
+
}
|
|
120
121
|
</script>
|
|
@@ -100,10 +100,12 @@
|
|
|
100
100
|
}
|
|
101
101
|
</script>
|
|
102
102
|
|
|
103
|
-
<style lang="less">
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
<style lang="less" scoped>
|
|
104
|
+
.pd-20 {
|
|
105
|
+
padding: 20px;
|
|
106
|
+
}
|
|
107
|
+
/deep/ .ant-tree-switcher-icon svg{
|
|
108
|
+
width: 1.5em;
|
|
109
|
+
height: 1.5em;
|
|
108
110
|
}
|
|
109
111
|
</style>
|
|
@@ -32,16 +32,27 @@
|
|
|
32
32
|
pointer-events: none;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
// 美化滚动条
|
|
35
36
|
::-webkit-scrollbar{
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
height: 9px;
|
|
38
|
+
width: 9px;
|
|
38
39
|
}
|
|
40
|
+
|
|
39
41
|
::-webkit-scrollbar-thumb {
|
|
40
|
-
border-radius:
|
|
42
|
+
border-radius: 10px;
|
|
41
43
|
background: @primary-3;
|
|
44
|
+
border-style: dashed;
|
|
45
|
+
border-color: transparent;
|
|
46
|
+
border-width: 2px;
|
|
47
|
+
background-clip: padding-box;
|
|
42
48
|
}
|
|
49
|
+
|
|
43
50
|
::-webkit-scrollbar-track {
|
|
44
51
|
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
|
|
45
|
-
border-radius:
|
|
52
|
+
border-radius: 10px;
|
|
46
53
|
background: @primary-1;
|
|
47
54
|
}
|
|
55
|
+
|
|
56
|
+
::-webkit-scrollbar-thumb:hover {
|
|
57
|
+
background: @primary-3;
|
|
58
|
+
}
|