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 175 additions and 66 deletions
<!--
* @Date: 2023-05-31 16:10:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-14 15:58:02
* @LastEditTime: 2023-07-17 22:06:14
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
......@@ -18,6 +18,7 @@
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script type="text/javascript">
// window.forceWebGL = true;
window._AMapSecurityConfig = {
securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-17 11:21:15
* @LastEditTime: 2023-07-17 22:11:32
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -293,7 +293,7 @@ export default {
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
showBuildingBlock: false, // 是否展示地图 3D 楼块
zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
zooms: [17, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
showLabel: true, // 是否展示地图文字和 POI 信息
zoom: 18, // 设置地图显示的缩放级别
pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
......@@ -339,48 +339,99 @@ export default {
} else {
marker_icon = entity_info[i].icon;
}
var marker = new AMap.ElasticMarker({
// var marker = new AMap.ElasticMarker({
// position: entity_info[i].position,
// zooms: [17, 19],
// styles: [{
// icon: {
// img: marker_icon, // 标记点图标
// size: [28, 28], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 1.4, // 最大放大比例
// minScale: 0.8 // 最小放大比例
// },
// label: {
// content: entity_info[i].name,
// position: 'TM',
// // position: 'BM',
// // offset: new AMap.Pixel(0, 10),
// minZoom: 18
// }
// }, {
// icon: {},
// label: {}
// }],
// zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
// });
// if (clickListener) {
// marker.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = marker.on('click', (e) => {
// // 不同弹框类型
// if (entity_info[i].window_type === 'normal') {
// this.positionMarker(entity_info[i])
// } else if(entity_info[i].window_type === 'lite') {
// this.positionLiteMarker(entity_info[i])
// } else if (entity_info[i].window_type === 'warn') {
// this.positionWarnMarker(entity_info[i])
// }
// })
// // marker合集
// this.markerSum.push(marker);
// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
position: entity_info[i].position,
zooms: [17, 19],
styles: [{
opacity: 1,
zIndex: 2,
opacity: 0.9,
// rank: 10,
icon: {
img: marker_icon, // 标记点图标
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
image: marker_icon,
anchor: 'bottom-center',
size: [36, 36],
},
label: {
text: {
zooms: [18, 20],
content: entity_info[i].name,
position: 'TM',
// position: 'BM',
// offset: new AMap.Pixel(0, 10),
minZoom: 18
direction: 'top',
offset: [0, 5],
style: {
padding: [10, 10],
fontSize: 14,
fillColor: '#fff',
strokeWidth: 0,
backgroundColor: '#965f13',
borderWidth: 0,
}
}
}, {
icon: {},
label: {}
}],
zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
labelMarker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
var clickListener = labelMarker.on('click', (e) => {
// 不同弹框类型
if (entity_info[i].window_type === 'normal') {
this.positionMarker(entity_info[i])
} else if(entity_info[i].window_type === 'lite') {
} else if (entity_info[i].window_type === 'lite') {
this.positionLiteMarker(entity_info[i])
} else if (entity_info[i].window_type === 'warn') {
this.positionWarnMarker(entity_info[i])
}
})
// marker合集
this.markerSum.push(marker);
// 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
// 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new AMap.LabelsLayer({
collision: true,
});
// // 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
// this.map.add(labelsLayer);
this.markerSum.push(labelsLayer);
})
this.map.add(this.markerSum);
},
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-17 17:52:28
* @LastEditTime: 2023-07-17 22:18:51
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 地图主体页面
-->
......@@ -254,9 +254,13 @@ export default {
// 设置贴片地图
this.setTitleLayer();
// 每隔5分钟刷新地图
setInterval(() => {
this.map.resize();
}, 1000 * 60 * 5);
// setInterval(() => {
// this.map.resize();
// }, 1000 * 60 * 1);
// setInterval(() => {
// this.map.resize();
// console.warn(0);
// }, 1000 * 10);
// wx.getLocation({
// type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
// success: function (res) {
......@@ -323,6 +327,9 @@ export default {
features: ['bg', 'road'], // 设置地图上显示的元素种类
animateEnable: false, // 地图平移过程中是否使用动画
resizeEnable: true,
// WebGLParams: {
// preserveDrawingBuffer: true
// }
});
// 添加地图点击事件
this.map.on("click", this.showInfoClick);
......@@ -355,48 +362,99 @@ export default {
} else {
marker_icon = entity_info[i].icon;
}
var marker = new AMap.ElasticMarker({
// var marker = new AMap.ElasticMarker({
// position: entity_info[i].position,
// zooms: [17, 20],
// styles: [{
// icon: {
// // img: marker_icon, // 标记点图标
// img: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 标记点图标
// size: [28, 28], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 1.4, // 最大放大比例
// minScale: 0.8 // 最小放大比例
// },
// label: {
// content: entity_info[i].name,
// position: 'TM',
// // position: 'BM',
// // offset: new AMap.Pixel(0, 10),
// minZoom: 18
// }
// }, {
// icon: {},
// label: {}
// }],
// zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
// });
// if (clickListener) {
// marker.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = marker.on('click', (e) => {
// // 不同弹框类型
// if (entity_info[i].window_type === 'normal') {
// this.positionMarker(entity_info[i])
// } else if(entity_info[i].window_type === 'lite') {
// this.positionLiteMarker(entity_info[i])
// } else if (entity_info[i].window_type === 'warn') {
// this.positionWarnMarker(entity_info[i])
// }
// })
// // marker合集
// this.markerSum.push(marker);
// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
position: entity_info[i].position,
zooms: [17, 20],
styles: [{
opacity: 1,
zIndex: 2,
opacity: 0.9,
icon: {
img: marker_icon, // 标记点图标
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
scaleFactor: 2, // 地图放大一级的缩放比例系数
maxScale: 1.4, // 最大放大比例
minScale: 0.8 // 最小放大比例
image: marker_icon,
anchor: 'bottom-center',
size: [36, 36],
},
label: {
text: {
zooms: [18, 20],
content: entity_info[i].name,
position: 'TM',
// position: 'BM',
// offset: new AMap.Pixel(0, 10),
minZoom: 18
direction: 'top',
offset: [0 , 5],
style: {
padding: [10, 10],
fontSize: 14,
fillColor: '#fff',
strokeWidth: 0,
backgroundColor: '#965f13',
borderWidth: 0,
}
}
}, {
icon: {},
label: {}
}],
zoomStyleMapping: entity_info[i].zoom ? entity_info[i].zoom : zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
labelMarker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
var clickListener = labelMarker.on('click', (e) => {
// 不同弹框类型
if (entity_info[i].window_type === 'normal') {
this.positionMarker(entity_info[i])
} else if(entity_info[i].window_type === 'lite') {
} else if (entity_info[i].window_type === 'lite') {
this.positionLiteMarker(entity_info[i])
} else if (entity_info[i].window_type === 'warn') {
this.positionWarnMarker(entity_info[i])
}
})
// marker合集
this.markerSum.push(marker);
// 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
// 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new AMap.LabelsLayer({
collision: true,
});
// // 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
// this.map.add(labelsLayer);
this.markerSum.push(labelMarker);
})
this.map.add(this.markerSum);
},
......@@ -680,15 +738,15 @@ export default {
},
// 限制地图范围
// lockMapBounds() {
// // var bounds = this.map.getBounds();
// var myBounds = new AMap.Bounds(
// [120.583246, 31.31645],
// [120.589973, 31.311949]
// );
lockMapBounds() {
// var bounds = this.map.getBounds();
var myBounds = new AMap.Bounds(
[120.583246, 31.31645],
[120.589973, 31.311949]
);
// this.map.setLimitBounds(myBounds);
// },
this.map.setLimitBounds(myBounds);
},
showInfoClick(e) {
// console.log(e);
var zoom = this.map.getZoom(); //获取当前地图级别
......@@ -1164,4 +1222,3 @@ export default {
font-size: 0.8rem;
}
</style>
@/common/map_data
......