当前位置：首页 > news >正文

高德地图 loca 实现点线的显示和点击

news 2025/7/26 11:06:49

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LineLayer点击事件修复</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.info-panel {position: absolute;top: 20px;left: 20px;background: rgba(255, 255, 255, 0.9);padding: 15px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);z-index: 1000;max-width: 300px;}.info-panel h3 {margin-top: 0;color: #1e88e5;border-bottom: 2px solid #1e88e5;padding-bottom: 8px;}.status {margin-top: 15px;padding: 10px;background: #f5f5f5;border-radius: 4px;font-family: monospace;}.legend {display: flex;flex-direction: column;margin-top: 15px;}.legend-item {display: flex;align-items: center;margin-bottom: 5px;}.legend-color {width: 20px;height: 20px;margin-right: 10px;border-radius: 3px;}.highlight {background-color: #fffde7;padding: 8px;border-radius: 4px;margin: 10px 0;border-left: 4px solid #ffc107;}</style>
</head><body><div id="map"></div><script>window._AMapSecurityConfig = {securityJsCode: "84015322dbb3238d2df498dcee01b7e4",};</script><script src="https://webapi.amap.com/maps?v=2.0&key=4965439acfec1d137ea74df01dc2cdf1"></script><script src="https://webapi.amap.com/loca?v=2.0.0&key=4965439acfec1d137ea74df01dc2cdf1"></script><script>// 初始化地图var map = new AMap.Map('map', {zoom: 11,center: [116.397428, 39.90923],viewMode: '3D',pitch: 45, // 倾斜角度rotation: 15 // 旋转角度});// 创建Loca容器var loca = new Loca.Container({map: map,});// 创建LineLayer - 关键修复1：启用交互var lineLayer = new Loca.LineLayer({loca: loca,zooms: [2, 22],zIndex: 100,visible: true,opacity: 1,});// 准备测试数据var lineData = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"id": "line1","name": "长安街","color": "#FF0000"},"geometry": {"type": "LineString","coordinates": [[116.30, 39.90],[116.40, 39.90],[116.45, 39.91]]}},{"type": "Feature","properties": {"id": "line2","name": "北三环","color": "#00FF00"},"geometry": {"type": "LineString","coordinates": [[116.35, 39.95],[116.40, 39.96],[116.45, 39.95],[116.50, 39.94]]}},{"type": "Feature","properties": {"id": "line3","name": "西直门大街","color": "#2196F3"},"geometry": {"type": "LineString","coordinates": [[116.33, 39.93],[116.38, 39.94],[116.42, 39.93]]}}]};// 设置数据源var source = new Loca.GeoJSONSource({data: lineData});lineLayer.setSource(source);// 设置样式lineLayer.setStyle({lineWidth: function (index, feature) {return 14; // 增加线宽，更容易点击},color: function (index, feature) {return feature.properties.color || '#3388FF';},opacity: 0.9,selectStyle: {lineWidth: 20, // 选中时线更宽color: '#FFFF00' // 选中时颜色变化}});// 添加到地图并渲染loca.add(lineLayer);map.on('click', function (event) {console.log('lineLayer ', lineLayer.queryFeature([event.pixel.x, event.pixel.y]));});var labelsLayer = (window.labelsLayer = new Loca.LabelsLayer({zooms: [10, 20],}));var markerSource = new Loca.GeoJSONSource({data: {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "高陆通充电站(文津国际公寓)","address": "中关村东路1号院5号楼"},"geometry": {"type": "Point","coordinates": [116.32697,39.993193]}}]}});labelsLayer.setSource(markerSource);labelsLayer.setStyle({icon: {type: 'image',image: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/charging_pile.png',size: [48, 75],anchor: 'center',},text: {// 每项配置都可使用回调函数来动态配置content: (index, feat) => {return feat.properties.name;},style: {fontSize: 12,fontWeight: 'normal',fillColor: '#5CDE8E',strokeColor: '#000',strokeWidth: 2,},direction: 'bottom',},extData: (index, feat) => {return feat.properties;},});loca.add(labelsLayer);labelsLayer.on('complete', () => {var normalMarker = new AMap.Marker({offset: [70, -15],});var labelMarkers = labelsLayer.getLabelsLayer().getAllOverlays();for (let marker of labelMarkers) {marker.on('click', (e) => {var position = e.data.data && e.data.data.position;console.log('点击了marker')// if (position) {//     normalMarker.setContent(//         '<div class="amap-info-window">地址：' + marker.getExtData().address +//         '</div>',//     );//     normalMarker.setPosition(position);//     map.add(normalMarker);// }});}});</script>
</body></html>