OL3 - LineString Draw
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
<div id="map"></div>
<div id="coords">
<ul id="lns_p"></ul>
</div>
CSS
html,body,#map { width:100%; height:100%; margin:0; }
#map {
position: absolute;
z-index: 5;
}
#coords{
position: absolute;
z-index: 10;
left: 50%;
transform: translate(-50%, 5px);
background-color: rgba(238,238,238,.6);
padding: 10px;
color: #222;
width: 350px;
text-align: center;
}
JavaScript
// define the centre
var center = ol.proj.transform([0, 20],
'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: center,
zoom: 3
})
});
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({ source: vectorSource });
map.addLayer(vectorLayer);
var event
var coords_element = document.getElementById('coords');
var coords_length = 0;
var num = 0;
var draw = new ol.interaction.Draw({
source: vectorSource,
type: "LineString",
geometryFunction: function(coords, geom) {
if (!geom) {
geom = new ol.geom.LineString(null);
}
geom.setCoordinates(coords);
return geom;
}
});
map.addInteraction(draw);
var pixel = map.getPixelFromCoordinate([3896182.17, 5160979.44]);
var down = new PointerEvent('mousemove', {
clientX: pixel[0],
clientY: pixel[1],
target: $('.ol-unselectable'),
srcElement: $('.ol-unselectable'),
pointerType: "mouse"
});
var event = $.Event('click');
console.log(event);
draw.handleEvent({
type:'pointermove',
map:this.map,
originalEvent: event,
dragging:false,
coordinate:[-16921.5543469423, 3385243.108693886]
})
var sayi1,sayi2,top;
top=sayi1+sayi2;