arcgis for js 3.xx 绘制船舶点与形状(记录贴)

原理:已知船舶中心点,长度和宽度,使用点心点坐标加减计算出船舶的,船头,船尾坐标。下面直接上代码。

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];
}

代码到此已完成,怎么调用不用我说明了。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值