Question

我想使用多折线的多边形线在传单中创建一个箭头。

箭头类应该包含以下参数

baselatitude =箭头所在地箭头的底部

baselongitude =箭头将在地图上的箭头底部

pointlatitude =地图上箭头的尖端

pointlongitude =地图上箭头的尖端

apointlatitude

apointlongitude

bpointlatitude

bpointlongitude

角度=旋转度

任何人都可以使用以下参数提供有关创建箭头的指导。如果您可以创建传单类扩展名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));
        }
    }
});

Answer 2

如果您可以创建传单类扩展名L.arrow
，那将是很好的

不：这不是人们为你制造东西的地方。但是我们可以使用谷歌这样的内容，例如Leaflet arrow直接引导您Leaflet.PolylineDecorator。

使用leafletjs创建箭头

2 个答案: