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);
        });
    },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ArcGIS API for JavaScript是一个强大的JavaScript库,可用于创建动态和交互式地应用程序。它提供了丰富的功能和工具,使开发者能够绘制各种地元素。 使用ArcGIS API for JavaScript绘制非常简单。首先,你需要准备一个HTML页面,并引入API的库文件。然后,你可以创建一个地对象,指定要显示的地范围和初始缩放级别。 在地绘制点、线、面等要素非常容易。你可以使用API提供的形类,如Point、Polyline和Polygon来创建要素对象。当你创建完要素对象后,只需将其添加到地显示的层中即可。 除了绘制基本要素,API还提供了丰富的绘工具,如绘制圆、矩形、箭头等。你可以使用这些工具在地绘制复杂的形状。 此外,ArcGIS API for JavaScript还支持绘制标注、文本和像等。你可以在地上添加标签或片来展示特定的信息。 绘制功能不仅限于地要素,还可应用于其他地操作,如测量距离、面积等。API提供了测量工具来帮助你快速计算地上的距离和面积。 最后,ArcGIS API for JavaScript还支持与其他库和服务的集成。你可以将绘制的地元素与数据库、GIS服务等进行交互,并在应用程序中展示或分析这些数据。 总而言之,ArcGIS API for JavaScript是一个功能强大的工具,可以帮助你绘制各种地要素和操作。无论是简单的点线面,还是复杂的测量和分析,API都提供了丰富的功能和工具供你使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值