|
@@ -1,7 +1,23 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div id="node4">
|
3
|
|
- <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="8" class="amap-demo" :mapStyle='setMapStyle'>
|
4
|
|
- <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item.position" :icon='item.icon' :title="item.title"></el-amap-marker>
|
|
3
|
+ <div class="top-title">已合作社区分布图</div>
|
|
4
|
+ <el-amap
|
|
5
|
+ ref="map"
|
|
6
|
+ vid="amapDemo"
|
|
7
|
+ :center="mapCenter"
|
|
8
|
+ :zoom="7"
|
|
9
|
+ class="amap-demo"
|
|
10
|
+ :mapStyle="setMapStyle"
|
|
11
|
+ >
|
|
12
|
+ <el-amap-marker
|
|
13
|
+ v-for="(item,index) in markers"
|
|
14
|
+ :key="index"
|
|
15
|
+ :position="item.position"
|
|
16
|
+ :icon="item.icon"
|
|
17
|
+ :title="item.title"
|
|
18
|
+ :offset="item.offset"
|
|
19
|
+ :content="item.content"
|
|
20
|
+ ></el-amap-marker>
|
5
|
21
|
</el-amap>
|
6
|
22
|
</div>
|
7
|
23
|
</template>
|
|
@@ -9,7 +25,7 @@
|
9
|
25
|
<script>
|
10
|
26
|
// import G2 from '@antv/g2'
|
11
|
27
|
// import DataSet from '@antv/data-set'
|
12
|
|
-// import $ from 'jquery'
|
|
28
|
+import $ from 'jquery'
|
13
|
29
|
// import AMapUI from 'AMapUI'
|
14
|
30
|
import light1 from '@/assets/light1.png'
|
15
|
31
|
import light2 from '@/assets/light2.png'
|
|
@@ -23,134 +39,87 @@ export default {
|
23
|
39
|
light3,
|
24
|
40
|
light4,
|
25
|
41
|
markers: [{
|
26
|
|
- position: [119.63803900, 32.58482400],
|
27
|
|
- icon: light1, // 添加 Icon 图标 URL
|
28
|
|
- title: '悦见山'
|
|
42
|
+ position: [118.633516, 32.069878],
|
|
43
|
+ title: '悦见山',
|
|
44
|
+ offset: [-60, -60],
|
|
45
|
+ content: `<div class='point'>
|
|
46
|
+ <img src='${light1}'>
|
|
47
|
+ <span>悦见山</span>
|
|
48
|
+ </div>`
|
29
|
49
|
}, {
|
30
|
|
- position: [118.29096500, 33.92855800],
|
31
|
|
- icon: light2, // 添加 Icon 图标 URL
|
32
|
|
- title: '银山'
|
|
50
|
+ position: [117.161777, 34.154014],
|
|
51
|
+ title: '致享城',
|
|
52
|
+ offset: [-60, -60],
|
|
53
|
+ content: `<div class='point'>
|
|
54
|
+ <img src='${light2}'>
|
|
55
|
+ <span>致享城</span>
|
|
56
|
+ </div>`
|
33
|
57
|
}, {
|
34
|
|
- position: [120.07075000, 32.43910000],
|
35
|
|
- icon: light3, // 添加 Icon 图标 URL
|
36
|
|
- title: '智慧社区'
|
|
58
|
+ position: [118.753086, 31.972501],
|
|
59
|
+ title: '智慧社区',
|
|
60
|
+ offset: [-60, -60],
|
|
61
|
+ content: `<div class='point'>
|
|
62
|
+ <img src='${light3}'>
|
|
63
|
+ <span>智慧社区</span>
|
|
64
|
+ </div>`
|
37
|
65
|
}, {
|
38
|
|
- position: [118.79317400, 32.07443900],
|
39
|
|
- icon: light4, // 添加 Icon 图标 URL
|
40
|
|
- title: '帝景天誉'
|
|
66
|
+ position: [120.064082, 30.343891],
|
|
67
|
+ title: '云谷天境',
|
|
68
|
+ offset: [-60, -60],
|
|
69
|
+ content: `<div class='point'>
|
|
70
|
+ <img src='${light4}'>
|
|
71
|
+ <span>云谷天境</span>
|
|
72
|
+ </div>`
|
41
|
73
|
}],
|
42
|
|
- mapCenter: [119.63803900, 32.58482400],
|
|
74
|
+ mapCenter: [118.753086, 31.972501],
|
43
|
75
|
setMapStyle: 'amap://styles/blue'
|
44
|
76
|
}
|
45
|
77
|
},
|
46
|
78
|
mounted () {
|
47
|
|
- this.rander()
|
|
79
|
+ setInterval(() => {
|
|
80
|
+ this.rander()
|
|
81
|
+ }, 1600)
|
48
|
82
|
},
|
49
|
83
|
methods: {
|
50
|
84
|
rander () {
|
51
|
|
- // AMap.plugin('AMap.DistrictLayer', function () {//异步加载插件
|
52
|
|
- // var DistrictLayer = new AMap.DistrictLayer();
|
53
|
|
- // map.addControl(DistrictLayer);
|
54
|
|
- // });
|
55
|
|
- // var adCode = 320000;
|
56
|
|
- // var depth = 2;
|
57
|
|
- // var map = new AMap.Map("node4", {
|
58
|
|
- // zoom: 8,
|
59
|
|
- // center: [119.63803900, 32.58482400],
|
60
|
|
- // pitch: 0,
|
61
|
|
- // viewMode: '3D',
|
62
|
|
- // });
|
63
|
|
-
|
64
|
|
- // // 创建省份图层
|
65
|
|
- // var disProvince;
|
66
|
|
- // function initPro (code, dep) {
|
67
|
|
- // dep = typeof dep == 'undefined' ? 2 : dep;
|
68
|
|
- // adCode = code;
|
69
|
|
- // depth = dep;
|
70
|
|
-
|
71
|
|
- // disProvince && disProvince.setMap(null);
|
72
|
|
-
|
73
|
|
- // disProvince = new AMap.DistrictLayer.Province({
|
74
|
|
- // zIndex: 12,
|
75
|
|
- // adcode: [code],
|
76
|
|
- // depth: dep,
|
77
|
|
- // styles: {
|
78
|
|
- // 'fill': function (properties) {
|
79
|
|
- // // properties为可用于做样式映射的字段,包含
|
80
|
|
- // // NAME_CHN:中文名称
|
81
|
|
- // // adcode_pro
|
82
|
|
- // // adcode_cit
|
83
|
|
- // // adcode
|
84
|
|
- // var adcode = properties.adcode;
|
85
|
|
- // return getColorByAdcode(adcode);
|
86
|
|
- // },
|
87
|
|
- // 'province-stroke': 'cornflowerblue',
|
88
|
|
- // 'city-stroke': 'white', // 中国地级市边界
|
89
|
|
- // 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
|
90
|
|
- // }
|
91
|
|
- // });
|
92
|
|
-
|
93
|
|
- // disProvince.setMap(map);
|
94
|
|
- // }
|
95
|
|
-
|
96
|
|
- // // 颜色辅助方法
|
97
|
|
- // var colors = {};
|
98
|
|
- // var getColorByAdcode = function (adcode) {
|
99
|
|
- // if (!colors[adcode]) {
|
100
|
|
- // var gb = Math.random() * 155 + 50;
|
101
|
|
- // colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
|
102
|
|
- // }
|
103
|
|
- // return colors[adcode];
|
104
|
|
- // }
|
105
|
|
- // initPro(adCode, depth);
|
106
|
|
- // map.setMapStyle('amap://styles/blue')
|
107
|
|
- // var marker1 = new AMap.Marker({
|
108
|
|
- // position: new AMap.LngLat(119.63803900, 32.58482400),
|
109
|
|
- // offset: new AMap.Pixel(-10, -10),
|
110
|
|
- // icon: this.light1, // 添加 Icon 图标 URL
|
111
|
|
- // title: '悦见山'
|
112
|
|
- // });
|
113
|
|
- // var marker2 = new AMap.Marker({
|
114
|
|
- // position: new AMap.LngLat(118.29096500, 33.92855800),
|
115
|
|
- // offset: new AMap.Pixel(-10, -10),
|
116
|
|
- // icon: this.light2, // 添加 Icon 图标 URL
|
117
|
|
- // title: '银山'
|
118
|
|
- // });
|
119
|
|
- // var marker3 = new AMap.Marker({
|
120
|
|
- // position: new AMap.LngLat(120.07075000, 32.43910000),
|
121
|
|
- // offset: new AMap.Pixel(-10, -10),
|
122
|
|
- // icon: this.light3, // 添加 Icon 图标 URL
|
123
|
|
- // title: '智慧社区'
|
124
|
|
- // });
|
125
|
|
- // var marker4 = new AMap.Marker({
|
126
|
|
- // position: new AMap.LngLat(119.63803900, 32.58482400),
|
127
|
|
- // offset: new AMap.Pixel(-10, -10),
|
128
|
|
- // icon: this.light4, // 添加 Icon 图标 URL
|
129
|
|
- // title: '帝景天誉'
|
130
|
|
- // });
|
131
|
|
- // var markerList = [marker1, marker2, marker3, marker4];
|
132
|
|
- // map.add(markerList);
|
|
85
|
+ $('.point img').animate({ opacity: 0 }, 800).animate({ opacity: 1 }, 800)
|
133
|
86
|
}
|
134
|
87
|
}
|
135
|
88
|
}
|
136
|
89
|
</script>
|
137
|
90
|
|
138
|
91
|
<style lang="scss">
|
139
|
|
-#node4 {
|
140
|
|
- .g2-guide-html {
|
141
|
|
- color: #a4b6c5;
|
142
|
|
- .title {
|
143
|
|
- text-align: "ceter";
|
144
|
|
- }
|
145
|
|
- .value {
|
146
|
|
- text-align: center;
|
147
|
|
- }
|
|
92
|
+#node4{
|
|
93
|
+ border-radius: 5px;
|
|
94
|
+}
|
|
95
|
+.top-title{
|
|
96
|
+ width: 100%;
|
|
97
|
+ position: absolute;
|
|
98
|
+ top: 0;
|
|
99
|
+ left: 0;
|
|
100
|
+ text-align: center;
|
|
101
|
+ margin-top: 30px;
|
|
102
|
+ z-index: 20;
|
|
103
|
+ color: #A6B9C8;
|
|
104
|
+ font-size: 18px;
|
|
105
|
+}
|
|
106
|
+.point{
|
|
107
|
+ position: relative;
|
|
108
|
+ width: 120px;
|
|
109
|
+ height: 120px;
|
|
110
|
+ img{
|
|
111
|
+ position: absolute;
|
|
112
|
+ top: 50%;
|
|
113
|
+ left: 50%;
|
|
114
|
+ transform: translate(-50%,-50%);
|
148
|
115
|
}
|
149
|
|
- .g2-guide-title {
|
150
|
|
- color: #a4b6c5;
|
151
|
|
- .title {
|
152
|
|
- font-size: 16px;
|
153
|
|
- }
|
|
116
|
+ span{
|
|
117
|
+ position: absolute;
|
|
118
|
+ top: 80%;
|
|
119
|
+ left: 50%;
|
|
120
|
+ transform: translate(-50%,-50%);
|
|
121
|
+ font-size: 12px;
|
|
122
|
+ color: white;
|
154
|
123
|
}
|
155
|
124
|
}
|
156
|
125
|
</style>
|