/** * 高德地图点标记绘制相关 */ import { map, AMap } from './index' var _massMarks = undefined export default { /** * 绘制海量点标记 * @param fDatas 完整监测数据 * @param _factor 当前展示的监测因子对象 */ drawMassMarks(fDatas, _factor, onClick) { if (_massMarks) { map.remove(_massMarks) _massMarks = undefined } const lnglats = fDatas.lnglats_GD var data = [] for (let i = 0; i < lnglats.length; i++) { data.push({ lnglat: lnglats[i], //点标记位置 name: `${fDatas.times[i]}
${_factor.factorName}: ${_factor.datas[i].factorData} mg/m³`, id: i }) } // 创建样式对象 var styleObject = { url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png', // url: './asset/mipmap/ic_up_white.png', // 图标地址 size: new AMap.Size(11, 11), // 图标大小 anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角 } var massMarks = new AMap.MassMarks(data, { zIndex: 5, // 海量点图层叠加的顺序 zooms: [15, 18], // 在指定地图缩放级别范围内展示海量点图层 style: styleObject // 设置样式对象 }) massMarks.on('click', (event) => { const i = event.data.id // 3. 自定义点击事件 onClick(i) }) var marker = new AMap.Marker({ content: ' ', map: map, offset: new AMap.Pixel(13, 12) }) var timeout massMarks.on('mouseover', (e) => { if (timeout) { clearTimeout(timeout) } marker.setPosition(e.data.lnglat) marker.setLabel({ content: e.data.name }) map.add(marker) timeout = setTimeout(() => { map.remove(marker) }, 2000) }) _massMarks = massMarks map.add(massMarks) }, createLabelMarks(img, dataList) { const layer = new AMap.LabelsLayer({ zooms: [3, 20], zIndex: 1000, // 开启标注避让,默认为开启,v1.4.15 新增属性 collision: true, // 开启标注淡入动画,默认为开启,v1.4.15 新增属性 animation: true }) map.add(layer) // var markers = []; for (var i = 0; i < dataList.length; i++) { const data = dataList[i] var curData = { name: data.sceneName, position: [data.longitude, data.latitude], zooms: [10, 20], opacity: 1, zIndex: 10, icon: { type: 'image', image: img, // clipOrigin: [14, 92], // clipSize: [50, 68], size: [30, 30], anchor: 'bottom-center', angel: 0, retina: true }, text: { content: data.sceneName, direction: 'top', offset: [0, -5], style: { fontSize: 16, fontWeight: 'normal', fillColor: '#fff', strokeColor: '#333', strokeWidth: 0, backgroundColor: '#122b54a9' } } } curData.extData = { index: i } var labelMarker = new AMap.LabelMarker(curData) // markers.push(labelMarker); layer.add(labelMarker) } return layer } }