/**

?* 本文介紹了實現知識圖譜可視化的技術方案，主要分為兩個圖層實現：

?* 1、線圖層 ?不拖動

?* 2、點圖層 需要拖動

?*/

• ?線圖層 - 負責繪制靜態連接線，使用LineString創建線要素并添加到矢量圖層；

// 線圖層
export function addKnowledgeGraphLinePoint(id) {const layers = map.getLayers().getArray();let layer = layers.find((item) => item.values_.id === id);if (layer) {layer.getSource().clear();} else {layer = new LayerVector({source: new SourceVector({features: "",}),properties: {id: id,},zIndex: 15,});map.addLayer(layer);// 創建矢量對象var lineString = new LineString(data);var lineFeature = new Feature({ geometry: lineString });// 添加到之前的創建的layer中去layer.getSource().addFeature(lineFeature);}addKnowledgeGrapPoint("KnowledgeGrapPoint", lineString);
}

• 點圖層 - 實現可拖拽的節點功能，通過Translate交互實現拖動，每個節點使用Point創建要素。兩個圖層通過坐標數據關聯，線圖層的坐標由點圖層拖動時動態更新。代碼展示了圖層創建、要素添加和交互綁定的具體實現，使用OpenLayers庫完成地圖可視化功能。

// 點圖層
function addKnowledgeGrapPoint(id, lineString) {const layers = map.getLayers().getArray();let layer = layers.find((item) => item.values_.id === id);let translate;if (layer) {layer.getSource().clear();} else {layer = new LayerVector({source: new SourceVector(),properties: {id: id,},});translate = new Translate({layers: [layer],});map.addLayer(layer);map.addInteraction(translate);}for (let index = 0; index < data.length; index++) {const element = data[index];// 創建矢量對象let feature = new Feature({geometry: new Point(element),properties: { id: "points" + index },});// 添加到之前的創建的layer中去layer.getSource().addFeature(feature);_bindMapEvents(layer, translate, lineString);}
}

?