将折线添加到 Google 地图数据层

Question

在我的应用程序中，我将 GeoJSON 文件加载到 Google 地图中。该文件可以正确加载而不会出现问题，但我希望应用折线对象而不是 Feature 对象固有的其他样式。我想要做的是设置线串的样式以包含多个图标和虚线。我已经阅读了有关 GeoJSON 和虚线的 post 并且它有效，但我不希望折线是单个实体；我希望渲染的多段线驻留在一个对象（数据层）中。我想要实现的目标是可能的吗？有解决办法吗？

** 更新 **

我使用了geocodezip中的代码并修改为工厂工作，有两种类型：标记和折线。

function LayerFactory() {
this.entities = [];
this.labelLayerName = "";
}

LayerFactory.prototype.layerType = PolylineLayer;
LayerFactory.prototype = new google.maps.MVCObject();
LayerFactory.prototype.changed = function (key) {
    if (this.entities) {
        for (var i = 0; i < this.entities.length; i++) {
            this.entities[i].overlay.set(key, this.get(key));
        }
    }
};
LayerFactory.prototype.addEntity = function (entity) {
    this.entities.push(entity);

    if (this.layerType === PolylineLayer) {
        for (var i = 0; i < entity.overlays.length; i++) {
            var overlay = entity.overlays[i];
            //add events here
        }
    }
    else if (this.layerType === MarkerLayer) {
        //add events here
    }
};
LayerFactory.prototype.setMap = function (map) { this.set('map', map); };
LayerFactory.prototype.getMap = function () { return this.get('map'); };
LayerFactory.prototype.createLayer = function (options) {
    this.labelLayerName = options.labelLayerName;

    switch (options.layerType) {
        case "polyline":
            //set options
            break;
        case "marker":
            //set options
            break;
        case "label":
            //set options
            break;
    }

    return new this.layerType(options);

};

初始化图层时，我会为标签添加图层名称，以便我可以根据可见性单独切换每个图层。

myLayer = new LayerFactory();
myLayer.createLayer({ map: gmap, layerType: "marker", labelLayerName: "MyLabels" });

现在，当切换图层时，我只需拉出所需的图层并将地图设置为 null/gmap：

yourMapLayer.setMap(/* gmap OR null => show/hide */);

我希望这对遇到我遇到的问题的人有所帮助。祝你好运。

Answer 1

来自geoxml3 的一些代码是一个包含多条折线的MVCObject（它需要一个paths 数组，就像Polygon 一样）。不知道它是否适用于虚线。

/**
 * A MultiGeometry object that will allow multiple polylines in a MultiGeometry
 * containing LineStrings to be treated as a single object
 *
 * @param {MutiGeometryOptions} anonymous object.  Available properties:
 * map: The map on which to attach the MultiGeometry
 * paths: the individual polylines
 * polylineOptions: options to use when constructing all the polylines
 *
 * @constructor
 */
// only if Google Maps API included
if (!!window.google && !! google.maps) { 
function MultiGeometry(multiGeometryOptions) {
   function createPolyline(polylineOptions, mg) {
     var polyline = new google.maps.Polyline(polylineOptions);
     google.maps.event.addListener(polyline,'click', function(evt) { google.maps.event.trigger(mg,'click',evt);});
     google.maps.event.addListener(polyline,'dblclick', function(evt) { google.maps.event.trigger(mg, 'dblclick', evt);});
     google.maps.event.addListener(polyline,'mousedown', function(evt) { google.maps.event.trigger(mg, 'mousedown', evt);});
     google.maps.event.addListener(polyline,'mousemove', function(evt) { google.maps.event.trigger(mg, 'mousemove', evt);});
     google.maps.event.addListener(polyline,'mouseout', function(evt) { google.maps.event.trigger(mg, 'mouseout', evt);});
     google.maps.event.addListener(polyline,'mouseover', function(evt) { google.maps.event.trigger(mg, 'mouseover', evt);});
     google.maps.event.addListener(polyline,'mouseup', function(evt) { google.maps.event.trigger(mg, 'mouseup', evt);});
     google.maps.event.addListener(polyline,'rightclick', function(evt) { google.maps.event.trigger(mg, 'rightclick', evt);});
     return polyline;
   }
   this.setValues(multiGeometryOptions);
   this.polylines = [];

   for (i=0; i<this.paths.length;i++) {
     var polylineOptions = multiGeometryOptions;
     polylineOptions.path = this.paths[i];
     var polyline = createPolyline(polylineOptions,this);
     // Bind the polyline properties to the MultiGeometry properties
     this.polylines.push(polyline);
   }
}
MultiGeometry.prototype = new google.maps.MVCObject();
MultiGeometry.prototype.changed = function(key) {
    // alert(key+" changed");
    if (this.polylines) {
        for (var i=0; i<this.polylines.length; i++) {
            this.polylines[i].set(key,this.get(key));
        }
    }
};
MultiGeometry.prototype.setMap = function(map) { this.set('map',map); };
MultiGeometry.prototype.getMap = function() { return this.get('map'); };
}