<!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 }); var loca = new Loca.Container({ map: map, }); 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\') }); } }); </script></body></html>
