//人才需求箭头图
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);
});
},
arcgis api for js绘制箭头图
最新推荐文章于 2023-07-09 10:56:38 发布