高德地图 Web JS API UI组件示例学习笔记（2）——矢量标注

自定义路径

使用SvgMarker自定义路径。

AMapUI.load(['lib/utils', 'ui/overlay/SvgMarker'], function (utils, SvgMarker) {
      if (!SvgMarker.supportSvg) {
        alert('当前环境不支持SVG');
      }
      function MyCustomPathShape(opts) {
        opts = utils.extend({
          //定义原始路径
          sourcePath: {
            //路径， 这里是一个简单的沙漏形状
            path: 'M0 0 L 10 0 L 0 10 L 10 10 z',
            //原始宽度
            width: 10,
            //原始高度
            height: 10
          }
        }, opts);

        MyCustomPathShape.__super__.constructor.call(this, opts);
      }

      //继承PathShape
      utils.inherit(MyCustomPathShape, SvgMarker.Shape.PathShape);

      //覆写部分方法
      utils.extend(MyCustomPathShape.prototype, {
        //针对定位基点的偏移，比如当前path的定位点在中心位置
        getOffset: function () {
          return [-this.getWidth() / 2, -this.getHeight() / 2];
        },
        //图形的视觉中心点，该位置有助于获取合适的文字位置
        getCenter: function () {
          return [this.getWidth() / 2, this.getHeight() / 2];
        }
      });

      var shape = new MyCustomPathShape({
          width: 60,
          strokeWidth: 2,
          strokeColor: 'blue',
          fillColor: 'green'
        }),
        shapeCenter = shape.getCenter();

      var marker = new SvgMarker(
        shape, {
          iconLabel: {
            innerHTML: 'A',
            //自定义文字样式
            style: {
              fontSize: '20px',
              top: shapeCenter[1] - 12 + 'px',
              left: shapeCenter[0] + 10 + 'px',
              right: 'auto',
              color: 'red'
            }
          },
          map: map,
          position: map.getCenter(),
          showPositionPoint: true
        });
    });

自定义形状

使用SvgMarker自定义形状。

AMapUI.load(['lib/utils', 'ui/overlay/SvgMarker'], function (utils, SvgMarker) {

      if (!SvgMarker.supportSvg) {
        alert('当前环境不支持SVG');
      }

      function MyCustomShape(opts) {

        opts = utils.extend({
          width: 100,
          height: 100,
          strokeWidth: 10,
          strokeColor: 'red'
        }, opts);

        MyCustomShape.__super__.constructor.call(this, opts);
      }

      //继承BaseShape
      utils.inherit(MyCustomShape, SvgMarker.Shape.BaseShape);

      //覆写部分方法
      utils.extend(MyCustomShape.prototype, {

        //返回svg的内部构造，
        getInnerHTML: function (params) {

          var p1 = '0,0',
            p2 = '0,' + params.height,
            p3 = params.width + ',' + params.height / 2;

          // 一个指向右侧的三角形
          return '<polygon points="' + [p1, p2, p3].join(' ') + '" ' +
            this.buildAttrStr(params, ['fill']) + '></polygon>';
        },
        getOffset: function () {
          //定位点在右侧中部位置，左上角的偏移:
          return [-this.getWidth(), -this.getHeight() / 2];
        }
      });

      var shape = new MyCustomShape({
        width: 100,
        height: 50,
        fill: 'green'
      });

      var marker = new SvgMarker(shape, {
        map: map,
        position: map.getCenter(),
        showPositionPoint: true
      });
    });

使用Iconfont（重点）

使用SvgMarker，将Iconfont作为图标。

<!-- 预加载iconfont的js -->
  <script src="./my-iconfont2.js?v=1.0.11"></script>

 AMapUI.loadUI(['overlay/SvgMarker'], function (SvgMarker) {
      if (!SvgMarker.supportSvg) {
        alert('当前环境不支持SVG');
      }
      var lngLats = getGridLngLats(map.getCenter(), 2, 4, 200, 200);
      var marker1 = new SvgMarker(
        new SvgMarker.Shape.IconFont({
          // 参见 symbol引用, http://www.iconfont.cn/plus/help/detail?helptype=code
          symbolJs: './my-iconfont.js',
          icon: 'icon-diansanmarker',
          size: 100,
          offset: [0, -100],
          fillColor: 'green'
        }), {
          map: map,
          position: lngLats[0],
          showPositionPoint: true
        });
    });