当前位置：首页 > news >正文

uniapp在地图上加载CAD图，标记区域网格，加载geojson数据

news 来源：原创 2025/6/8 4:56:15

如果你的数据就是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.');
               }