Javascript 使用JS创建箭头

我想在传单中创建一个箭头，使用多条线中的多条线，以适合的为准

arrow类应采用以下参数

baselatitude=箭头在地图上的位置

baselongitude=箭头在地图上的位置

pointlatitude=地图上箭头的尖端

点经度=地图上箭头的尖端

点纬度

经度

B点纬度

B点经度

角度=旋转度

请任何人提供使用以下参数创建箭头的指导。如果您可以创建一个传单类扩展名L.arrow，那就太好了

如果您可以创建一个传单类扩展名L.arrow，那就太好了

不，这不是一个人们为你做东西的地方。但是我们可以用谷歌搜索东西，比如直接把你带到

如果您可以创建一个传单类扩展名L.arrow，那就太好了

---

不，这不是一个人们为你做东西的地方。但是我们可以用谷歌搜索东西，比如直接把你带到那里。

为了满足我的要求，我自己做了这件事。。如果某一天有人发现它有用，就粘贴进去 feature.geometry.coordinates[0]是检索所有坐标的geoJson集合

L.Playback.WindArrowMarker = L.Marker.extend({
    initialize: function (startLatLng, options, feature) {

        this._min = 99;
        this._max = 0;

        this._arrowStyleOptions = [
        { color: '#ffff00' },
        { color: '#00ffff' },
        { color: '#00ff00' }];         


        var ArrowData = feature.geometry.coordinates[0];

        var ArrowBaseLon = ArrowData[0];
        var ArrowBaseLat = ArrowData[1];
        var ArrowPointLat = ArrowData[2];
        var ArrowPointLon = ArrowData[3];
        var ArrowPointALat = ArrowData[4];
        var ArrowPointALon = ArrowData[5];
        var ArrowPointBLat = ArrowData[6];
        var ArrowPointBLon = ArrowData[7];
        var ArrowHeight = ArrowData[8];
        var ArrowMagnitude = ArrowData[9];
        var ArrowBearing = ArrowData[10];

        if (ArrowMagnitude > this._max) this._max = ArrowMagnitude;
        if (ArrowMagnitude < this._min) this._min = ArrowMagnitude;

        var styleToUse=this._getArrowStyle(ArrowMagnitude);

        //Create Arrow structure and assign first value from the playback data
        //baseLtlg                     //PointLtlg
        this._arrowbase = L.polyline([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]], styleToUse);
        //PointLtlg                    //PointAtLtlg
        this._arrowpointA = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]], styleToUse);
        //PointLtlg                    //PointBLtlg
        this._arrowpointB = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]], styleToUse);


        //Call leaflet marker initialization to attach this as marker
        L.Marker.prototype.initialize.call(this, [ArrowBaseLat, ArrowBaseLon], {});

        //Calculate windspeed     
        var windspeed = this._calculateWindspeed(ArrowMagnitude, feature.modeldata.Adder, feature.modeldata.Multiplier)

        //Attach a popup
        this._arrowbase.bindPopup(this.getPopupContent(ArrowBearing, windspeed));


    },

    _calculateWindspeed: function (magnitude, adder, multiplier) {
        return (magnitude - parseFloat(adder)) / multiplier
    },

    _getArrowStyle: function (magnitude) {

        this._arrowMagMed = 7;
        this._arrowMagHigh = 10;

        if (magnitude > this._arrowMagHigh)
            styleToUse = this._arrowStyleOptions[2];
        else if (magnitude > this._arrowMagMed)
            styleToUse = this._arrowStyleOptions[1];
        else
            styleToUse = this._arrowStyleOptions[0];

        return styleToUse;
    },

    getPopupContent: function (bearing, windspeed) {
        return sprintf("Wind blowing from: %s deg(from North)<br> Wind Speed(m/s): %s", bearing.toFixed(1), windspeed.toFixed(1));
    },

    addTo: function (map) {
        this._arrowbase.addTo(map);
        this._arrowpointA.addTo(map);
        this._arrowpointB.addTo(map);
    },   

    move: function (windData,transitionTime, modelData) {

        var ArrowBaseLon = windData[0];
        var ArrowBaseLat = windData[1];
        var ArrowPointLat = windData[2];
        var ArrowPointLon = windData[3];
        var ArrowPointALat = windData[4];
        var ArrowPointALon = windData[5];
        var ArrowPointBLat = windData[6];
        var ArrowPointBLon = windData[7];
        var ArrowHeight = windData[8];
        var ArrowMagnitude = windData[9];
        var ArrowBearing = windData[10];

        var styleToUse = this._getArrowStyle(ArrowMagnitude);

        //Assign color based on magnitude
        this._arrowbase.setStyle(styleToUse);
        this._arrowpointA.setStyle(styleToUse);
        this._arrowpointB.setStyle(styleToUse);


        //Set Base,Apoint,Bpoint LatLongs as they are the ones changing 
        this._arrowbase.setLatLngs([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]])
        this._arrowpointA.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]])
        this._arrowpointB.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]])

        //Calculate windspeed     
        var windspeed = this._calculateWindspeed(ArrowMagnitude, modelData.Adder, modelData.Multiplier)

        //Check if popup is attached
        if (this._arrowbase._popup) {
            //Set popup content while moving
            this._arrowbase._popup.setContent(this.getPopupContent(ArrowBearing, windspeed));
        }
    }
});

L.Playback.WindArrowMarker=L.Marker.extend({
初始化：功能（启动、选项、功能）{
这个._min=99；
这是._max=0；
此选项。\u arrowStyleOptions=[
{颜色：'#ffff00'}，
{颜色：'#00ffff'}，
{颜色：'#00ff00'}]；
var ArrowData=feature.geometry.coordinates[0]；
var ArrowBaseLon=ArrowData[0]；
var ArrowBaseLat=箭头数据[1]；
var ArrowPointLat=箭头数据[2]；
var ArrowPointLon=箭头数据[3]；
var ArrowPointALat=ArrowData[4]；
var ArrowPointALon=箭头数据[5]；
var ArrowPointBLat=箭头数据[6]；
var ArrowPointBLon=ArrowData[7]；
var ArrowHeight=箭头数据[8]；
var ArrowMagnitude=箭头数据[9]；
var Arrow轴承=箭头数据[10]；
如果（箭头幅度>此._最大值）为此._最大值=箭头幅度；
如果（箭头幅度<此。_min）此。_min=箭头幅度；
var styleToUse=this.\u获取箭头样式（箭头大小）；
//创建箭头结构并从播放数据中指定第一个值
//baseLtlg//PointLtlg
此._arrowbase=L.多段线（[[ArrowBaseLat，ArrowBaseLon]，[ArrowPointLat，ArrowPointLon]]，styleToUse）；
//PointLtlg//PointAtLtlg
此._arrowpointA=L.多段线（[[ArrowPointLat，ArrowPointLon]，[ArrowPointALat，ArrowPointALon]]，styleToUse）；
//PointLtlg//PointBLtlg
此._arrowpointB=L.多段线（[[ArrowPointLat，ArrowPointLon]，[ArrowPointBLat，ArrowPointBLon]]，styleToUse）；
//调用传单标记器初始化将此作为标记器附加
L.Marker.prototype.initialize.call（this，[ArrowBaseLat，ArrowBaseLon]，{}）；
//计算风速
var windspeed=此值。_计算风速（箭头幅值，feature.modeldata.Adder，feature.modeldata.Multiplier）
//附加弹出窗口
this._arrowbase.bindPopup（this.getPopupContent（箭头方位、风速））；
},
_计算速度：函数（幅值、加法器、乘法器）{
返回（幅值-浮点（加法器））/乘法器
},
_getArrowStyle:函数（幅值）{
这是._arrowMagMed=7；
这一点。_arrowMagHigh=10；
如果（幅值>此值。\u箭头高）
styleToUse=此选项。_箭头STYLEOPTIONS[2]；
否则，如果（幅值>此值）
styleToUse=此选项。_箭头STYLEOPTIONS[1]；
其他的
styleToUse=this.\u箭头STYLEOPTIONS[0]；
回归风格；
},
getPopupContent:函数（方向角、风速）{
返回sprintf（“从%s度（从北方）吹来的风
风速（m/s）：%s”，方位固定（1），风速固定（1））；
},
addTo：函数（映射）{
此._arrowbase.addTo（地图）；
此._arrowpointA.addTo（地图）；
此._arrowpointB.addTo（地图）；
},   
移动：函数（windData、transitionTime、modelData）{
var ArrowBaseLon=windData[0]；
var ArrowBaseLat=windData[1]；
var ArrowPointLat=windData[2]；
var ArrowPointLon=windData[3]；
var ArrowPointALat=windData[4]；
var ArrowPointALon=windData[5]；
var ArrowPointBLat=windData[6]；
var ArrowPointBLon=windData[7]；
var ArrowHeight=windData[8]；
var ArrowMagnitude=windData[9]；
var Arrow轴承=windData[10]；
var styleToUse=this.\u获取箭头样式（箭头大小）；
//根据大小指定颜色
此._arrowbase.setStyle（styleToUse）；
此._arrowpointA.setStyle（styleToUse）；
此._arrowpointB.setStyle（styleToUse）；
//设置基线、Apoint、Bpoint LatLongs，因为它们是不断变化的
此._arrowbase.setLatLngs（[[ArrowBaseLat，ArrowBaseLon]，[ArrowPointLat，ArrowPointLon]]
此._arrowpointA.setLatLngs（[[ArrowPointLat，ArrowPointLon]，[ArrowPointALat，ArrowPointALon]]
此._arrowpointB.setLatLngs（[[ArrowPointLat，ArrowPointLon]，[ArrowPointBLat，ArrowPointBLon]]
//计算风速
var windspeed=此值。\ u计算风速（箭头幅值、modelData.Adder、modelData.乘法器）
//检查是否附加了弹出窗口
如果（此箭头底部弹出）{
//移动时设置弹出内容
this._arrowbase._popup.setContent（this.getPopupContent（箭头方向、风速））；
}
}
});

为了满足我的要求，我自己做了这件事。。如果某一天有人发现它有用，就粘贴进去 feature.geometry.coordinates[0]是geoJson集合，其中所有坐标