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'); };
}

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

1 个答案: