最近做的项目中,需要一项人员的头像可以在地图上按轨迹运动,自己研究了下,做了个比较基础的:
目前有个小问题一直解决不了,就是svg里的img头像的圆角设置不了,我现在是把它放在一个circle里填充了,但是效果不好,还在研究更好的办法。。。。
先贴相关的代码八。
<svg width="100%" height="550px" id="svg" viewBox="0 0 730 530" preserveAspectRatio="xMinYMin meet">
<image
width="100%" height="460px" x="0" y="0" stroke="black"
xlink:href="img/dt2.png" preserveAspectRatio ="none">
</image>
<i class="fa fa-map-marker ddqcxyl2"></i>
<i class="fa fa-map-marker ddqcxyl22"></i>
<i class="fa fa-map-marker ddjs12"></i>
<i class="fa fa-map-marker ddjbs2"></i>
<i class="fa fa-map-marker ddhjl2"></i>
<i class="fa fa-map-marker ddyy2"></i>
<path id="path"
stroke="#fdb23c" stroke-width="4"
fill="none" />
<!---->
<defs>
<pattern id="pat" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image id="car" width="1" height="1.4"/>
</pattern>
</defs>
<!---->
<animate dur="3s" repeatCount="0" />
<!-- <image id="car" transform="translate(-30,-40)" width="70px" height="70px">
<animate values="0;1;1;1;1;0" dur="3s" repeatCount="0" />
</image> -->
<!-- <circle id="travel" cx="50" cy="50" r="50" fill="url(#car)"></circle> -->
<!--运动的相关参数 1、href链接到图片 mpath链接到路径-->
<animateMotion id="motion" xlink:href="#travel" begin="indefinite" dur="3s" fill="freeze" repeatCount="1">
<mpath xlink:href="#path" />
</animateMotion>
<g id="travel" transform="translate(-30,-40)">
<circle cx="80" cy="80" r="20" fill="url(#pat)"></circle>
</g>
</svg>
大概的思路就是,先做一个Svg容器,设置宽高,然后把元素都放进去,animateMotion是控制运动的标签,pattern是填充的标签,相当于里面的img就是用来填充相连id的那个circle,path是运动路径,就是图片里的橘黄色轨迹,我在Controller里设置了动态生成的,后台路径数据传过来前台来渲染。
下面贴controller的内容:
var svg = document.getElementById('path');
var car = document.getElementById('car');
// car.setAttribute('style', 'border-radius: 25px;');
var anim = document.getElementById('motion');
$scope.clickgj =function(id){
gridService.search(id).success(function(response) {
// alert('2222');
var items = response.filter(function (e) { return e.travelId == id; })
// $scope.myd = response.path;
// $scope.people=response;
// $scope.img = response.img;
svg.setAttribute('d', items[0].travelPath);
// fill="url(#car)"
car.setAttributeNS('http://www.w3.org/1999/xlink',"xlink:href",items[0].travelImg);
// travel.setAttributeNS('http://www.w3.org/1999/xlink',"fill",items[0].travelImg);
// console.info('*******'+items[0].travelDetail);
// $scope.items = items[0].travelDetail;
//console.info('!!!!'+$scope.items);
// for(var i=0;i<detail.time.length;i++){}
anim.beginElement();
// svg.path.getPointAtLength(0);
});
}
gridservice里就是数据接口,相关数据传过来就可以运动了。不过现在的路径都是预先写好然后拼接的,希望以后能研究出只在地图上定点就能自动规划路径,嘻嘻?