Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
85c1803f 1 parent b4861783

标记类型调整，渲染到地图上的方式调整

Inline Side-by-side
Showing 3 changed files with 181 additions and 72 deletions
1 <!-- 1 <!--
2 * @Date: 2023-05-31 16:10:33 2 * @Date: 2023-05-31 16:10:33
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-14 15:58:02 4 + * @LastEditTime: 2023-07-17 22:06:14
5 * @FilePath: /map-demo/index.html 5 * @FilePath: /map-demo/index.html
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 <div id="app"></div> 18 <div id="app"></div>
19 <script type="module" src="/src/main.js"></script> 19 <script type="module" src="/src/main.js"></script>
20 <script type="text/javascript"> 20 <script type="text/javascript">
21 + // window.forceWebGL = true;
21 window._AMapSecurityConfig = { 22 window._AMapSecurityConfig = {
22 securityJsCode:'8602057c4c8dae5bed9a240c0582c46f', 23 securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
23 } 24 }
......
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-07-17 11:21:15 4 + * @LastEditTime: 2023-07-17 22:11:32
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -293,7 +293,7 @@ export default { ...@@ -293,7 +293,7 @@ export default {
293 showIndoorMap: false, 293 showIndoorMap: false,
294 defaultCursor: 'pointer', // 地图默认鼠标样式 294 defaultCursor: 'pointer', // 地图默认鼠标样式
295 showBuildingBlock: false, // 是否展示地图 3D 楼块 295 showBuildingBlock: false, // 是否展示地图 3D 楼块
296 - zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30] 296 + zooms: [17, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
297 showLabel: true, // 是否展示地图文字和 POI 信息 297 showLabel: true, // 是否展示地图文字和 POI 信息
298 zoom: 18, // 设置地图显示的缩放级别 298 zoom: 18, // 设置地图显示的缩放级别
299 pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。 299 pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
...@@ -339,48 +339,99 @@ export default { ...@@ -339,48 +339,99 @@ export default {
339 } else { 339 } else {
340 marker_icon = entity_info[i].icon; 340 marker_icon = entity_info[i].icon;
341 } 341 }
342 - var marker = new AMap.ElasticMarker({ 342 + // var marker = new AMap.ElasticMarker({
343 + // position: entity_info[i].position,
344 + // zooms: [17, 19],
345 + // styles: [{
346 + // icon: {
347 + // img: marker_icon, // 标记点图标
348 + // size: [28, 28], // 可见区域的大小
349 + // anchor: 'bottom-center', // 锚点
350 + // fitZoom: 14, // 最合适的级别
351 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
352 + // maxScale: 1.4, // 最大放大比例
353 + // minScale: 0.8 // 最小放大比例
354 + // },
355 + // label: {
356 + // content: entity_info[i].name,
357 + // position: 'TM',
358 + // // position: 'BM',
359 + // // offset: new AMap.Pixel(0, 10),
360 + // minZoom: 18
361 + // }
362 + // }, {
363 + // icon: {},
364 + // label: {}
365 + // }],
366 + // zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
367 + // });
368 + // if (clickListener) {
369 + // marker.off('click', clickListener)
370 + // }
371 + // // 绑定景点的点击事件 - 文字出现才能触发
372 + // var clickListener = marker.on('click', (e) => {
373 + // // 不同弹框类型
374 + // if (entity_info[i].window_type === 'normal') {
375 + // this.positionMarker(entity_info[i])
376 + // } else if(entity_info[i].window_type === 'lite') {
377 + // this.positionLiteMarker(entity_info[i])
378 + // } else if (entity_info[i].window_type === 'warn') {
379 + // this.positionWarnMarker(entity_info[i])
380 + // }
381 + // })
382 + // // marker合集
383 + // this.markerSum.push(marker);
384 + // 创建一个 LabelMarker 实例
385 + var labelMarker = new AMap.LabelMarker({
343 position: entity_info[i].position, 386 position: entity_info[i].position,
344 - zooms: [17, 19], 387 + opacity: 1,
345 - styles: [{ 388 + zIndex: 2,
346 - icon: { 389 + opacity: 0.9,
347 - img: marker_icon, // 标记点图标 390 + // rank: 10,
348 - size: [28, 28], // 可见区域的大小 391 + icon: {
349 - anchor: 'bottom-center', // 锚点 392 + image: marker_icon,
350 - fitZoom: 14, // 最合适的级别 393 + anchor: 'bottom-center',
351 - scaleFactor: 2, // 地图放大一级的缩放比例系数 394 + size: [36, 36],
352 - maxScale: 1.4, // 最大放大比例 395 + },
353 - minScale: 0.8 // 最小放大比例 396 + text: {
354 - }, 397 + zooms: [18, 20],
355 - label: { 398 + content: entity_info[i].name,
356 - content: entity_info[i].name, 399 + direction: 'top',
357 - position: 'TM', 400 + offset: [0, 5],
358 - // position: 'BM', 401 + style: {
359 - // offset: new AMap.Pixel(0, 10), 402 + padding: [10, 10],
360 - minZoom: 18 403 + fontSize: 14,
404 + fillColor: '#fff',
405 + strokeWidth: 0,
406 + backgroundColor: '#965f13',
407 + borderWidth: 0,
361 } 408 }
362 - }, { 409 + }
363 - icon: {},
364 - label: {}
365 - }],
366 - zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
367 }); 410 });
368 if (clickListener) { 411 if (clickListener) {
369 - marker.off('click', clickListener) 412 + labelMarker.off('click', clickListener)
370 } 413 }
371 // 绑定景点的点击事件 - 文字出现才能触发 414 // 绑定景点的点击事件 - 文字出现才能触发
372 - var clickListener = marker.on('click', (e) => { 415 + var clickListener = labelMarker.on('click', (e) => {
373 // 不同弹框类型 416 // 不同弹框类型
374 if (entity_info[i].window_type === 'normal') { 417 if (entity_info[i].window_type === 'normal') {
375 this.positionMarker(entity_info[i]) 418 this.positionMarker(entity_info[i])
376 - } else if(entity_info[i].window_type === 'lite') { 419 + } else if (entity_info[i].window_type === 'lite') {
377 this.positionLiteMarker(entity_info[i]) 420 this.positionLiteMarker(entity_info[i])
378 } else if (entity_info[i].window_type === 'warn') { 421 } else if (entity_info[i].window_type === 'warn') {
379 this.positionWarnMarker(entity_info[i]) 422 this.positionWarnMarker(entity_info[i])
380 } 423 }
381 }) 424 })
382 - // marker合集 425 + // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
383 - this.markerSum.push(marker); 426 + // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
427 + var labelsLayer = new AMap.LabelsLayer({
428 + collision: true,
429 + });
430 + // // 将 LabelMarker 实例添加到 LabelsLayer 上
431 + labelsLayer.add(labelMarker);
432 + // 将 LabelsLayer 添加到地图上
433 + // this.map.add(labelsLayer);
434 + this.markerSum.push(labelsLayer);
384 }) 435 })
385 this.map.add(this.markerSum); 436 this.map.add(this.markerSum);
386 }, 437 },
......
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-07-17 17:52:28 4 + * @LastEditTime: 2023-07-17 22:18:51
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
...@@ -254,9 +254,13 @@ export default { ...@@ -254,9 +254,13 @@ export default {
254 // 设置贴片地图 254 // 设置贴片地图
255 this.setTitleLayer(); 255 this.setTitleLayer();
256 // 每隔5分钟刷新地图 256 // 每隔5分钟刷新地图
257 - setInterval(() => { 257 + // setInterval(() => {
258 - this.map.resize(); 258 + // this.map.resize();
259 - }, 1000 * 60 * 5); 259 + // }, 1000 * 60 * 1);
260 + // setInterval(() => {
261 + // this.map.resize();
262 + // console.warn(0);
263 + // }, 1000 * 10);
260 // wx.getLocation({ 264 // wx.getLocation({
261 // type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' 265 // type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
262 // success: function (res) { 266 // success: function (res) {
...@@ -323,6 +327,9 @@ export default { ...@@ -323,6 +327,9 @@ export default {
323 features: ['bg', 'road'], // 设置地图上显示的元素种类 327 features: ['bg', 'road'], // 设置地图上显示的元素种类
324 animateEnable: false, // 地图平移过程中是否使用动画 328 animateEnable: false, // 地图平移过程中是否使用动画
325 resizeEnable: true, 329 resizeEnable: true,
330 + // WebGLParams: {
331 + // preserveDrawingBuffer: true
332 + // }
326 }); 333 });
327 // 添加地图点击事件 334 // 添加地图点击事件
328 this.map.on("click", this.showInfoClick); 335 this.map.on("click", this.showInfoClick);
...@@ -355,48 +362,99 @@ export default { ...@@ -355,48 +362,99 @@ export default {
355 } else { 362 } else {
356 marker_icon = entity_info[i].icon; 363 marker_icon = entity_info[i].icon;
357 } 364 }
358 - var marker = new AMap.ElasticMarker({ 365 + // var marker = new AMap.ElasticMarker({
366 + // position: entity_info[i].position,
367 + // zooms: [17, 20],
368 + // styles: [{
369 + // icon: {
370 + // // img: marker_icon, // 标记点图标
371 + // img: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 标记点图标
372 + // size: [28, 28], // 可见区域的大小
373 + // anchor: 'bottom-center', // 锚点
374 + // fitZoom: 14, // 最合适的级别
375 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
376 + // maxScale: 1.4, // 最大放大比例
377 + // minScale: 0.8 // 最小放大比例
378 + // },
379 + // label: {
380 + // content: entity_info[i].name,
381 + // position: 'TM',
382 + // // position: 'BM',
383 + // // offset: new AMap.Pixel(0, 10),
384 + // minZoom: 18
385 + // }
386 + // }, {
387 + // icon: {},
388 + // label: {}
389 + // }],
390 + // zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
391 + // });
392 + // if (clickListener) {
393 + // marker.off('click', clickListener)
394 + // }
395 + // // 绑定景点的点击事件 - 文字出现才能触发
396 + // var clickListener = marker.on('click', (e) => {
397 + // // 不同弹框类型
398 + // if (entity_info[i].window_type === 'normal') {
399 + // this.positionMarker(entity_info[i])
400 + // } else if(entity_info[i].window_type === 'lite') {
401 + // this.positionLiteMarker(entity_info[i])
402 + // } else if (entity_info[i].window_type === 'warn') {
403 + // this.positionWarnMarker(entity_info[i])
404 + // }
405 + // })
406 + // // marker合集
407 + // this.markerSum.push(marker);
408 + // 创建一个 LabelMarker 实例
409 + var labelMarker = new AMap.LabelMarker({
359 position: entity_info[i].position, 410 position: entity_info[i].position,
360 - zooms: [17, 20], 411 + opacity: 1,
361 - styles: [{ 412 + zIndex: 2,
362 - icon: { 413 + opacity: 0.9,
363 - img: marker_icon, // 标记点图标 414 + icon: {
364 - size: [28, 28], // 可见区域的大小 415 + image: marker_icon,
365 - anchor: 'bottom-center', // 锚点 416 + anchor: 'bottom-center',
366 - fitZoom: 14, // 最合适的级别 417 + size: [36, 36],
367 - scaleFactor: 2, // 地图放大一级的缩放比例系数 418 + },
368 - maxScale: 1.4, // 最大放大比例 419 + text: {
369 - minScale: 0.8 // 最小放大比例 420 + zooms: [18, 20],
370 - }, 421 + content: entity_info[i].name,
371 - label: { 422 + direction: 'top',
372 - content: entity_info[i].name, 423 + offset: [0 , 5],
373 - position: 'TM', 424 + style: {
374 - // position: 'BM', 425 + padding: [10, 10],
375 - // offset: new AMap.Pixel(0, 10), 426 + fontSize: 14,
376 - minZoom: 18 427 + fillColor: '#fff',
428 + strokeWidth: 0,
429 + backgroundColor: '#965f13',
430 + borderWidth: 0,
377 } 431 }
378 - }, { 432 + }
379 - icon: {},
380 - label: {}
381 - }],
382 - zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
383 }); 433 });
384 if (clickListener) { 434 if (clickListener) {
385 - marker.off('click', clickListener) 435 + labelMarker.off('click', clickListener)
386 } 436 }
387 // 绑定景点的点击事件 - 文字出现才能触发 437 // 绑定景点的点击事件 - 文字出现才能触发
388 - var clickListener = marker.on('click', (e) => { 438 + var clickListener = labelMarker.on('click', (e) => {
389 // 不同弹框类型 439 // 不同弹框类型
390 if (entity_info[i].window_type === 'normal') { 440 if (entity_info[i].window_type === 'normal') {
391 this.positionMarker(entity_info[i]) 441 this.positionMarker(entity_info[i])
392 - } else if(entity_info[i].window_type === 'lite') { 442 + } else if (entity_info[i].window_type === 'lite') {
393 this.positionLiteMarker(entity_info[i]) 443 this.positionLiteMarker(entity_info[i])
394 } else if (entity_info[i].window_type === 'warn') { 444 } else if (entity_info[i].window_type === 'warn') {
395 this.positionWarnMarker(entity_info[i]) 445 this.positionWarnMarker(entity_info[i])
396 } 446 }
397 }) 447 })
398 - // marker合集 448 + // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
399 - this.markerSum.push(marker); 449 + // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
450 + var labelsLayer = new AMap.LabelsLayer({
451 + collision: true,
452 + });
453 + // // 将 LabelMarker 实例添加到 LabelsLayer 上
454 + labelsLayer.add(labelMarker);
455 + // 将 LabelsLayer 添加到地图上
456 + // this.map.add(labelsLayer);
457 + this.markerSum.push(labelMarker);
400 }) 458 })
401 this.map.add(this.markerSum); 459 this.map.add(this.markerSum);
402 }, 460 },
...@@ -680,15 +738,15 @@ export default { ...@@ -680,15 +738,15 @@ export default {
680 738
681 }, 739 },
682 // 限制地图范围 740 // 限制地图范围
683 - // lockMapBounds() { 741 + lockMapBounds() {
684 - // // var bounds = this.map.getBounds(); 742 + // var bounds = this.map.getBounds();
685 - // var myBounds = new AMap.Bounds( 743 + var myBounds = new AMap.Bounds(
686 - // [120.583246, 31.31645], 744 + [120.583246, 31.31645],
687 - // [120.589973, 31.311949] 745 + [120.589973, 31.311949]
688 - // ); 746 + );
689 747
690 - // this.map.setLimitBounds(myBounds); 748 + this.map.setLimitBounds(myBounds);
691 - // }, 749 + },
692 showInfoClick(e) { 750 showInfoClick(e) {
693 // console.log(e); 751 // console.log(e);
694 var zoom = this.map.getZoom(); //获取当前地图级别 752 var zoom = this.map.getZoom(); //获取当前地图级别
...@@ -1164,4 +1222,3 @@ export default { ...@@ -1164,4 +1222,3 @@ export default {
1164 font-size: 0.8rem; 1222 font-size: 0.8rem;
1165 } 1223 }
1166 </style> 1224 </style>
1167 -@/common/map_data
......