如果你的数据就是json格式,直接在map上add就行,就直接看下面
我的数据是后端返回的一个文件,需要先读到里面的genjson格式数据
在正常js标签内写方法掉接口获取返回文件,读出文件内容,调用监听方法,传到renderjs中
// cad图
this.$http.get("///地址", {
params: {
cglx: '参数'
}
}).then(res => {
// 遍历res.data.result数组中的每一个元素
res.data.result.forEach(item => {
const geojsonUrl = `${configService.apiUrl}${item.geojsonLj}`;
fetch(geojsonUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log("geojsonUrl", geojsonUrl);
console.log("cad-data", data);
// 假设你有一个方法来更新你的地图或做其他处理
this.jsonobj.push(data)
// 如果你需要在Vue组件中触发重新渲染或其他操作,可以在这里调用
this.updateWatch();
})
.catch(error => {
console.error('There has been a problem with your fetch operation:',
error);
});
})
})
renderjs中去add地图
watchData函数中
if (Array.isArray(newValue.jsonobj) && newValue.jsonobj.length > 0) { // 确保是数组并且不为空
console.log("newValue.jsonobj", newValue.jsonobj);
newValue.jsonobj.forEach((geoJsonItem, index) => {
L.geoJSON(geoJsonItem, {
style: function(feature) {
// 设置样式
return {
color: "#ff7800",
weight: 2
};
},
pointToLayer: function(feature, latlng) {
// 如果不想显示任何标记,则返回空的Layer或特定类型的Layer。
// 这里我们选择不返回任何东西,即不创建任何Layer。
// 如果需要,你可以在这里返回其他的Layer,例如CircleMarker等。
return; // 返回undefined表示不对该点创建任何图层
},
// onEachFeature: function(feature, layer) {
// // 可以为每个图层绑定弹出窗口等交互功能
// if (feature.properties && feature.properties.name) {
// layer.bindPopup(feature.properties.name);
// }
// }
}).addTo(this.map); // 假设map是你已经初始化的地图实例
});
} else {
console.warn('The provided jsonobj is not an array or it is empty.');
}