Tôi muốn sử dụng cubiccurve trong phần mở rộng 2.13, Và tôi đã thêm các tệp cần thiết, Nhưng khi vẽ đường thẳng được vẽ thay vì đường cong.Sử dụng cubiccurve trong OpenLayers 2?
tập tin có sẵn trên trang web: http://trac.osgeo.org/openlayers/ticket/1715#no1
đường cong Vẽ là rất quan trọng đối với chúng tôi và tôi không có cách nào tôi có thể kiểm soát đường cong của tôi.
Tôi có thể giúp tôi không?
<html>
<head>
<script src="http://dev.openlayers.org/OpenLayers.js" type="text/javascript"></script>
<title>Ya Mahdi</title>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script>
mmGetCurvePoints = function(ptsa, tension, isClosed, numOfSegments)
{
if (ptsa.length <= 2)
return ptsa;
tension = typeof tension === 'number' ? tension : 0.5;
isClosed = typeof isClosed === 'boolean' ? isClosed : false;
numOfSegments = typeof numOfSegments === 'number' ? numOfSegments : 16;
var ptsaClone = ptsa.slice(0);
if (isClosed)
ptsaClone.push(ptsa[0], ptsa[1], ptsa[2], ptsa[3]);
var _pts, res = [], /// clone array
x, y, /// our x,y coords
t1x, t2x, t1y, t2y, /// tension vectors
c1, c2, c3, c4, /// cardinal points
st, t, i, /// steps based on num. of segments
pow3, pow2, /// cache powers
pow32, pow23,
p0, p1, p2, p3, /// cache points
pl = ptsaClone.length;
/// clone array so we don't change the original content
_pts = ptsaClone.concat();
_pts.unshift(ptsaClone[1]); /// copy 1. point and insert at beginning
_pts.unshift(ptsaClone[0]);
_pts.push(ptsaClone[pl - 2], ptsaClone[pl - 1]); /// copy last point and append
/// 1. loop goes through point array
/// 2. loop goes through each segment between the two points + one point before and after
for (i = 2; i < pl; i += 2) {
p0 = _pts[i];
p1 = _pts[i + 1];
p2 = _pts[i + 2];
p3 = _pts[i + 3];
/// calc tension vectors
t1x = (p2 - _pts[i - 2]) * tension;
t2x = (_pts[i + 4] - p0) * tension;
t1y = (p3 - _pts[i - 1]) * tension;
t2y = (_pts[i + 5] - p1) * tension;
for (t = 0; t <= numOfSegments; t++) {
/// calc step
st = t/numOfSegments;
pow2 = Math.pow(st, 2);
pow3 = pow2 * st;
pow23 = pow2 * 3;
pow32 = pow3 * 2;
/// calc cardinals
c1 = pow32 - pow23 + 1;
c2 = pow23 - pow32;
c3 = pow3 - 2 * pow2 + st;
c4 = pow3 - pow2;
/// calc x and y cords with common control vectors
x = c1 * p0 + c2 * p2 + c3 * t1x + c4 * t2x;
y = c1 * p1 + c2 * p3 + c3 * t1y + c4 * t2y;
/// store points in array
res.push(x, y);
}
}
if (isClosed)
res = res.slice(0, res.length - 2 * numOfSegments);
return res;
};
var map, control,layer,feature,points;
var xy = [];
var array = [];
function init(){
map = new OpenLayers.Map('map', {
center: [45.476333, 39.4854095],
zoom: 10
});
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
layer = new OpenLayers.Layer.Vector("Simple Geometry");
map.addLayer(wms);
map.addLayer(layer);
function drawEnd(e){
if(xy.length<6) {
xy.push(e.x);
xy.push(e.y);
return;
}
else if(xy.length==6){
feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(array),{properties: {state: 'a'}}
);
layer.addFeatures(feature);
console.log("add f");
feature="";
layer.refresh({force:true});
xy=[];
}
}
function putPoint(e){
if(xy.length<6) {
return;
}
}
function sketchModified(e, ee, eee){
if(xy.length<6)
return;
try{
layer.removeFeatures(feature);
}catch(err){}
var xytemp = [];
xytemp.push(xy[0]);
xytemp.push(xy[1]);
xytemp.push(xy[2]);
xytemp.push(xy[3]);
xytemp.push(e.x);
xytemp.push(e.y);
points = mmGetCurvePoints(xytemp, 0.5, false, 15);
var i = 0;
while(i<points.length){
array.push(new OpenLayers.Geometry.Point(points[i], points[i+1]));
i++;
i++;
}
feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(array),{properties: {state: 'a'}}
);
layer.addFeatures([feature]);
array=[];
points=[];
layer.refresh({force:true});
}
function cancel(){
}
var callBackParams = {
"done": drawEnd,
"point": putPoint,
"modify": sketchModified,
"cancel": cancel
};
var drawCrtl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {callbacks: callBackParams});
map.addControls([drawCrtl]);
drawCrtl.activate();
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>