關注公眾號"seeling_GIS",領取學習影片資料
前序
- 之前有網友留言出,希望出一個關於點位的歷史軌跡。點位的歷史軌跡,我想的是通過 L.polyline 修改對應的點位資料 latlngs 然後通過 setLatLngs 的方式更新即可。如下程式碼所示。不知道是否是該網友所需要的答案。
// 程式碼示例來自 http://leafletjs.com/reference-1.6.0.html#polyline
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());
複製程式碼
- 在實際工作中有對執行軌跡的呈現需求,所有就參看了一些例子,實現的方式有很多種,但是發現mapv實現的方式效果會更好,接入也很方便,所有就有了這篇文章
效果
這裡是直接使用百度案例中的資料,因為經緯度資料是百度偏轉後的資料,這裡沒有做糾偏,所有看圖結果是和實際路網是有一定偏移的
引入 MapV
// 通過npm新增 mapv
npm install mapv
import * as mapv from 'mapv'
複製程式碼
程式碼實現
- 使用mapv實現該效果相對來說比較簡單,首先是建立資料集,然後設定樣式配製option,然後直接呼叫mapv分裝好的 leafletMapLayer 即可
- 圖上效果是兩個圖層疊加後的結果,一個是軌跡線圖層,一個是運動軌跡圖層
// 軌跡線 option
let option= {
strokeStyle: "rgba(53,57,255,0.5)",
shadowColor: "rgba(53,57,255,0.2)",
shadowBlur: 3,
lineWidth: 3.0,
draw: "simple",
};
// 運動軌跡 option
let aniOption = {
fillStyle: "rgba(255, 250, 250, 0.2)",
globalCompositeOperation: "lighter",
size: 1.5,
animation: {
stepsRange: {
start: 0,
end: 100,
},
trails: 3,
duration: 5,
},
draw: "simple",
};
// 初始化 dataset 資料
this.axios.get("/data/mapv/od-xierqi.txt").then((res) => {
var data = [];
var timeData = [];
let rs = res.data.split("\n");
console.log(rs.length);
var maxLength = 0;
for (var i = 0; i < rs.length; i++) {
var item = rs[i].split(",");
var coordinates = [];
if (item.length > maxLength) {
maxLength = item.length;
}
for (let j = 0; j < item.length; j += 2) {
var x = (Number(item[j]) / 20037508.34) * 180;
var y = (Number(item[j + 1]) / 20037508.34) * 180;
y =
(180 / Math.PI) *
(2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
if (x == 0 || y == NaN) {
continue;
}
coordinates.push([x, y]);
timeData.push({
geometry: {
type: "Point",
coordinates: [x, y],
},
count: 1,
time: j,
});
}
data.push({
geometry: {
type: "LineString",
coordinates: coordinates,
},
});
}
let dataset = new mapv.DataSet(data);
let timeDataset = new mapv.DataSet(timeData);
// 新增圖層到map
mapv.leafletMapLayer(dataset, option).addTo(map);
mapv.leafletMapLayer(timeDataset, aniOption).addTo(map);
});
複製程式碼
更多內容,歡迎關注公眾號