Self-defined track icon should be used import
before the introduction of the picture, and then use, or load out
import carUrl from '../../assets/img/car.png'
var map = new AMap.Map('container', {
zoom: 4
});
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!');
return;
}
var defaultRenderOptions = {
renderAllPointsIfNumberBelow: -1,
pathLineStyle: {
lineWidth: 3,
strokeStyle: '#FFEC7A',
borderWidth: 1,
borderStyle: '#eeeeee',
dirArrowStyle: false
},
startPointStyle: {
radius: 4,
fillStyle: '#109618',
lineWidth: 1,
strokeStyle: '#eeeeee'
},
endPointStyle: {
radius: 4,
fillStyle: '#dc3912',
lineWidth: 1,
strokeStyle: '#eeeeee'
},
};
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: map,
getPath: function(pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
return pathData.name + ',点:' + pointIndex + '/' + pathData.path.length;
}
return pathData.name + ',点数量' + pathData.path.length;
},
renderOptions:defaultRenderOptions
});
window.pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData([{
name: '路线0',
path: [
[116.405289, 39.904987],
[113.964458, 40.54664],
[111.47836, 41.135964],
[108.949297, 41.670904],
[106.380111, 42.149509],
[103.774185, 42.56996],
[101.135432, 42.930601],
[98.46826, 43.229964],
[95.777529, 43.466798],
[93.068486, 43.64009],
[90.34669, 43.749086],
[87.61792, 43.793308]
]
}]);
var navg1 = pathSimplifierIns.createPathNavigator(0, {
loop: false,
speed: 1000000,
pathNavigatorStyle: {
width: 44,
height: 54,
content: PathSimplifier.Render.Canvas.getImageContent(imgUrl, onload, onerror),
strokeStyle: null,
fillStyle: null,
pathLinePassedStyle: {
lineWidth: 5,
strokeStyle: '#FFDC04',
}
}
});
navg1.start();
});