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

高德三维地图航线航点弹出框zMarkerLayer点击事件

news 2025/8/30 5:34:06

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>航线航点测试</title><style>html,body,#container {border: 5px solid green;position: relative;z-index: 1; width: 100%;height: 100%;margin: 0;padding: 0;}.demo-title {position: absolute;top: 25px;left: 25px;z-index: 1;}h1 {font-size: 18px;margin: 0;color: rgb(180, 180, 190);}h3 {font-size: 12px;font-weight: normal;margin-top: 5px;color: rgb(150, 150, 150);}</style>
</head><body><div class="demo-title"><h1>线路图</h1><h3></h3></div><div id="container"></div><script>window._AMapSecurityConfig = {securityJsCode: "你的code",};</script><script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script><script src="https://webapi.amap.com/loca?v=2.0.0&key=你的key"></script><script>
var inputData = {"status": "success","points": [{"index": 1,"longitude": 121.259470890145,"latitude": 31.3509590222785,"height": 10},{"index": 2,"longitude": 121.259605237974,"latitude": 31.3514250433734,"height": 40},{"index": 3,"longitude": 121.261545188507,"latitude": 31.35619374205,"height": 80},{"index": 4,"longitude": 121.262986144278,"latitude": 31.3542162993821,"height": 98},{"index": 5,"longitude": 121.262449424281,"latitude": 31.3536406001238,"height": 120},{"index": 6,"longitude": 121.262101210685,"latitude": 31.3535090481822,"height": 120},{"index": 7,"longitude": 121.261741055496,"latitude": 31.3533729848151,"height": 99},{"index": 8,"longitude": 121.262581320918,"latitude": 31.3494144849756,"height": 120},{"index": 9,"longitude": 121.26300855848,"latitude": 31.3482346074638,"height": 50},{"index": 10,"longitude": 121.264391864566,"latitude": 31.3492260628762,"height": 120},{"index": 11,"longitude": 121.265963491038,"latitude": 31.3508363033524,"height": 60},{"index": 12,"longitude": 121.267569578638,"latitude": 31.3521428290905,"height": 120},{"index": 13,"longitude": 121.26723294241,"latitude": 31.3487053098256,"height": 120},{"index": 14,"longitude": 121.252960380694,"latitude": 31.3442371010429,"height": 1}]};// 转换函数function convertToCoordinates(data) {// 检查数据有效性if (data.status !== "success" || !data.points || !Array.isArray(data.points)) {throw new Error("无效的数据格式");}// 按index排序点const sortedPoints = [...data.points].sort((a, b) => a.index - b.index);// 转换为坐标格式return sortedPoints.map(point => [point.longitude,point.latitude,point.height]);}var map = new AMap.Map("container", {zoom: 16,mapStyle: "amap://styles/dark",viewMode: "3D",pitch: 50,center: [121.259605237974, 31.3514250433734],});var loca = new Loca.Container({map,zoom: map.getZoom()});// 创建一个线图层var lineLayer = new Loca.LineLayer({loca,});var lineCoordinates = convertToCoordinates(inputData);// 构造LineString GeoJSON数据var geo = new Loca.GeoJSONSource({data: {type: "FeatureCollection",features: [{type: "Feature",geometry: {type: "LineString",coordinates: lineCoordinates,},},],},});lineLayer.setSource(geo);lineLayer.setStyle( {color: "#1E88E5",lineWidth: 3,});lineLayer.render();// 绘制航点var features = inputData.points.map((point, index) => {		return {"type": "Feature","geometry": {"type": "Point","coordinates": [point.longitude, point.latitude, point.height]},"properties": {"index": point.index,"name": "第" + index + "航点","longitude": point.longitude, "latitude": point.latitude,   "height": point.height  ,"customCenter": [point.longitude, point.latitude],}}});var geoPointsData = {"type": "FeatureCollection","features": inputData.points.map(point => ({"type": "Feature","geometry": {"type": "Point","coordinates": [point.longitude, point.latitude, point.height]},"properties": {"CLASS_NAME": "ZMarker","customCenter": [point.longitude, point.latitude],"index": point.index, "height": point.height }}))}var geo = new Loca.GeoJSONSource({data: geoPointsData});var zMarkerLayer = new Loca.ZMarkerLayer({loca: loca,visible: true,interactive: true ,clickable: true})zMarkerLayer.setSource(geo);zMarkerLayer.setStyle({content: function (index, feat) {
//      '<div style="z-index: 9999; cursor: pointer; width: 100px; height: 100px; background: red; border: 2px solid yellow;"></div>'return ('<div style="z-index: 9999; cursor: point; width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_blue.png);"></div>');},unit: 'meter',rotation: 0,alwaysFront: false,zIndex: 1000,size: [100, 100],altitude: function (index, feat) {return feat.coordinates[2] - 25;},});zMarkerLayer.render();// //////////////////////////////////////////////////////////////////// 创建信息窗口实例var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -20), closeWhenClickMap: true,autoMove: true });		function test(e, feat){console.log(feat)const properties = feat.properties;console.log(properties)const longitude = properties.customCenter[0]const latitude = properties.customCenter[1]const height = properties.heightconst index = properties.index// 构造信息框内容const infoContent = `<div style="padding: 8px 12px; font-size: 12px; line-height: 1.8; border: 1px solid #eee; border-radius: 4px;">名称:第${index}航点<br>位置:${longitude}, ${latitude}<br>高度:${height}m</div>`;console.log(infoContent)// 设置信息窗口内容并在航点坐标处打开infoWindow.setContent(infoContent); // 绑定内容infoWindow.open(map, [longitude, latitude, height]); // 在点击的航点位置打开}		map.on('click', function (e) {var feat = zMarkerLayer.queryFeature(e.pixel.toArray());if(feat){test(e, feat)}  })
</script>
</body></html>

查看全文

http://www.xdnf.cn/news/1384921.html