当前位置: 首页 > article >正文

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

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


http://www.kler.cn/a/545792.html

相关文章:

  • 图像锐化(QT)
  • Qt中2个.app源文件之间函数与变量的互相调用
  • 【工业安全】-CVE-2022-35561- Tenda W6路由器 栈溢出漏洞
  • @Transational事务注解底层原理以及什么场景事务会失效
  • C++设计模式-工厂模式
  • 什么是服务的雪崩、熔断、降级的解释以及Hystrix和Sentinel服务熔断器的解释、比较
  • OpenWebUI使用DeepSeek R1满血版,DeepSeek R1 API调用
  • 《C++ Primer》学习笔记(一)
  • 【目标检测json2xml】label从COCO格式json文件转VOC格式xml文件
  • 关于post和get的请求参数问题
  • Vue 3 30天精进之旅:Day 22 - 构建和部署
  • windows 打开22端口
  • DeepSeek自然语言处理(NLP)基础与实践
  • dify.ai 配置链接到阿里云百练等云厂商的 DeepSeek 模型
  • 真正通俗易懂的Langchain入门学习(二)
  • Kotlin 扩展函数与内联函数
  • DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件
  • 微信小程序组件间通信与传值的全面解析
  • 【Kubernetes】常用命令全解析:从入门到实战(中)
  • FastAPI 高并发与性能优化