首页 / 浏览问题 / 移动GIS / 问题详情
矢量图形层使用Graphics出数据点击点位
7EXP 2020年05月27日
贴上代码
      addLayer() {
          layer2 = new SuperMap.Layer.TiledDynamicRESTLayer("街道", url2,{transparent: true, cacheEnabled: true});
          layer2.events.on({"layerInitialized": this.addLayer3});
          graphicLayer = new SuperMap.Layer.Graphics("Can Select Graphic Layer",null,{hitDetection:true});
      },

    addLayer3() {
        //将Layer图层加载到Map对象上
        var aa = [layer,layer2,graphicLayer]
        this.map.addLayers(aa);
        //出图,map.setCenter函数显示地图
        this.map.setCenter(new SuperMap.LonLat(0, 0), 0);
    },

  addData() {
          //symbol相关属性 填充色、边框颜色、半径、
          var fillColors = ['rgba(176,61,35,1)'];
          var strokeColors = ['rgba(145,43,20,1)'];
          var radius = [5];
          var sybolCount = fillColors.length;
          var symbols = [];
          for (var i = 0; i < fillColors.length; i++) {
              for (var j = 0; j < radius.length; j++) {
                  //circle  symbol
                  symbols.push(new SuperMap.Style.Circle({
                      radius: radius[j],
                      fill: new SuperMap.Style.Fill({
                          color: fillColors[i]
                      }),
                      stroke: new SuperMap.Style.Stroke({
                          color: strokeColors[i]
                      })
                  }));
                  symbols.push(new SuperMap.Style.RegularShape({
                      pointsLength: 5,
                      radius: radius[j],
                      radius1: radius[j] * 0.6,
                      fill: new SuperMap.Style.Fill({
                          color: fillColors[i]
                      }),
                      stroke: new SuperMap.Style.Stroke({
                          color: strokeColors[i]
                      })
                  }));
                  console.log('图片',symbols)
              }
          }
          const size = new SuperMap.Size(44, 33);
          const offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
          const icon = new SuperMap.Icon('http://localhost:8767/static/img/zb.740cace6.png', size, offset);
        var total, t1, t2;
        var e = 10000000;
        graphicLayer.removeAllGraphics();
        var xl = [{len:122,lon:38,id:1},
                 {len:99,lon:39,id:2}]
        var total = xl.length;
        var points = [];
        for (var i = 0; i < total; i++) {
            var point = new SuperMap.Geometry.Point(xl[i].len,xl[i].lon);
            var pointVector = new SuperMap.Graphic(point);
            pointVector.style = {
                image: symbols[i % sybolCount]
            };
            points.push(pointVector)
        }
        graphicLayer.addGraphics(points);
    }

目前已经实现底图->图层->矢量图层循环标点,接下来想获取矢量图层点击单个点获取点位的经纬度,查了很多方法没解决,求助QAQ,最好是有damo可以看

1个回答

您好

        selectGraphic = new SuperMap.Control.SelectGraphic(graphicLayer, {
            onSelect: onGraphicSelect,
            hover: false,
            onUnSelect: onUnGraphicSelect
        });
    }

    function onGraphicSelect(result, evt) {
        var image = graphicLayer.style.image;

        var pixel = map.getPixelFromLonLat(new SuperMap.LonLat(result.geometry.x, result.geometry.y));
        var evtPixel = evt.xy;
        //点击点与中心点的角度
        var angle = (Math.atan2(evtPixel.y - pixel.y, evtPixel.x - pixel.x)) / Math.PI * 180;
        angle = angle > 0 ? angle : 360 + angle;
        //确定扇叶
        var index = Math.ceil(angle / (image.angle + image.spaceAngle));
        addPopup(result, evt, index);
    }
3,352EXP 2020年05月27日
...