Google地图上的自由格式绘图 [英] free form drawing on a google maps

问题描述

我正在使用Google Maps API V3在Google地图中自由绘制多边形，与标准库附带的标准点每点多边形相反。一切都很好。

I am using Google Maps API V3 to do some free form drawing of a polygon in Google Maps, as opposed to the standard point-per-click polygon that comes with the standard library. Everything works great.

问题：
多边形会产生大量的可编辑点数。

Problem: Polygons generates lot of editable points.

我怎样才能简化多边形并在需要时创建可编辑点？

How can I simplify the polygons and create editable point when its needed?

这里是我的代码：

here my code:

var latlng = new google.maps.LatLng(46.779231, 6.659431);

        var options = {
            center: latlng,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable:false
        };


        var map = new google.maps.Map(document.getElementById("map"), options);

        var markers = [];

        var isDrawing = false;
        var overlay = new google.maps.OverlayView();
        overlay.draw = function () {};
        overlay.setMap(map);
        var polyLine;
        var parcelleHeig = Array();
        google.maps.event.addListener(map, 'mousedown', function () {
                isDrawing=true;
                polyLine = new google.maps.Polyline({
                    map: map
                });
                $("#map").mousemove(function (e) {
                    if(isDrawing == true)
                    {
                        var pageX = e.pageX;
                        var pageY = e.pageY;
                        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

                        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);

                        polyLine.getPath().push(latLng);

                        latLng = String(latLng);
                        latLng=latLng.replace("(","");
                        latLng=latLng.replace(")","");

                        var array_lng =  latLng.split(',');
                        parcelleHeig.push(new google.maps.LatLng(array_lng[0],array_lng[1])) ;
                    }
                });
        });
        google.maps.event.addListener(map, 'mouseup', function () {

            isDrawing=false;
            //console.log(parcelleHeig);

            var polygoneParcelleHeig = new google.maps.Polygon({
                paths: parcelleHeig,
                strokeColor: "#0FF000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#0FF000",
                fillOpacity: 0.35,
                editable:true,
                geodesic: false

            });

            parcelleHeig=Array();
            polygoneParcelleHeig.setMap(map);
            polyLine.setMap(null);
        });

http://jsfiddle.net/kevdiho/yKHs4/

推荐答案

这是我正在使用的： http://jsfiddle.net/uF62D/1/

您可以更改变量 douglasPeuckerThreshold 的值以更改算法的简化级别。

You can change the value of the variable douglasPeuckerThreshold to change the level of simplification on the algorithm.

注意：这是我从此网址 https：//gist.github上的代码创建的版本.com / adammiller / 826148 （更新后可以在不同的缩放级别获得相同的视觉简化级别）

Note: This is a version I created from the code found at this URL https://gist.github.com/adammiller/826148 (updated to get the same "visual" level of simplification at different zoom levels)

这篇关于Google地图上的自由格式绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！