javascript - 使用 leafletjs 创建箭头

Question

我想使用适合的多折线的折线在传单中创建一个箭头..

箭头类应该接受以下参数

baselatitude = base of the arrow where the arrow will be on map

baselongitude = base of the arrow where the arrow will be on map

pointlatitude = the tip of the arrow on the map

pointlongitude = the tip of the arrow on the map

apointlatitude

apointlongitude

bpointlatitude

bpointlongitude

angle = rotation degree

任何人都可以提供有关使用以下参数创建箭头的指导。如果你能创建一个传单类扩展 L.arrow 就好了

Answer 1

我自己这样做是为了满足我的要求..如果有一天有人觉得它有用就粘贴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));
        }
    }
});