Question

我试图在地图上的给定坐标处实现旋转的线条。该线不是折线，无论缩放级别如何，都应该是相同的长度。我用Google搜索了几天，我发现了如何使用CSS旋转东西以及如何使用Leaflet的DivIcon绘制正确的线条。我觉得一切都准备好了，但是，当我把它们放在一起时，我的DivIcon并没有放在我放的地方。请检查下面的代码和结果（https://jsfiddle.net/yckim1224/380de3gb/1/）。我把myIcon1和myIcon2放在同一个坐标上，只让myIcon2旋转。结果是myIcon2在左上角旋转，而myIcon1保持其位置。当我缩小时，myIcon2甚至会移动。

这是我的第一个网络项目，因此，我不熟悉CSS和Javascript等Web内容。所以，请，1。检查我的代码并告诉我什么是错的，并且，2。如果有更好的方法来绘制一条细线，请给我一些建议。

我的CSS代码：

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.my-div-icon-1 {
  background-color: red;
}

.my-div-icon-2 {
  background-color: green;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

我的Javascript代码：

var map = L.map('map', {
        center: [36.8, 127.5],
        zoom: 10
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var myIcon1 = L.divIcon({ 
    iconSize: new L.Point(2, 50),
    iconAnchor: [0, 0],
    className: 'my-div-icon-1'    
});
L.marker([37.0, 127.5], {icon: myIcon1}).addTo(map)
    .bindPopup('myIcon1');

var myIcon2 = L.divIcon({ 
    iconSize: new L.Point(2, 50),
    iconAnchor: [0, 0],
    className: 'my-div-icon-2'    
});    
L.marker([37.0, 127.5], {icon: myIcon2}).addTo(map)
    .bindPopup('myIcon2');

如何在Leaflet中实现纺纱生产线

0 个答案: