谷歌地图上的自由形式绘图
free form drawing on a google maps
我正在使用Google Maps API V3在Google Maps中对多边形进行一些自由形式的绘制,而不是标准库附带的标准点击点多边形。一切都很好。
问题:面会生成大量可编辑点。
如何简化面并在需要时创建可编辑点?
这是我的代码:
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
的值,以更改算法的简化级别。
注意:这是我根据在此URL https://gist.github.com/adammiller/826148 中找到的代码创建的版本(更新以在不同的缩放级别获得相同的"视觉"简化级别)
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Html画布自由转换
- HTML画布在绘图后立即擦除矩形
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 在一个页面中具有多个捕捉绘图和捕捉内容
- SVG手写字母绘图动画
- 绘图悬停文本未显示
- 为画布绘图添加鼠标事件
- 如何强制绘图将x轴编号显示为类别
- 绘图应用程序-单击工具更改光标
- 如何使用拉斐尔自由变换翻转图像
- 重置transform:rotate(),方法是移除并追加在追加和重绘图表后未显示数据的画布
- 如何禁用自由形式的用户输入只允许下拉
- Highcharts多个Y轴绘图带碰撞
- 如何避免在自由jqgrid中单击单元格进行水平滚动编辑
- 如何使用画布和javascript使绘图移动
- highcharts IE8重绘图表问题
- OpenOffice绘图:增强的几何图形解析
- 谷歌地图上的自由形式绘图
- 用fabricjs模拟自由绘图