原理:已知船舶中心点,长度和宽度,使用点心点坐标加减计算出船舶的,船头,船尾坐标。下面直接上代码。
let attributes= {}
attributes.height = 99;//船长
attributes.width = 15;//船宽
attributes.sog = 15;//船速
attributes.shipname = “001”;//船名
attributes.cog = 125;//船头方向
//判断船是否在行驶中
function isSpeedLineVisibled(attr) {
return attr.sog >= 1;
}
function createSymbol(path, color) {
var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setPath(path);
markerSymbol.setColor(new esri.Color(color));
var line = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([0, 0, 0, 1]), 2);
markerSymbol.setOutline(line);
return markerSymbol;
}
//绘制初始船舶
// param attributes 船舶的信息
// param infoTemplate 气泡
function genYachtGraphic(attributes, infoTemplate) {
const attr = attributes;
let path = "M300 75 L0 0 L0 150 L300 75", size = "18";
isSpeedLineVisibled(attr) && (size = "26", path = "M300 75 L0 0 L0 150 L300 80 L500 70 Z");
let markSymbol = createSymbol(path, [255, 255, 0, 1]);
markSymbol.setSize(size);
let angle = attr.cog / 10 - 90;
markSymbol.setAngle(angle);
var pt1 = webMercatorUtils.geographicToWebMercator(new Point(attr.longitude, attr.latitude));
attr.receivetime = (new Date(parseInt(attr.receivetime))).toLocaleString();
const graphic = new Graphic(new Point(pt1, map.spatialReference), markSymbol, attributes, getYachtPopupTemplate());
let graphics = [graphic];
// attr.name && (graphics = graphics.concat(getYachtTextGraphic(attr, 3)));
return graphic;
}
//绘制船舶形状
function featuresToGraphics(it){
var polySymbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([0, 0, 0]), 0.5),
new esri.Color([255, 255, 0, 0.75])
);
var polygon = new Polygon(map.spatialReference);
var graphic2 = genYachtGraphicReal(it, polySymbol);
}
function genYachtGraphicReal(attr,polySymbol,infoTemplate) {//绘制船舶形状
const shipLen2 = attr.length / 2;
const shipWidth2 = attr.width / 2;
const direction = attr.cog - 90;
const lng = attr.longitude;
const lat = attr.latitude;
const xy = webMercatorUtils.lngLatToXY(lng, lat);
var polygon = new Polygon(map.spatialReference);
polygon.addRing(getRings2(xy, shipLen2, shipWidth2, direction, isSpeedLineVisibled(attr)));
const graphic = new Graphic(polygon, polySymbol,attr, getYachtPopupTemplate());
return graphic;
}
function getRings2(xy, shipLen2, shipWidth2, direction, isSpeedLineVisibled) {
const bottomOffset = shipWidth2 * 0.3;
const headOffset = shipWidth2 * 0.5;
const headLenth = shipWidth2 * 2;
const bottomLength = shipWidth2 * 0.8;
//船尾左
const p1x = xy[0] - shipWidth2 + bottomOffset;
const p1y = xy[1] - shipLen2;
const p2x = xy[0] - shipWidth2;
const p2y = xy[1] - shipLen2 + bottomLength;
//船头左
const p3x = xy[0] - shipWidth2;
const p3y = xy[1] + shipLen2 - headLenth;
const p4x = xy[0] - headOffset;
const p4y = xy[1] + shipLen2 - headLenth * 0.3;
//船头
const p5x = xy[0];
const p5y = xy[1] + shipLen2;
//速度线
const p5_1x = p5x;
const p5_1y = p5y + shipLen2 * 2;
const p5_2x = p5x + 0.001;
const p5_2y = p5y;
//船头右
const p6x = xy[0] + headOffset;
const p6y = xy[1] + shipLen2 - headLenth * 0.3;
const p7x = xy[0] + shipWidth2;
const p7y = xy[1] + shipLen2 - headLenth;
//船尾右
const p8x = xy[0] + shipWidth2;
const p8y = xy[1] - shipLen2 + bottomLength;
const p9x = xy[0] + shipWidth2 - bottomOffset;
const p9y = xy[1] - shipLen2
if (isSpeedLineVisibled) {
return [[p1x, p1y], [p2x, p2y], [p3x, p3y], [p4x, p4y], [p5x, p5y], [p5_1x, p5_1y], [p5_2x, p5_2y], [p6x, p6y], [p7x, p7y], [p8x, p8y], [p9x, p9y], [p1x, p1y]].map(function (it) { return rotateCoord(it, xy, direction) });
}
return [[p1x, p1y], [p2x, p2y], [p3x, p3y], [p4x, p4y], [p5x, p5y], [p6x, p6y], [p7x, p7y], [p8x, p8y], [p9x, p9y], [p1x, p1y]].map(function (it) { return rotateCoord(it, xy, direction) });
}
//计算船舶角度坐标
function rotateCoord(pt, pt0, angle) {
var a = -angle * Math.PI / 180;
var x = pt[0], y = pt[1];
var x0 = pt0[0], y0 = pt0[1];
return [(x - x0) * Math.cos(a) - (y - y0) * Math.sin(a) + x0, (x - x0) * Math.sin(a) + (y - y0) * Math.cos(a) + y0];
}
代码到此已完成,怎么调用不用我说明了。

327

被折叠的 条评论
为什么被折叠?



