Angularjs 如何通过范围更改形状的样式？

我正在使用一个定制的、不太流行的GitHub版本。我之所以使用它，是因为我对那个人处理事件的方式不满意

我有一个GeoJSON文件，其中充满了填充地图的形状。我想让它互动，这样你就可以选择每个领域。因此，我已设法使初始区域选择和区域取消选择工作，但如果您选择一个区域，然后再选择一个不同的区域，它应该会更改旧选定区域的样式并更新新区域

我迭代GeoJSON文件并创建范围

$scope.shapes = [];
$http.get('/static/json/areas.json').then(function(res){
    for (var x = res.data.features.length -1; x >= 0; x--) {
        paths = [];
        for (var y = res.data.features[x].geometry.coordinates[0].length - 1; y >= 0; y--) {
            paths.push([ res.data.features[x].geometry.coordinates[0][y][3], res.data.features[x].geometry.coordinates[0][y][0]]);
        };
        $scope.shapes.push({
            areaName: res.data.features[x].properties.name,
            path: paths,
            fillColor: '#4F639E',
            fillOpacity: 0.4,
            strokeColor: '#4F639E',
            strokeOpacity: 1,
            strokeWeight:1
        });
    };
});

然后使用和ng repeat将它们添加到地图中

<map
    zoom="13"
    center="[-33.955, 18.42]"
    disable-default-u-i="true"
    disable-double-click-zoom="true"
    draggable="true"
    keyboard-shortcuts="false"
    map-type-id="SATELLITE">
    <shape ng-repeat="shape in shapes track by $index"
        on-mouseover="areaOver()"
        on-mouseout="areaOut()"
        on-click="areaClick()"
        id="{{$index+1}}"
        name="polygon"
        stroke-color="{{shape.strokeColor}}"
        stroke-opacity="{{shape.strokeOpacity}}"
        stroke-weight="{{shape.strokeWeight}}"
        fill-color="{{shape.fillColor}}"
        fill-opacity="{{shape.fillOpacity}}"
        paths="{{shape.path}}">
    </shape>
</map>

此选项适用于已选择区域的情况

$scope.areaClick = function() {
    var path = this.getPath();

    // The first time area selected
    if ($scope.select == null) {
        $scope.select = this.id;
        $scope.map.fitBounds(get_bounds(path.j))

        this.setOptions({
            fillOpacity: 0,
            strokeColor: '#FFFFFF',
            strokeWeight: 2,
            zIndex: +1
        });
    }

    // When the same area has been selected again - reset view.
    else if ($scope.select == this.id) {
        $scope.select = null;
        this.setOptions({
            fillOpacity: 0.4,
            strokeColor: '#4F639E',
            strokeWeight: 1,
            zIndex: -1
        });

        $scope.map.setZoom(13);
        $scope.map.setCenter({lat: -33.96, lng: 18.38});
    }

    // When a different area has been selected - reset old style then update new style.
    else {
        // Reset old selected shape
        $scope.map.data.revertStyle();  // Not working
        $scope.apply;

        for (var i = $scope.map.shapes.length - 1; i >= 0; i--) {
            $scope.map.shapes[i].setOptions({  // Not working
                fillOpacity: 0.4,
                strokeColor: '#4F639E',
                strokeWeight: 1,
                zIndex: -1
            });
        };
        $scope.apply;

        // Move / Style newly selected shape
        $scope.select = this.id;
        $scope.map.fitBounds(get_bounds(path.j))

        this.setOptions({
            fillOpacity: 0,
            strokeColor: '#FFFFFF',
            strokeWeight: 2,
            zIndex: +1
        });
    };
}

此外，还有一个自定义函数，用于计算选定区域的中心

// Custom Function
function get_bounds(path) {
    var smallest_lat = 360;
    var smallest_lng = 360;
    var largest_lat = -360;
    var largest_lng = -360;

    for (var i = path.length - 1; i >= 0; i--) {
        var lat = path[i].lat();
        var lng = path[i].lng();

        if (lat > largest_lat) {largest_lat = lat};
        if (lat < smallest_lat) {smallest_lat = lat};
        if (lng > largest_lng) {largest_lng = lng};
        if (lng < smallest_lng) {smallest_lng = lng};
    }

    var northEast = new google.maps.LatLng(smallest_lat, smallest_lng);
    var southWest = new google.maps.LatLng(largest_lat, largest_lng);
    var bounds = new google.maps.LatLngBounds(northEast, southWest);

    return bounds;
}

//自定义函数
函数get_界限（路径）{
var最小值=360；
var最小值=360；
var最大值=360；
最大液化天然气风险值=-360；
对于（var i=path.length-1；i>=0；i--）{
var lat=path[i].lat（）；
var lng=路径[i].lng（）；
如果（lat>maximust_lat）{maximust_lat=lat}；
如果（lat最大液化天然气）{最大液化天然气=液化天然气}；
如果（lng<最小lng）{最小lng=lng}；
}
var northEast=新的google.maps.LatLng（最小的，最小的）；
var soutwest=新的google.maps.LatLng（最大的，最大的）；
var bounds=new google.maps.LatLngBounds（东北、西南）；
返回边界；
}

---

如何从范围更新形状的样式

$scope.map.shapes[id]

在谷歌地图上，你和我在同一页上。：）

如果这不能满足您的问题，请根据示例制作一个非常简单的plnkr

或

那么，让我知道。要创建plnkr，只需单击页面上的“Plunkr”

我会把它修好，直到你满意为止

// Custom Function
function get_bounds(path) {
    var smallest_lat = 360;
    var smallest_lng = 360;
    var largest_lat = -360;
    var largest_lng = -360;

    for (var i = path.length - 1; i >= 0; i--) {
        var lat = path[i].lat();
        var lng = path[i].lng();

        if (lat > largest_lat) {largest_lat = lat};
        if (lat < smallest_lat) {smallest_lat = lat};
        if (lng > largest_lng) {largest_lng = lng};
        if (lng < smallest_lng) {smallest_lng = lng};
    }

    var northEast = new google.maps.LatLng(smallest_lat, smallest_lng);
    var southWest = new google.maps.LatLng(largest_lat, largest_lng);
    var bounds = new google.maps.LatLngBounds(northEast, southWest);

    return bounds;
}