Question

如何单独填充彩色地图图层？我有一个功能设置，根据存储在GeoJSON中的值设置多边形的样式。请原谅我对术语的无知。我是JS的新手，已经在这个问题上度过了一个坚实的一周，在网上搜索并观看了几个小时的教程，但无法回答这个具体问题。

我的功能代码包含以下内容，用于初始化和创建地图：

    function initialize() {

        var mapOptions = {
            zoom: 16,
            center: new google.maps.LatLng(30.284, -97.7325),
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
                    },
            mapTypeId: MY_MAPTYPE_ID
        };

        // build the map
        map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        // add colors
        stylePolygons();

        //fetch map layers
        $.getJSON( parkingLot, function( data ) {
            loadGeoJSON(data);
        });


        $.getJSON( building, function( data ) {
            loadGeoJSON(data);
        });
};

稍后在剧本中我使用这个，它可以为建筑物着色

// assign colors based on value property of each feature
    function stylePolygons () {
        map.data.setStyle(function(feature) {
            var value = feature.getProperty('value');
            var color = colors[value];
            return {
                fillColor: color,
                strokeWeight: 0.5,
                fillOpacity: 1
            };
        });
    };

如何单独设置其余图层的样式？内联代码或简单函数会很好，因为图层很简单，我不想将值附加到表中。

我收集我应该使用局部变量或针对特定对象的函数，并假设有一些简单的代码，例如：

parkingLot.fillColr('red');

或

parkingLot(fillColr: 'red');

或

fillColor(parkingLot){
fillColor: 'red'
};

但是我在黑暗中射击。任何建议都非常感谢。

谢谢，

Answer 1

如果不知道你的停车场geojson的架构很难说，但让我们想象它们就像

{
    "type": "FeatureCollection",

    "features": [{
        "type": "Feature",
        "properties": {
            "color": "red"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-116.9933, 34.0557, 14.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "blue"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-147.7822, 61.9128, 38.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "green"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-123.105, 38.6473, 1.1]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "purple"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-122.7997, 38.8318, 2.3]
        }
    }]
}

现在，你还没有说你在哪里存储你的多边形。您是否正在实例化一个新的google.maps.Data图层？

如果您是，那么新数据图层中的每个要素都是google.maps.Data.Feature对象，它可以是单独使用getProperty()方法的样式和与stylePolygons非常相似的函数，迭代在每个功能上，并将其颜色设置为feature.getProperty('color')的结果。

如果你想一步一步地整理整个系列，那么你应该只做

parkingLot.setStyle({'color':'red' });

但这是假设parkingLot是google.maps.Data的一个实例。

如何使用Google Maps JavaScript API 3单独填充颜色地图图层？

1 个答案: