arcgis api for js绘制箭头图

在这里插入图片描述

//人才需求箭头图
    rcxqToRcgy(data){
      const _this = this;
      let png = this.graduatPng
      if (_this.rcxqToRcgyLayer != "") {
        // console.log(123456);
        _this.rcxqToRcgyLayer.clear();
      }
      //如果传的data为[] 之前又有人才需求箭头流向图层 先清除图层 在return
      if (!data.length) return;
      esriLoader
        .loadModules([
          "esri/SpatialReference",
          "esri/graphic",
          "esri/geometry/Point",
          "esri/symbols/PictureMarkerSymbol",
          "esri/Color",
          "esri/symbols/TextSymbol",
          "esri/symbols/Font",
          "esri/symbols/SimpleLineSymbol",
          "esri/geometry/Polyline",
          "esri/symbols/SimpleMarkerSymbol",
        ])
        .then(
          async ([SpatialReference, Graphic, Point, PictureMarkerSymbol, Color, TextSymbol, Font, SimpleLineSymbol, Polyline, SimpleMarkerSymbol]) => {
            let [qyCoordX, qyCoordY] = this.qyCoord
            let qy_coord = _this.lonlattoWebMercator(qyCoordX, qyCoordY)
		    let zdPoint = new Point(
		       +_this.qyCoord[0],
		       +_this.qyCoord[1],
		       new SpatialReference({
		         wkid: EPSG
		       })
		     );
            data.forEach(item => {
              if (item.xc && item.yc) { //必须企业的坐标点不为空 才能联动画人才流向箭头
                let [itemXcoord, itemYcoord] = _this.lonlattoWebMercator(+item.xc, +item.yc)
                const point = new Point(
                  +item.xc,
                  +item.yc,
                  new SpatialReference({
                    wkid: EPSG
                  })
                );
                let heading = null;
                let {atan,PI} = Math
                //箭头
                if ((qy_coord[1] - itemYcoord) > 0) {
                  //不变换
                  heading = (atan((qy_coord[0] - itemXcoord) / (qy_coord[1] - itemYcoord)) / PI) * 180;
                } else {
                  //+180度
                  heading = 180.0 + (atan((qy_coord[0] - itemXcoord) / (qy_coord[1] - itemYcoord)) / PI) * 180;
                }
                var atr = {
                  "heading": heading
                };
                var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setOutline(new SimpleLineSymbol().setWidth(0.5));
                marker.setColor(new Color([160, 21, 247, 1]));
                marker.setAngle(heading + 180);
                marker.setSize("32");
                marker.setOffset(-32 * Math.sin(heading / 180 * PI), -28 * Math.cos(heading / 180 * PI));
                var graphic2 = new Graphic(zdPoint, marker, atr);
               

                //转换成平面坐标点
                let area_coord = _this.lonlattoWebMercator(+item.xc, +item.yc)
                //转换成经纬度
                let space_coord = _this.webMercator2lonlat(area_coord[0], area_coord[1])
                const point2 = new Point(
                  space_coord[0],
                  space_coord[1],
                  new SpatialReference({
                    wkid: EPSG
                  })
                );
                const pictureMarkerSymbol = new PictureMarkerSymbol(png, 25, 25);
                let graphic = new Graphic(point2, pictureMarkerSymbol);
                
                let polylineJson = {
                  "paths": [
                    [
                      [+item.xc, +item.yc],
                      [qyCoordX, qyCoordY]
                    ]
                  ],
                  "spatialReference": {
                    "wkid": EPSG
                  }
                };
                let polyline = new Polyline(polylineJson)
                let lineSymbol = new SimpleLineSymbol()
                lineSymbol.setColor(new Color([160, 21, 247, 1]));
                lineSymbol.setWidth(3);
                let lineGraphic = new Graphic(polyline, lineSymbol)

                // const textSymbol = new TextSymbol();
                const textSymbol = new TextSymbol({
                haloColor: [255, 255, 255],  //设置光晕的颜色
                haloSize: 1,  //设置字体光晕的大小
              });
                textSymbol.setText(
                  `${item.schname}`
                );
                textSymbol.setOffset(0, 20)
                textSymbol.setColor(new Color([160, 21, 247, 1]))
                textSymbol.setFont(
                  new Font("12px").setWeight(Font.WEIGHT_BOLD))
                const textGraphic = new Graphic(point, textSymbol)

                _this.rcxqToRcgyLayer.add(textGraphic)
                _this.rcxqToRcgyLayer.add(lineGraphic)
                _this.rcxqToRcgyLayer.add(graphic);
                _this.rcxqToRcgyLayer.add(graphic2);
               
              }
            })
            //最后绘制单独点击的企业图标 避免被箭头压盖
            _this.dynLineGraphicLayer.graphics.length && _this.dynLineGraphicLayer.clear()
            _this.drawPic(+_this.rcxqInfo.xc || +_this.rcxqInfo.xw, +_this.rcxqInfo.yc || +_this.rcxqInfo.yw, this.locatePng, 24, 30, _this.rcxqInfo)
            //人才需求企业名称
            const point2 = new Point(
              qyCoordX, qyCoordY,
              new SpatialReference({
                wkid: EPSG
              })
            );
            // const textSymbol = new TextSymbol();
            const textSymbol = new TextSymbol({
                haloColor: [255, 255, 255],  //设置光晕的颜色
                haloSize: 1,  //设置字体光晕的大小
              });
            textSymbol.setText(
              `${this.qyCoord[2]}`
            );
            textSymbol.setOffset(0, 20)
            textSymbol.setColor(new Color([236, 106, 67, 1]))
            textSymbol.setFont(
              new Font("12px").setWeight(Font.WEIGHT_BOLD))
            const textGraphic2 = new Graphic(point2, textSymbol)
            _this.rcxqToRcgyLayer.add(textGraphic2)
          }
        )
        .catch(err => {
          console.error(err);
        });
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值