一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して5日目です。クリックしてイベントの詳細をご覧ください。
別の一般的なアプリケーションを説明する-主にデータの流れを示すために使用されるフライングラインアニメーション
1.単一の飛行線を引く
ここでの曲線は、Baiduの曲線ジェネレーターを使用して描画できます：lbsyun.baidu.com/solutions/m…
<body>
<div id="map_container"></div>
<script>
const map = initBMap();
const data = initData();
setData(data, map);
// 初始化百度地图
function initBMap() {
// 引入的common库所作的处理
// mapv提供了api，根据名称获取坐标
const cityCenter = mapv.utilCityCenter.getCenterByCityName('上海');
const map = initMap({
center: [cityCenter.lng, cityCenter.lat],
zoom: 6,
style: purpleStyle,
tilt: 30
})
return map;
}
// 准备数据源
function initData() {
let data = [];
// 生成贝塞尔曲线坐标集 - 关键要素
// 1. 实例化贝塞尔曲线对象
const curve = new mapvgl.BezierCurve();
// 2. 设置起始和终点坐标
const start = mapv.utilCityCenter.getCenterByCityName('上海');
const end = mapv.utilCityCenter.getCenterByCityName('北京');
curve.setOptions({
start:[start.lng, start.lat],
end:[end.lng, end.lat]
});
// 3. 生成贝塞尔曲线坐标集
const curveData = curve.getPoints();
data.push({
geometry:{
type: 'LineString',
coordinates: curveData
}
})
return data;
}
// 绘制数据源
function setData(data, map) {
const view = new mapvgl.View({map});
// 初始化飞线对象并添加到图层中
const flyLine = new mapvgl.FlyLineLayer({
// 更多配置项可以看文档
color: 'red',
textureColor: 'blue',
textureWidth: 20,
textureLength: 80,
style: 'chaos',
step: 0.5
});
view.addLayer(flyLine);
flyLine.setData(data);
}
</script>
</body>
复制代码// 绘制数据源
function setData(data, map) {
const view = new mapvgl.View({map});
// 初始化飞线对象并添加到图层中
const flyLine = new mapvgl.FlyLineLayer({
// 更多配置项可以看文档
color: 'rgba(33,242,214,0.3)',
textureColor: '#ff0000',
textureWidth: 20,
textureLength: 10,
style: 'chaos',
step: 0.3
});
view.addLayer(flyLine);
flyLine.setData(data);
}
复制代码2.行を追加します
// 准备数据源
function initData() {
let data = [];
const cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨',
'长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州',
'武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐',
'成都', '贵阳', '昆明', '拉萨', '海口'
];
let randomCount = 100;
// 生成贝塞尔曲线坐标集 - 关键要素
// 1. 实例化贝塞尔曲线对象
const curve = new mapvgl.BezierCurve();
while (randomCount--) {
// 2. 设置起始和终点坐标
const start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
const end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
curve.setOptions({
start: [start.lng, start.lat],
end: [end.lng, end.lat]
});
// 3. 生成贝塞尔曲线坐标集
const curveData = curve.getPoints();
data.push({
geometry: {
type: 'LineString',
coordinates: curveData
}
})
}
return data;
}
复制代码3.mapvの例移植mapvgl-点収束線グラフ
実際、mapv（mapvglの前身）には参考のために多くの優れた飛行線図のケースがありますが、公式はもはや維持されていませんが、たとえばここでそれを学ぶことができます：mapv.baidu.com/examples/#b…
ソースコードをクリックすると、彼の実装のソースコードが表示されますが、スクリプトパスを絶対パスに変更する必要があることに注意してください。デフォルトの例は相対パスです。
上記のケースは古いmapvバージョンであり、実際、学習することはお勧めしません。また、コードについては詳しく説明しません。
mapvはキャンバスレンダリングに基づいており、表示角度を移動するとフリーズします。mapvglはwebglに基づいて実装され、上記の問題はありません。
しかし、全体としてmapvglに移植することはできますが、実際、この画像の内容はまだ比較的大きく、実際には移動点と静止線で構成されています。
静的ラインレイヤーを実装する
これには主に収束アルゴリズムの移植が含まれます。まず北京で多点収束線を実装し、次に静的線を実装するレイヤーがあるかどうかを確認します。ここでは、LineLayerに基づいて実装できます：lbsyun.baidu.com / Solutions/m…
<body>
<div id="map_container"></div>
<script>
const map = initBMap();
const data = initData();
setData(data, map);
// 初始化百度地图
function initBMap() {
// 引入的common库所作的处理
// mapv提供了api，根据名称获取坐标
const cityCenter = mapv.utilCityCenter.getCenterByCityName('北京');
const map = initMap({
center: [cityCenter.lng, cityCenter.lat],
zoom: 5,
style: purpleStyle,
tilt: 0
})
return map;
}
// 准备数据源
function initData() {
let data = [];
const cities = [
'北京', '天津', '上海'
];
let randomCount = 100;
const targetCity = mapv.utilCityCenter.getCenterByCityName('北京');
const curve = new mapvgl.BezierCurve();
for (let i = 1; i < cities.length; i++) {
const startCity = mapv.utilCityCenter.getCenterByCityName(cities[i]);
curve.setOptions({
start: [startCity.lng, startCity.lat],
end: [targetCity.lng, targetCity.lat]
})
const curveData = curve.getPoints();
data.push({
geometry: {
type: 'LineString',
coordinates: curveData
}
});
}
return data;
}
// 绘制数据源
function setData(data, map) {
const view = new mapvgl.View({ map });
// 初始化linelayer实现静态线
const lineLayer = new mapvgl.LineLayer({
color: 'rgba(55,50,250,0.3)'
});
view.addLayer(lineLayer);
lineLayer.setData(data);
}
</script>
</body>
复制代码移動点レイヤーを実装する
ここで、移動点レイヤーの軌道は実際には静的な線と同じであることに注意してください。つまり、その背後にあるデータは同じです。レイヤーは公式Webサイトにはありませんが、デモデモにあります。多くの移動点を含む軌道マップが見つかりました：mapv.baidu.com/gl/examples…
彼の裏側は実際にはLinePointLayerに基づいていますが、公式ドキュメントにはこのレイヤー情報がありません。デモメソッドを参照するだけで次のことができます。
// 绘制数据源
function setData(data, map) {
const view = new mapvgl.View({ map });
// 初始化linelayer实现静态线
const lineLayer = new mapvgl.LineLayer({
color: 'rgba(55,50,250,0.3)'
});
const linePointLayer = new mapvgl.LinePointLayer({
size: 8, // 点大小
speed: 12, // 点运动速度
color: 'rgba(255, 255, 0, 0.6)',
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, //点形状
blend: 'lighter' // 交会时处理
});
view.addLayer(lineLayer);
view.addLayer(linePointLayer)
lineLayer.setData(data);
linePointLayer.setData(data);
}
复制代码より多くのポイントを達成する
ここでも、いくつかのランダムポイント集約ターゲットは乱数に基づいて生成されます。
// 准备数据源
function initData() {
let data = [];
const cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨',
'长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州',
'武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐',
'成都', '贵阳', '昆明', '拉萨', '海口'
];
let randomCount = 500;
const targetCity = mapv.utilCityCenter.getCenterByCityName('北京');
const curve = new mapvgl.BezierCurve();
for (let i = 0; i < randomCount; i++) {
const startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
curve.setOptions({
start: [startCity.lng - 5 + 10 * Math.random(), startCity.lat - 5 + 10 * Math.random()],
end: [targetCity.lng, targetCity.lat]
})
const curveData = curve.getPoints();
data.push({
geometry: {
type: 'LineString',
coordinates: curveData
}
});
}
return data;
}
复制代码エッジバインディングアルゴリズムの実装
このアルゴリズムは、グラフの乱雑さを減らし、エッジ集約関数として機能するのに役立ちます。たとえば、特定の位置線が非常に近く、収束して目標に到達するのに役立ちますblog.csdn.net/gdp12315_gu…：
現在、エッジバインディングを実装しておらず、上記の例ほど効果は良くありません。エッジバインディングのmapvのツールメソッドを見てみましょう。
// 准备数据源
function initData() {
let data = [];
const cities = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨',
'长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州',
'武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐',
'成都', '贵阳', '昆明', '拉萨', '海口'
];
const targetCity = mapv.utilCityCenter.getCenterByCityName('北京');
let nodeData = [{
x: targetCity.lng,
y: targetCity.lat
}]; // 点
let edgeData = [{
source: 0, // 0表示的是nodeData的第0号元素
target: 0 // 0 - 0号元素的线
}]; // 边，表示点点关系
// 我们需要生成一系列node和edge数据
let randomCount = 500;
const curve = new mapvgl.BezierCurve();
for (let i = 0; i < randomCount; i++) {
const startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
nodeData.push({
x: startCity.lng + 5 - Math.random() * 10,
y: startCity.lat + 5 - Math.random() * 10
});
edgeData.push({
source: i + 1, // source为上面新push的node
target: 0
})
}
// 基于百度边绑定API获取需要的数据
const bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData);
const results = bundling(); // 获取所有线沿途的点数据 - 一个二维数组
for (let i = 0; i < results.length; i++) {
const line = results[i];
const coordinates = [];
for (let j = 0; j < line.length; j++) {
coordinates.push([line[j].x, line[j].y])
}
data.push({
geometry: {
type: 'LineString',
coordinates
}
});
}
return data;
}
// 绘制数据源
function setData(data, map) {
const view = new mapvgl.View({ map });
// 初始化linelayer实现静态线
const lineLayer = new mapvgl.LineLayer({
color: 'rgba(55,50,250,0.5)'
});
const linePointLayer = new mapvgl.LinePointLayer({
size: 5, // 点大小
speed: 12, // 点运动速度
color: 'rgba(255, 255, 0, 0.6)',
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, //点形状
blend: 'lighter' // 交会时处理
});
view.addLayer(lineLayer);
view.addLayer(linePointLayer)
lineLayer.setData(data);
linePointLayer.setData(data);
}
复制代码プラス収束効果
// 初始化linelayer实现静态线
const lineLayer = new mapvgl.LineLayer({
color: 'rgba(55,50,250,0.5)',
blend: 'lighter'
});
复制代码エッジバインディングアルゴリズムの実用的なアプリケーションがよく使用されます。