Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
67659feb 1 parent 0c24acf2

fix

Inline Side-by-side
Showing 16 changed files with 194 additions and 135 deletions
1 # 地图测试Demo 1 # 地图测试Demo
2 +
3 +[437759,214079] ~ [437763,214079]
4 +[437759,214080] ~ [437763,214080]
5 +[437759,214081] ~ [437763,214081]
6 +[437759,214082] ~ [437763,214082]
7 +[437759,214083] ~ [437763,214083]
8 +[437759,214084] ~ [437763,214084]
9 +[437759,214085] ~ [437763,214086]
10 +
11 +35个格子 128
12 +
13 +[218879,107039] ~ [218882,107039]
14 +[218879,107040] ~ [218882,107040]
15 +[218879,107041] ~ [218882,107041]
16 +[218879,107042] ~ [218882,107042]
17 +
18 +16个格子 256
19 +
20 +[109439,53519] ~ [109441,53519]
21 +[109439,53520] ~ [109441,53520]
22 +[109439,53521] ~ [109441,53521]
23 +
24 +9个格子 256
......
...@@ -92,27 +92,17 @@ var spotInfo = [ ...@@ -92,27 +92,17 @@ var spotInfo = [
92 { 92 {
93 name: '三宝楼', 93 name: '三宝楼',
94 position: [120.587519, 31.315924], 94 position: [120.587519, 31.315924],
95 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 95 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
96 }, 96 },
97 { 97 {
98 name: '法云堂', 98 name: '法云堂',
99 position: [120.587884, 31.3152], 99 position: [120.587884, 31.3152],
100 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 100 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
101 - },
102 - {
103 - name: '西花园湖心亭',
104 - position: [120.586253, 31.315273],
105 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
106 - },
107 - {
108 - name: '四百岁神龟',
109 - position: [120.585948, 31.315095],
110 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
111 }, 101 },
112 { 102 {
113 name: '罗汉堂', 103 name: '罗汉堂',
114 position: [120.58764, 31.315011], 104 position: [120.58764, 31.315011],
115 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 105 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
116 note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。 106 note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
117 107
118 西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。 108 西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。
...@@ -122,12 +112,12 @@ var spotInfo = [ ...@@ -122,12 +112,12 @@ var spotInfo = [
122 112
123 除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。 113 除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。
124 114
125 - 罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。` 115 + 罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`,
126 }, 116 },
127 { 117 {
128 name: '大雄宝殿', 118 name: '大雄宝殿',
129 position: [120.587249, 31.314722], 119 position: [120.587249, 31.314722],
130 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 120 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
131 note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。 121 note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
132 122
133 大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。 123 大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
...@@ -142,7 +132,7 @@ var spotInfo = [ ...@@ -142,7 +132,7 @@ var spotInfo = [
142 132
143 内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。 133 内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
144 134
145 - 两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！` 135 + 两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`,
146 }, 136 },
147 ]; 137 ];
148 138
...@@ -150,15 +140,33 @@ var toiletInfo = [ ...@@ -150,15 +140,33 @@ var toiletInfo = [
150 { 140 {
151 name: '厕所', 141 name: '厕所',
152 position: [120.588351, 31.31449], 142 position: [120.588351, 31.31449],
153 - icon: '//a.amap.com/jsapi_demos/static/resource/img/洗手间.png', 143 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png',
154 }, 144 },
155 ]; 145 ];
156 146
157 var activityInfo = [ 147 var activityInfo = [
158 { 148 {
149 + name: '西花园湖心亭',
150 + position: [120.586253, 31.315273],
151 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
152 + },
153 + {
154 + name: '四百岁神龟',
155 + position: [120.585948, 31.315095],
156 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
157 + },
158 +];
159 +
160 +const publicInfo = [
161 + {
162 + name: '出入口',
163 + position: [120.587788, 31.313383],
164 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png',
165 + },
166 + {
159 name: '素食', 167 name: '素食',
160 position: [120.587152, 31.314396], 168 position: [120.587152, 31.314396],
161 - icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 169 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E9%A4%90%E9%A5%AE@2x.png',
162 }, 170 },
163 ]; 171 ];
164 172
...@@ -168,4 +176,5 @@ export default { ...@@ -168,4 +176,5 @@ export default {
168 spotInfo, 176 spotInfo,
169 toiletInfo, 177 toiletInfo,
170 activityInfo, 178 activityInfo,
179 + publicInfo,
171 }; 180 };
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-05-31 15:25:25 4 + * @LastEditTime: 2023-06-01 17:42:52
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -11,23 +11,12 @@ ...@@ -11,23 +11,12 @@
11 <div class="nav-bar-wrapper"> 11 <div class="nav-bar-wrapper">
12 <div class="hideScrollBar" 12 <div class="hideScrollBar"
13 style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;"> 13 style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
14 - <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 0 ? 'checked' : '', 'item']" 14 + <div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
15 - @click="setNavLayer(0)"> 15 + @click="setNavLayer(item, index)">
16 <van-icon name="shop-o" size="1.25rem" /><br /> 16 <van-icon name="shop-o" size="1.25rem" /><br />
17 - <span style="font-size: 0.85rem;">景区信息</span> 17 + <span style="font-size: 0.85rem;">{{ item.name }}</span>
18 - </div>
19 - <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 1 ? 'checked' : '', 'item']"
20 - @click="setNavLayer(1)">
21 - <van-icon name="shop-o" size="1.25rem" /><br />
22 - <span style="font-size: 0.85rem;">卫生间</span>
23 - </div>
24 - <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
25 - @click="setNavLayer(2)">
26 - <van-icon name="shop-o" size="1.25rem" /><br />
27 - <span style="font-size: 0.85rem;">活动中心</span>
28 </div> 18 </div>
29 <div style="width: 4rem;flex-shrink: 0;"></div> 19 <div style="width: 4rem;flex-shrink: 0;"></div>
30 -
31 <div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;"> 20 <div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
32 <div style="padding-top: 40%;"> 21 <div style="padding-top: 40%;">
33 <van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" /> 22 <van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" />
...@@ -59,10 +48,10 @@ ...@@ -59,10 +48,10 @@
59 </div> 48 </div>
60 <div class="operate-bar-wrapper"> 49 <div class="operate-bar-wrapper">
61 <div class="box-wrapper"> 50 <div class="box-wrapper">
62 - <div class="item" @click="setTitleLayer"> 51 + <!-- <div class="item" @click="setTitleLayer">
63 <i class="fa fa-cube"></i><br /> 52 <i class="fa fa-cube"></i><br />
64 贴片 53 贴片
65 - </div> 54 + </div> -->
66 <div v-if="show_walk_route" class="item" @click="setWalkRoute"> 55 <div v-if="show_walk_route" class="item" @click="setWalkRoute">
67 <i class="fa fa-eye"></i><br /> 56 <i class="fa fa-eye"></i><br />
68 步行 57 步行
...@@ -198,6 +187,7 @@ export default { ...@@ -198,6 +187,7 @@ export default {
198 spotInfo: [], // 景点信息实体 187 spotInfo: [], // 景点信息实体
199 toiletInfo: [], // 厕所信息实体 188 toiletInfo: [], // 厕所信息实体
200 activityInfo: [], // 活动场所信息实体 189 activityInfo: [], // 活动场所信息实体
190 + publicInfo: [], // 公共设施信息实体
201 show_popup: false, 191 show_popup: false,
202 dialog_show: false, 192 dialog_show: false,
203 xys_lng: '', 193 xys_lng: '',
...@@ -215,9 +205,23 @@ export default { ...@@ -215,9 +205,23 @@ export default {
215 showInfoWindow: false, 205 showInfoWindow: false,
216 infoWindow: {}, 206 infoWindow: {},
217 infoWindowTitle: '', 207 infoWindowTitle: '',
208 + navBarList: []
218 } 209 }
219 }, 210 },
220 mounted() { 211 mounted() {
212 + this.navBarList = [{
213 + key: 'spot',
214 + name: '景区信息'
215 + }, {
216 + key: 'activity',
217 + name: '活动设施'
218 + }, {
219 + key: 'public',
220 + name: '公共设施'
221 + }, {
222 + key: 'toilet',
223 + name: '卫生间'
224 + }]
221 // 初始化地图 225 // 初始化地图
222 this.initMap(); 226 this.initMap();
223 // this.loadPublicEquipment(); 227 // this.loadPublicEquipment();
...@@ -227,7 +231,7 @@ export default { ...@@ -227,7 +231,7 @@ export default {
227 // 使用之前都要再获取一下地址 231 // 使用之前都要再获取一下地址
228 this.getLocation() 232 this.getLocation()
229 // 打开贴片地图 233 // 打开贴片地图
230 - // this.setTitleLayer() 234 + this.setTitleLayer()
231 }, 235 },
232 watch: { 236 watch: {
233 show_popup(val) { 237 show_popup(val) {
...@@ -241,31 +245,6 @@ export default { ...@@ -241,31 +245,6 @@ export default {
241 } 245 }
242 }, 246 },
243 methods: { 247 methods: {
244 - // addMarker () {
245 - // // axios.get('http://api.map.baidu.com/location/ip?ak=CzpAXV4bhyqCKnWpQqLRkS1i&coor=bd09ll')
246 - // axios.get('https://restapi.amap.com/v5/ip?ip=114.88.176.153&type=4&key=d50d6e58d65408db18af05c0a9422a44')
247 - // .then(res => {
248 - // if (res.statusText === 'OK') {
249 - // console.warn(res.data);
250 - // //
251 - // let marker = new AMap.Marker({
252 - // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
253 - // position: [121.54431, 31.30164],
254 - // offset: new AMap.Pixel(-13, -30)
255 - // });
256 - // marker.setMap(this.map);
257 - // } else {
258 - // console.warn(res);
259 - // this.$vux.toast.show({
260 - // type: 'warn',
261 - // text: res.data.msg
262 - // });
263 - // }
264 - // })
265 - // .catch(err => {
266 - // console.error(err);
267 - // })
268 - // },
269 initMap() { 248 initMap() {
270 // 初始化地图 249 // 初始化地图
271 this.map = new AMap.Map('container', { 250 this.map = new AMap.Map('container', {
...@@ -274,7 +253,7 @@ export default { ...@@ -274,7 +253,7 @@ export default {
274 showIndoorMap: false, 253 showIndoorMap: false,
275 defaultCursor: 'pointer', // 地图默认鼠标样式 254 defaultCursor: 'pointer', // 地图默认鼠标样式
276 showBuildingBlock: false, // 是否展示地图 3D 楼块 255 showBuildingBlock: false, // 是否展示地图 3D 楼块
277 - zooms: [17, 18], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30] 256 + zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
278 showLabel: true, // 是否展示地图文字和 POI 信息 257 showLabel: true, // 是否展示地图文字和 POI 信息
279 zoom: 18, // 设置地图显示的缩放级别 258 zoom: 18, // 设置地图显示的缩放级别
280 pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。 259 pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
...@@ -450,7 +429,7 @@ export default { ...@@ -450,7 +429,7 @@ export default {
450 styles: [{ 429 styles: [{
451 icon: { 430 icon: {
452 img: coord.spotInfo[i].icon, 431 img: coord.spotInfo[i].icon,
453 - size: [16, 16], // 可见区域的大小 432 + size: [28, 28], // 可见区域的大小
454 anchor: 'bottom-center', // 锚点 433 anchor: 'bottom-center', // 锚点
455 fitZoom: 14, // 最合适的级别 434 fitZoom: 14, // 最合适的级别
456 scaleFactor: 2, // 地图放大一级的缩放比例系数 435 scaleFactor: 2, // 地图放大一级的缩放比例系数
...@@ -465,24 +444,11 @@ export default { ...@@ -465,24 +444,11 @@ export default {
465 }], 444 }],
466 zoomStyleMapping 445 zoomStyleMapping
467 }); 446 });
468 - let infoWindowContent =
469 - '<div className="custom-infowindow input-card">' +
470 - '<label style="color:grey">公共厕所</label>' +
471 - // 为 infowindow 添加自定义事件
472 - '<div id="lnglat2container" class="btn">我要走过去</div>' +
473 - '</div>';
474 - // 创建一个自定义内容的 infowindow 实例
475 - let infoWindow = new AMap.InfoWindow({
476 - position: coord.spotInfo[i].position,
477 - offset: new AMap.Pixel(0, -30),
478 - content: infoWindowContent
479 - });
480 if (clickListener) { 447 if (clickListener) {
481 marker.off('click', clickListener) 448 marker.off('click', clickListener)
482 } 449 }
483 // 绑定景点的点击事件 - 文字出现才能触发 450 // 绑定景点的点击事件 - 文字出现才能触发
484 var clickListener = marker.on('click', (e) => { 451 var clickListener = marker.on('click', (e) => {
485 - // infoWindow.open(this.map);
486 this.show_popup = true; 452 this.show_popup = true;
487 this.popup_title = x.name; 453 this.popup_title = x.name;
488 this.popup_content = x.note; 454 this.popup_content = x.note;
...@@ -502,7 +468,7 @@ export default { ...@@ -502,7 +468,7 @@ export default {
502 styles: [{ 468 styles: [{
503 icon: { 469 icon: {
504 img: coord.toiletInfo[i].icon, 470 img: coord.toiletInfo[i].icon,
505 - size: [16, 16], // 可见区域的大小 471 + size: [28, 28], // 可见区域的大小
506 anchor: 'bottom-center', // 锚点 472 anchor: 'bottom-center', // 锚点
507 fitZoom: 14, // 最合适的级别 473 fitZoom: 14, // 最合适的级别
508 scaleFactor: 2, // 地图放大一级的缩放比例系数 474 scaleFactor: 2, // 地图放大一级的缩放比例系数
...@@ -517,24 +483,11 @@ export default { ...@@ -517,24 +483,11 @@ export default {
517 }], 483 }],
518 zoomStyleMapping 484 zoomStyleMapping
519 }); 485 });
520 - // let infoWindowContent =
521 - // '<div className="custom-infowindow input-card">' +
522 - // '<label style="color:grey">公共厕所</label>' +
523 - // // 为 infowindow 添加自定义事件
524 - // '<div id="lnglat2container" class="btn">我要走过去</div>' +
525 - // '</div>';
526 - // // 创建一个自定义内容的 infowindow 实例
527 - // let infoWindow = new AMap.InfoWindow({
528 - // position: coord.spotInfo[i].position,
529 - // offset: new AMap.Pixel(0, -30),
530 - // content: infoWindowContent
531 - // });
532 if (clickListener) { 486 if (clickListener) {
533 marker.off('click', clickListener) 487 marker.off('click', clickListener)
534 } 488 }
535 // 绑定景点的点击事件 - 文字出现才能触发 489 // 绑定景点的点击事件 - 文字出现才能触发
536 var clickListener = marker.on('click', (e) => { 490 var clickListener = marker.on('click', (e) => {
537 - // infoWindow.open(this.map);
538 this.show_popup = true; 491 this.show_popup = true;
539 }) 492 })
540 // 493 //
...@@ -552,7 +505,7 @@ export default { ...@@ -552,7 +505,7 @@ export default {
552 styles: [{ 505 styles: [{
553 icon: { 506 icon: {
554 img: coord.activityInfo[i].icon, 507 img: coord.activityInfo[i].icon,
555 - size: [16, 16], // 可见区域的大小 508 + size: [28, 28], // 可见区域的大小
556 anchor: 'bottom-center', // 锚点 509 anchor: 'bottom-center', // 锚点
557 fitZoom: 14, // 最合适的级别 510 fitZoom: 14, // 最合适的级别
558 scaleFactor: 2, // 地图放大一级的缩放比例系数 511 scaleFactor: 2, // 地图放大一级的缩放比例系数
...@@ -567,24 +520,11 @@ export default { ...@@ -567,24 +520,11 @@ export default {
567 }], 520 }],
568 zoomStyleMapping 521 zoomStyleMapping
569 }); 522 });
570 - // let infoWindowContent =
571 - // '<div className="custom-infowindow input-card">' +
572 - // '<label style="color:grey">公共厕所</label>' +
573 - // // 为 infowindow 添加自定义事件
574 - // '<div id="lnglat2container" class="btn">我要走过去</div>' +
575 - // '</div>';
576 - // // 创建一个自定义内容的 infowindow 实例
577 - // let infoWindow = new AMap.InfoWindow({
578 - // position: coord.spotInfo[i].position,
579 - // offset: new AMap.Pixel(0, -30),
580 - // content: infoWindowContent
581 - // });
582 if (clickListener) { 523 if (clickListener) {
583 marker.off('click', clickListener) 524 marker.off('click', clickListener)
584 } 525 }
585 // 绑定景点的点击事件 - 文字出现才能触发 526 // 绑定景点的点击事件 - 文字出现才能触发
586 var clickListener = marker.on('click', (e) => { 527 var clickListener = marker.on('click', (e) => {
587 - // infoWindow.open(this.map);
588 this.show_popup = true; 528 this.show_popup = true;
589 }) 529 })
590 // 530 //
...@@ -593,6 +533,43 @@ export default { ...@@ -593,6 +533,43 @@ export default {
593 }) 533 })
594 this.map.add(this.activityInfo); 534 this.map.add(this.activityInfo);
595 }, 535 },
536 + loadPublicMaker() { // 加载公共设施标记
537 + var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
538 + _.each(coord.publicInfo, (x, i) => {
539 + var marker = new AMap.ElasticMarker({
540 + position: coord.publicInfo[i].position,
541 + zooms: [17, 19],
542 + styles: [{
543 + icon: {
544 + img: coord.publicInfo[i].icon,
545 + size: [28, 28], // 可见区域的大小
546 + anchor: 'bottom-center', // 锚点
547 + fitZoom: 18, // 最合适的级别
548 + scaleFactor: 2, // 地图放大一级的缩放比例系数
549 + maxScale: 1.4, // 最大放大比例
550 + minScale: 0.8 // 最小放大比例
551 + },
552 + label: {
553 + content: coord.publicInfo[i].name,
554 + position: 'TM',
555 + minZoom: 18
556 + }
557 + }],
558 + zoomStyleMapping
559 + });
560 + if (clickListener) {
561 + marker.off('click', clickListener)
562 + }
563 + // 绑定景点的点击事件 - 文字出现才能触发
564 + var clickListener = marker.on('click', (e) => {
565 + this.show_popup = true;
566 + })
567 + //
568 + this.publicInfo.push(marker);
569 +
570 + })
571 + this.map.add(this.publicInfo);
572 + },
596 setMapBoundary() { // 地图描边 573 setMapBoundary() { // 地图描边
597 new AMap.Polygon({ 574 new AMap.Polygon({
598 cursor: 'pointer', 575 cursor: 'pointer',
...@@ -610,20 +587,6 @@ export default { ...@@ -610,20 +587,6 @@ export default {
610 hidePublic() { 587 hidePublic() {
611 this.map.remove(this.facilities); 588 this.map.remove(this.facilities);
612 }, 589 },
613 - addLayer() {
614 - this.layerMap();
615 - // this.loadPublicEquipment();
616 - this.loadScenicSpot();
617 - // this.loadPlant();
618 - this.setMapBoundary();
619 - },
620 - removeLayer() {
621 - this.initMap();
622 - // this.loadPublicEquipment();
623 - this.loadScenicSpot();
624 - // this.loadPlant();
625 - this.setMapBoundary();
626 - },
627 setLocation() { // 开启定位服务 590 setLocation() { // 开启定位服务
628 // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置 591 // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
629 if (!this.current_lng || !this.current_lat) { 592 if (!this.current_lng || !this.current_lat) {
...@@ -685,9 +648,9 @@ export default { ...@@ -685,9 +648,9 @@ export default {
685 this.current_route = new AMap.Polyline({ 648 this.current_route = new AMap.Polyline({
686 path: path, 649 path: path,
687 isOutline: true, 650 isOutline: true,
688 - outlineColor: 'red', 651 + outlineColor: '#7F7F7F',
689 borderWeight: 1, 652 borderWeight: 1,
690 - strokeColor: '#FFF', 653 + strokeColor: '#7F7F7F',
691 strokeOpacity: 1, 654 strokeOpacity: 1,
692 strokeWeight: 1, 655 strokeWeight: 1,
693 // 折线样式还支持 'dashed' 656 // 折线样式还支持 'dashed'
...@@ -704,10 +667,40 @@ export default { ...@@ -704,10 +667,40 @@ export default {
704 this.map.add([this.current_route]); 667 this.map.add([this.current_route]);
705 // 668 //
706 var marker1 = new AMap.Marker({ 669 var marker1 = new AMap.Marker({
670 + icon: new AMap.Icon({
671 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
672 + size: new AMap.Size(40, 40),
673 + // 图标所用图片大小
674 + imageSize: new AMap.Size(40, 40),
675 + // 图标取图偏移量
676 + imageOffset: new AMap.Pixel(0, 0)
677 + }),
707 position: new AMap.LngLat(120.587506, 31.313787), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 678 position: new AMap.LngLat(120.587506, 31.313787), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
679 + anchor:'bottom-center',
680 + offset: new AMap.Pixel(0, 0)
681 + });
682 + marker1.setLabel({
683 + direction:'right',
684 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
685 + content: "<div class='info'>起点</div>", //设置文本标注内容
708 }); 686 });
709 var marker2 = new AMap.Marker({ 687 var marker2 = new AMap.Marker({
688 + icon: new AMap.Icon({
689 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
690 + size: new AMap.Size(40, 40),
691 + // 图标所用图片大小
692 + imageSize: new AMap.Size(40, 40),
693 + // 图标取图偏移量
694 + imageOffset: new AMap.Pixel(0, 0)
695 + }),
710 position: new AMap.LngLat(120.586825, 31.314543), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] 696 position: new AMap.LngLat(120.586825, 31.314543), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
697 + anchor:'bottom-center',
698 + offset: new AMap.Pixel(0, 0)
699 + });
700 + marker2.setLabel({
701 + direction:'right',
702 + offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
703 + content: "<div class='info'>终点</div>", //设置文本标注内容
711 }); 704 });
712 // 新增逃生路线标记 705 // 新增逃生路线标记
713 this.safe_route = [marker1, marker2] 706 this.safe_route = [marker1, marker2]
...@@ -718,16 +711,32 @@ export default { ...@@ -718,16 +711,32 @@ export default {
718 this.map.remove(this.safe_route); 711 this.map.remove(this.safe_route);
719 }, 712 },
720 setTitleLayer() { 713 setTitleLayer() {
721 - //该demo可模拟水印效果
722 var layer = new AMap.TileLayer.Flexible({ 714 var layer = new AMap.TileLayer.Flexible({
723 - cacheSize: 30, 715 + cacheSize: 50,
724 opacity: 1, 716 opacity: 1,
725 zIndex: 100, 717 zIndex: 100,
726 createTile: function (x, y, z, success, fail) { 718 createTile: function (x, y, z, success, fail) {
727 - // if ((x + y) % 3) { 719 + if (z === 17) {
728 - // fail(); 720 + if (x < 109439 || x > 109441) {
729 - // return; 721 + fail()
730 - // } 722 + return;
723 + }
724 + if (y < 53519 || y > 53521) {
725 + fail()
726 + return;
727 + }
728 + }
729 + if (z === 18) {
730 + if (x < 218879 || x > 218882) {
731 + fail()
732 + return;
733 + }
734 + if (y < 107039 || y > 107042) {
735 + fail()
736 + return;
737 + }
738 + }
739 + console.warn(z);
731 740
732 var img = document.createElement('img'); 741 var img = document.createElement('img');
733 img.onload = function () { 742 img.onload = function () {
...@@ -738,7 +747,6 @@ export default { ...@@ -738,7 +747,6 @@ export default {
738 fail() 747 fail()
739 }; 748 };
740 749
741 - // img.src = `fileHost + '/tilefile/' + zoom + '/${x} + '_' + ${y} + '.png`;
742 img.src = `images/tiles/${z}/${x}_${y}.jpg` 750 img.src = `images/tiles/${z}/${x}_${y}.jpg`
743 } 751 }
744 }); 752 });
...@@ -746,7 +754,7 @@ export default { ...@@ -746,7 +754,7 @@ export default {
746 this.map.addLayer(layer); 754 this.map.addLayer(layer);
747 755
748 // Canvas作为切片 756 // Canvas作为切片
749 - var layer = new AMap.TileLayer.Flexible({ 757 + var layer1 = new AMap.TileLayer.Flexible({
750 // tileSize: 128, 758 // tileSize: 128,
751 cacheSize: 300, 759 cacheSize: 300,
752 zIndex: 200, 760 zIndex: 200,
...@@ -766,7 +774,7 @@ export default { ...@@ -766,7 +774,7 @@ export default {
766 } 774 }
767 }); 775 });
768 776
769 - layer.setMap(this.map); 777 + layer1.setMap(this.map);
770 778
771 // 只显示相应区域，移动会回到选定范围 779 // 只显示相应区域，移动会回到选定范围
772 // this.lockMapBounds() 780 // this.lockMapBounds()
...@@ -775,21 +783,31 @@ export default { ...@@ -775,21 +783,31 @@ export default {
775 setSpotLayer() { // 设置景点图层 783 setSpotLayer() { // 设置景点图层
776 this.removeToiletLayer() 784 this.removeToiletLayer()
777 this.removeActivityLayer() 785 this.removeActivityLayer()
786 + this.removePublicLayer()
778 // 加载地图标记 787 // 加载地图标记
779 this.loadSpotMaker() 788 this.loadSpotMaker()
780 }, 789 },
781 setToiletLayer() { // 设置景点图层 790 setToiletLayer() { // 设置景点图层
782 this.removeSpotLayer() 791 this.removeSpotLayer()
783 this.removeActivityLayer() 792 this.removeActivityLayer()
793 + this.removePublicLayer()
784 // 加载厕所标记 794 // 加载厕所标记
785 this.loadToiletMaker() 795 this.loadToiletMaker()
786 }, 796 },
787 setActivityLayer() { // 设置活动图层 797 setActivityLayer() { // 设置活动图层
788 this.removeSpotLayer(); 798 this.removeSpotLayer();
789 this.removeToiletLayer() 799 this.removeToiletLayer()
800 + this.removePublicLayer()
790 // 加载活动标记 801 // 加载活动标记
791 this.loadActivityMaker() 802 this.loadActivityMaker()
792 }, 803 },
804 + setPublicLayer() { // 设置公共图层
805 + this.removeSpotLayer();
806 + this.removeToiletLayer()
807 + this.removeActivityLayer()
808 + // 加载公共标记
809 + this.loadPublicMaker()
810 + },
793 removeSpotLayer() { // 删除景点标记 811 removeSpotLayer() { // 删除景点标记
794 this.map.remove(this.spotInfo); 812 this.map.remove(this.spotInfo);
795 }, 813 },
...@@ -799,6 +817,9 @@ export default { ...@@ -799,6 +817,9 @@ export default {
799 removeActivityLayer() { // 删除活动标记 817 removeActivityLayer() { // 删除活动标记
800 this.map.remove(this.activityInfo); 818 this.map.remove(this.activityInfo);
801 }, 819 },
820 + removePublicLayer() { // 删除公共标记
821 + this.map.remove(this.publicInfo);
822 + },
802 // 限制地图范围 823 // 限制地图范围
803 lockMapBounds() { 824 lockMapBounds() {
804 // var bounds = this.map.getBounds(); 825 // var bounds = this.map.getBounds();
...@@ -821,7 +842,9 @@ export default { ...@@ -821,7 +842,9 @@ export default {
821 zoom; 842 zoom;
822 console.warn(text); 843 console.warn(text);
823 // 点击空白处 关闭弹框 844 // 点击空白处 关闭弹框
845 + if (this.showInfoWindow) {
824 this.$refs['infoWindow'].close() 846 this.$refs['infoWindow'].close()
847 + }
825 }, 848 },
826 setWalkRoute() { 849 setWalkRoute() {
827 //步行导航 850 //步行导航
...@@ -847,17 +870,20 @@ export default { ...@@ -847,17 +870,20 @@ export default {
847 this.walk_route.clear(); 870 this.walk_route.clear();
848 this.show_walk_route = true; 871 this.show_walk_route = true;
849 }, 872 },
850 - setNavLayer(index) { // 选择地图图层显示 873 + setNavLayer({ key }, index) { // 选择地图图层显示
851 this.isActive = index; 874 this.isActive = index;
852 - if (index === 0) { 875 + if (key === 'spot') {
853 this.setSpotLayer() 876 this.setSpotLayer()
854 } 877 }
855 - if (index === 1) { 878 + if (key === 'toilet') {
856 this.setToiletLayer() 879 this.setToiletLayer()
857 } 880 }
858 - if (index === 2) { 881 + if (key === 'activity') {
859 this.setActivityLayer() 882 this.setActivityLayer()
860 } 883 }
884 + if (key === 'public') {
885 + this.setPublicLayer()
886 + }
861 }, 887 },
862 handleSafeRoute(status) { // 打开/关闭逃生路线线 888 handleSafeRoute(status) { // 打开/关闭逃生路线线
863 if (status) { 889 if (status) {
...@@ -917,9 +943,10 @@ export default { ...@@ -917,9 +943,10 @@ export default {
917 .amap-marker-label { 943 .amap-marker-label {
918 padding: 0.25rem 0.5rem; 944 padding: 0.25rem 0.5rem;
919 width: auto; 945 width: auto;
920 - border: 1px solid #72400b; 946 + border: none;
921 border-radius: 2px; 947 border-radius: 2px;
922 - background: rgba(255, 255, 255, 0.8); 948 + background: rgba(86, 65, 23, 0.8);
949 + color: white;
923 } 950 }
924 951
925 .amap-marker { 952 .amap-marker {
......