1 个回答

找到解决方案了,使用的是高德api的SvgMarker,
效果:
image.png
代码如下:

     AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker) => {
        if (!SvgMarker.supportSvg) {
            //当前环境并不支持SVG,此时SvgMarker会回退到父类,即SimpleMarker
            alert('当前环境不支持SVG');
        }

        let Array = [
          {
           Shape:{height:60,width:20,fillColor:'red',id:'1'},
           mr:
          {
           zIndex: 120,title:"上石化边界卫六路站1",
           id:'1',
           position:[121.47567708984376, 31.22694067865231]
          },
           SvgMarker:
           [
            {height:130,width:20,zIndex: 110,position:[121.47567708984376, 31.22694067865231],fillColor:"yellow",id:'1'},
            {height:140,width:20,zIndex: 100,position:[121.47567708984376, 31.22694067865231],fillColor:"green",id:'1'}
           ]
          },
          {
           Shape:{height:60,width:20,fillColor:'green',id:'2'},
           mr:
          {
           zIndex: 120,title:"上石化边界卫六路站2",
           id:'2',
           position:[121.48567708984376, 31.22694067865231]
          },
           SvgMarker:
           [
            {height:130,width:20,zIndex: 110,position:[121.48567708984376, 31.22694067865231],fillColor:"blue",id:'2'},
            {height:140,width:20,zIndex: 100,position:[121.48567708984376, 31.22694067865231],fillColor:"pink",id:'2'}
           ]
          }
        ]

        for (let i = 0; i < Array.length; i++) {

          var Shape = new SvgMarker.Shape.SquarePin({
              height: Array[i].Shape.height, //高度
              data:Array[i].Shape.id,
              width: Array[i].Shape.width, //不指定,维持默认的宽高比
              fillColor: Array[i].Shape.fillColor, //填充色
              strokeWidth: 1, //描边宽度
              strokeColor: '#ccc', //描边颜色
          });

         let ShapeClick = new SvgMarker(Shape, {
            zIndex: Array[i].mr.zIndex,
            map: map,
            data:Array[i].mr.id,
            position: Array[i].mr.position,
            showPositionPoint: true,
            label: {
                    content: Array[i].mr.title,
                    offset: new AMap.Pixel(-50, 64),
            }
          });

          ShapeClick.on('click',this.ShapeClick)

          for (let j = 0; j < Array[i].SvgMarker.length; j++) {
           let n = new SvgMarker(new SvgMarker.Shape.SquarePin({
                height: Array[i].SvgMarker[j].height, //高度
                width: Array[i].SvgMarker[j].width,
                fillColor: Array[i].SvgMarker[j].fillColor
            }), {
                data:Array[i].SvgMarker[j].id,
                zIndex: Array[i].SvgMarker[j].zIndex,
                map: map,
                position: Array[i].SvgMarker[j].position,
                showPositionPoint: true
            });
            n.on('click',this.ShapeClick)
          }

        }
     });
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题