如何在谷歌地图多边形内绘制直线 [英] How to draw straight lines inside google map polygon

问题描述

我使用 google map javascript API V3 创建了一个谷歌地图。我正在绘制多个zipcode多边形。根据某些条件，多边形具有不同的颜色。现在我想根据某些标准在一些多边形内绘制直线/散列标记。我们怎么做呢下面是我为绘制多边形而编写的代码。

I have created a google map using google map javascript API V3. I am drawing number of zipcode polygons. The polygons are of different colors depending upon some condition. Now I want to draw straight lines/ hash marks inside some of the polygons depending upon certain criteria. How can we do it. Below is the code which I have written for drawing the polygons.

{% if zip.zip_info.zip_polygon %}
    var path = [
        {% for polycoord in zip.zip_info.zip_polygon %}
            new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
        {% endfor %}
        ];

    var polygon_{{ forloop.counter }} = new google.maps.Polygon(
    {
        path:path, 
        clickable:true,
        strokeColor: '#000000',
        strokeOpacity: 0.15,
        strokeWeight: 2,
        fillColor: fillColor,
        fillOpacity: 1,
        zipcode: '{{zip.zip_info.zipcode}}'
    });

    polygon_{{ forloop.counter }}.setMap(map);

{% endif %}

我也在提供图片链接我的要求。

I am also givinging the image link of my requirement.

你可以在图像中看到一些多边形用直线着色，有些用仅用颜色着色。

You can see in the image some of the polygons are shaded with straight lines, and some are shaded with only colors.

推荐答案

我一直在研究同样的问题。这是我到目前为止： jsFiddle of Example

I have been working on the same issue. This is what I have so far: jsFiddle of Example

BW.PolyLineFill 函数创建自定义叠加层。它需要4个参数，最后两个是可选的。

The BW.PolyLineFill function creates a Custom Overlay. It takes 4 parameters with the last two being optional.

 1. path: an array of Google LatLng objects   
 2. map: the map to attach theoverlay to 
 3. fillColor: (optional) the color of the fill, default is red. 
 4. strokeColor: (optional) the stroke color, default is black

我没有'测试了性能，它可能仍然需要更多的调整，但它应该让你开始。

I haven't tested the performance and it probably still needs more tweaking, but it should get you started.

相关代码：

PolyLineFill.prototype = new google.maps.OverlayView();
function PolyLineFill(poly, map, fill, stroke) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < poly.length; i++) {
        bounds.extend(poly[i]);
    }

    //initialize all properties.
    this.bounds_ = bounds;
    this.map_ = map;
    this.div_ = null;
    this.poly_ = poly;
    this.polysvg_ = null;
    this.fill_ = fill;
    this.stroke_ = stroke;

    // Explicitly call setMap on this overlay
    this.setMap(map);
}

PolyLineFill.prototype.onAdd = function () {
    // Create the DIV and set some basic attributes.
    var div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    //createthe svg element
    var svgns = "http://www.w3.org/2000/svg";
    var svg = document.createElementNS(svgns, "svg");
    svg.setAttributeNS(null, "preserveAspectRatio", "xMidYMid meet");

    var def = document.createElementNS(svgns, "defs");

    //create the pattern fill 
    var pattern = document.createElementNS(svgns, "pattern");
    pattern.setAttributeNS(null, "id", "lineFill");
    pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
    pattern.setAttributeNS(null, "patternTransform", "rotate(-45)");
    pattern.setAttributeNS(null, "height", "7");
    pattern.setAttributeNS(null, "width", "7");
    def.appendChild(pattern);

    var rect = document.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "id", "rectFill");
    rect.setAttributeNS(null, "fill", this.fill_ || "red");
    rect.setAttributeNS(null, "fill-opacity", "0.3");
    rect.setAttributeNS(null, "stroke", this.stroke_ || "#000");
    rect.setAttributeNS(null, "stroke-dasharray", "7,7");
    rect.setAttributeNS(null, "height", "7");
    rect.setAttributeNS(null, "width", "7");
    pattern.appendChild(rect);

    svg.appendChild(def);

    //add polygon to the div
    var p = document.createElementNS(svgns, "polygon");
    p.setAttributeNS(null, "fill", "url(#lineFill)");
    p.setAttributeNS(null, "stroke", "#000");
    p.setAttributeNS(null, "stroke-width", "1");
    //set a reference to this element;
    this.polysvg_ = p;
    svg.appendChild(p);

    div.appendChild(svg);

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayLayer pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
}

PolyLineFill.prototype.AdjustPoints = function () {
    //adjust the polygon points based on the projection.
    var proj = this.getProjection();
    var sw = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    var points = "";
    for (var i = 0; i < this.poly_.length; i++) {
        var point = proj.fromLatLngToDivPixel(this.poly_[i]);
        if (i == 0) {
            points += (point.x - sw.x) + ", " + (point.y - ne.y);
        } else {
            points += " " + (point.x - sw.x) + ", " + (point.y - ne.y);
        }
    }
    return points;
}

PolyLineFill.prototype.draw = function () {
    // Size and position the overlay. We use a southwest and northeast
    // position of the overlay to peg it to the correct position and size.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the southwest and northeast coordinates of this overlay
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to resize the DIV.
    var sw = overlayProjection
                .fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection
                .fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's DIV to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';

    this.polysvg_.setAttributeNS(null, "points", this.AdjustPoints());
}

PolyLineFill.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
}
window.BW = {};
window.BW.PolyLineFill = PolyLineFill;

这篇关于如何在谷歌地图多边形内绘制直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！