Question

我试图根据GPS的路线显示一些图像，我正在使用AngularJS和NodeJS来做这个，我不知道它是否正确的部分是前端（angularjs），这是什么我到目前为止：

angular.module('item.detail')
.controller('ItemDetailCtrl', function ($scope, Item, $stateParams) {

    angular.extend($scope, {
        center: {
            lat: -32.93257539162459,
            lng: -68.816867997665271,
            zoom: 18
        },
        markers: {
            m1: {
                lat: -32.93257539162459,
                lng: -68.816867997665271,
                focus: true,
                draggable: false,
                gpsIcon: {}
            }
        },
        gpsIconDefault: {},
        gpsIconN: {
            iconUrl: '../../assets/images/gpsIconN.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconNE: {
            iconUrl: '../../assets/images/gpsIconNE.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconE: {
            iconUrl: '../../assets/images/gpsIconE.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconSE: {
            iconUrl: '../../assets/images/gpsIconSE.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconS: {
            iconUrl: '../../assets/images/gpsIconS.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconSW: {
            iconUrl: '../../assets/images/gpsIconSW.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconW: {
            iconUrl: '../../assets/images/gpsIconW.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        },
        gpsIconNW: {
            iconUrl: '../../assets/images/gpsIconNW.png',
            shadowUrl: 'img/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62]
        }

    });

    Item.findById($stateParams.epc, function (err, item) {

        if (item.properties.velocity) {
            // Mostrar icono loco
            if (item.properties.velocity.course > 22.5 && item.properties.velocity.course <= 67.5){
                //curso="NE";
                $scope.markers.m1.gpsIcon = gpsIconNE;
            }
            if (item.properties.velocity.course > 67.5 && item.properties.velocity.course <= 112.5){
                //curso="E";
                $scope.markers.m1.gpsIcon = gpsIconE;
            }
            if (item.properties.velocity.course > 112.5 && item.properties.velocity.course <= 157.5){
                //curso="SE";
                $scope.markers.m1.gpsIcon = gpsIconSE;
            }
            if (item.properties.velocity.course > 157.5 && item.properties.velocity.course <= 202.5){
                //curso="S";
                $scope.markers.m1.gpsIcon = gpsIconS;
            }
            if (item.properties.velocity.course > 202.5 && item.properties.velocity.course <= 247.5){
                //curso="SW";
                $scope.markers.m1.gpsIcon = gpsIconSW;
            }
            if (item.properties.velocity.course > 247.5 && item.properties.velocity.course <= 292.5){
                //curso="W";
                $scope.markers.m1.gpsIcon = gpsIconW;
            }
            if (item.properties.velocity.course > 292.5 && item.properties.velocity.course <= 337.5){
                //curso="NW";
                $scope.markers.m1.gpsIcon = gpsIconNW;
            }
            if (item.properties.velocity.course > 337.5 && item.properties.velocity.course <= 22.5){
                //curso="N";
                $scope.markers.m1.gpsIcon = gpsIconN;
            }
        }

        $scope.item = item;

        $scope.layers = {};

        $scope.itemGeometry = {
            data: item
        };
    });
});

使用此代码，我试图告诉应用程序，如果某个项目带有velocity属性，请找到该课程并显示该课程的图像。

感谢。

Answer 1

最后，我使用了带有rotateMarker的pointToLayer来显示角度函数的标记。像这样：

pointToLayer: function(feature, latlng) {
                var result;

                if (feature.properties.type === 'car') {
                    result = L.rotatedMarker(latlng, {
                        icon: myIcon,
                        angle: value.property.speed.course
                    });

根据课程gps app显示图像

1 个答案: