openlayers 3は車の軌跡再生を実現します。
9579 ワード
本論文の例では、openlayers 3の車両軌跡再生を実現するための具体的なコードを共有します。
先の効果:
openlayers 3地図のpostcomposeイベントを利用して地図の書き換えを監督します。
このコードは私がVueのmethodsに書いたテスト方法です。直接運行できません。理解した上でテストしてください。
vmはvueのthis対象の注釈が豊富になりました。バックアップを取って、後で編集して詳しく説明します。
実現コード:
html数:
先の効果:
openlayers 3地図のpostcomposeイベントを利用して地図の書き換えを監督します。
このコードは私がVueのmethodsに書いたテスト方法です。直接運行できません。理解した上でテストしてください。
vmはvueのthis対象の注釈が豊富になりました。バックアップを取って、後で編集して詳しく説明します。
実現コード:
html数:
<div id="menu">
<label for="speed" style="font-weight: bold;">
:
<input id="speed" type="range" min="1" max="20" step="1" value="10" />
</label>
<button id="start-animation">
</button>
</div>
<!-- ： --
startMove:function () {
var vm=this;
var map=vm.map;
vm.clearOverlayers("beijing_sq");
//
var stops=[
[12909554.6597,4933234.84552], //14
[12909824.6852,4931594.7854], //43
[12910026.8837,4930523.89946], //63
[12910870.563,4929357.26511] //85
];
var stopMakers = new Array();
for(var i=0;i<4;i++){
var s = new ol.Feature({
type: 'stop',
geometry: new ol.geom.Point(stops[i])
});
stopMakers.push(s);
}
var Coordinates=vm.path;
//
var route = new ol.geom.LineString(Coordinates);
//
var routeCoords = route.getCoordinates();
var routeLength = routeCoords.length;
var routeFeature = new ol.Feature({
type: 'route',
geometry: route
});
var geoMarker = new ol.Feature({
type: 'geoMarker',
geometry: new ol.geom.Point(routeCoords[0])
});
var startMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[0])
});
var endMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[routeLength - 1])
});
var styles = {
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6,
color: '#F2C841'
}),
fill:new ol.style.Fill({
color:"#F6E3A3"
})
}),
/*'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: require()
})
}),*/
'geoMarker': new ol.style.Style({
/*image: new ol.style.Circle({
radius: 7,
snapToPixel: false,
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})*/
image: new ol.style.Icon({
src: require('../../assets/map/left_red_car.png'),
rotateWithView: false,
rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]),
scale:0.3,
})
}),
'stop':new ol.style.Style({
image:new ol.style.Circle({
radius:10,
snapToPixel:false,
fill:new ol.style.Fill({ color:'red'}),
stroke:new ol.style.Stroke({
color:'white',
width:2
})
})
})
};
var animating = false;
var speed, now;
var speedInput = document.getElementById('speed');
var startButton = document.getElementById('start-animation');
var vectorLayer = new ol.layer.Vector({
id:'carLayer',
source: new ol.source.Vector({
features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]]
}),
style: function (feature) {
// geoMarker
if (animating && feature.get('type') === 'geoMarker') {
return null;
}
return styles[feature.get('type')];
}
});
//var center = ol.proj.fromLonLat([115.981,40.451]);
map.addLayer(vectorLayer);
//
var moveFeature = function (event) {
var vectorContext = event.vectorContext; //HTML5 Canvas context，ol.render.canvas.Immediate
var frameState = event.frameState; //freme
if (animating) {
var elapsedTime = frameState.time - now; //elapsedTime
// ， lineString
var index = Math.round(speed * elapsedTime / 1000); //
//console.log("#########",routeCoords[index]);
if (index >= routeLength) {
stopAnimation(true);
return;
}
//fixme ---------------
if( index < 14){
flashFeature(0);
}
if( index == 14){
changeStyle(0, 1);
}
if(index > 14 && index <43){
flashFeature(1);
}
if(index == 43){
changeStyle(1, 2);
}
if(index > 43 && index <63){
flashFeature(2);
}
if(index == 63){
changeStyle(2, 3);
}
if(index > 63 && index <85){
flashFeature(3);
}
if(index == 85){
changeStyle(3, 3);
}
//fixme--------------------
var dx,dy,rotation,carStyle;
if(routeCoords[index] && routeCoords[index+1]){
dx=routeCoords[index][0]-routeCoords[index+1][0];
dy=routeCoords[index][1]-routeCoords[index+1][1];
rotation = Math.atan2(dy,dx);
//console.log("***********",rotation);
carStyle= new ol.style.Style({
image: new ol.style.Icon({
src: require('../../assets/map/left_red_car.png'),
rotateWithView: false,
rotation: -rotation,
scale:0.3,
})
});
var currentPoint = new ol.geom.Point(routeCoords[index]); //
var feature = new ol.Feature(currentPoint);
//Render a feature into the canvas.
// Note that any zIndex on the provided style will be ignored - features are rendered immediately in the order that this method is called.
// If you need zIndex support, you should be using an ol.layer.Vector instead
vectorContext.drawFeature(feature, carStyle);
}
}
//
map.render();
};
function changeStyle(previous,next) {
//console.log(stopMakers[previous]);
stopMakers[previous].setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
snapToPixel: false,
fill: new ol.style.Fill({color: 'green'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
}));
}
var colors=['red','green'];
var colorIndex=0;
function flashFeature(index) {
var color;
colorIndex++;
colorIndex=colorIndex % 30;
if(colorIndex < 15){
color=colors[0];
}else {
color = colors[1];
}
stopMakers[index].setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
snapToPixel: false,
fill: new ol.style.Fill({
color: color
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
}));
}
function startAnimation() {
if (animating) {
stopAnimation(false);
} else {
animating = true;
now = new Date().getTime(); /** */
speed = speedInput.value;
startButton.textContent = ' ';
// geoMarker
geoMarker.setStyle(null);
//
//map.getView().setCenter(center);
map.on('postcompose', moveFeature); /** postcompose -- */
map.render();
}
}
/**
* @param {boolean}
*/
function stopAnimation(ended) {
animating = false;
startButton.textContent = ' ';
//
var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
/** @type {ol.geom.Point} */
(geoMarker.getGeometry()).setCoordinates(coord);
//
map.un('postcompose', moveFeature); /** postcompose */
}
startButton.addEventListener('click', startAnimation, false);
}