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.rhkb.cn/news/17049.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-链式二叉树

文章目录 一、链式二叉树1.1 链式二叉树的创建1.2 根、左子树、右子树1.3 二叉树的前中后序遍历1.3.1前(先)序遍历1.3.2中序遍历1.3.3后序遍历 1.4 二叉树的节点个数1.5 二叉树的叶子结点个数1.6 第K层节点个数1.7 二叉树的高度1.8 查找指定的值(val)1.9 二叉树的销毁 二、层序…

SpringCloud系列教程:微服务的未来(二十三)SpringAMQP快速入门、Work Queues、Fanout交换机

前言 Spring AMQP是Spring框架中用于与消息中间件(如RabbitMQ)进行交互的一个项目,它简化了消息发送、接收以及消息处理的过程。通过Spring AMQP,开发者可以快速实现基于RabbitMQ的消息传递系统。本文将介绍Spring AMQP的快速入门…

单片机简介

一、单片机简介 电脑和单片机性能对比 二、单片机发展历程 三、CISC VS RISC

Java中面向对象的三大特性 -- 有关多态

学习目标 理解多态掌握instanceof了解抽象类,抽象方法 1.多态(向上转型) ● 现在我们已经学会了继承(类与类之间的)关系,并且能够在子类继承父类的基础上进一步对子类的数据及操作进行扩展,增加新的成员变量和方法或…

在本地校验密码或弱口令 (windows)

# 0x00 背景 需求是验证服务器的弱口令,如果通过网络侧校验可能会造成账户锁定风险。在本地校验不会有锁定风险或频率限制。 # 0x01 实践 ## 1 使用 net use 命令 可以通过命令行使用 net use 命令来验证本地账户的密码。打开命令提示符(CMD&#xff0…

蓝桥杯嵌入式备赛(四)—— 中断 + UART

目录 一、STM32 NVIC中断系统1、NVIC介绍2、Cortex-M4优先级设置 二、UART介绍1、原理图介绍2、原理图介绍及编程步骤(1)CubeMX设置(2)UART 发送(3)UART 接收 一、STM32 NVIC中断系统 1、NVIC介绍 STM32G4…

AI前端开发的学习成本与回报——效率革命的曙光

近年来,人工智能技术飞速发展,深刻地改变着各行各业。在软件开发领域,AI写代码工具的出现更是掀起了一场效率革命。AI前端开发,作为人工智能技术与前端开发技术的完美结合,正展现出巨大的发展潜力,为开发者…

AI前端开发的持续学习策略:拥抱变化,精进技艺

在飞速发展的科技浪潮中,AI前端开发领域正经历着日新月异的变化。作为一名AI前端开发者,你是否感到技术更新迭代之快,对自身持续学习能力提出了更高的要求? 想要在竞争激烈的行业中保持领先地位,持续学习不再是一种选择…

sql盲注脚本

在sqli-labs中的第8题无回显可以尝试盲注的手法获取数据 发现页面加载了3秒左右可以进行盲注 布尔盲注数据库名 import requestsdef inject_database(url):datanamefor i in range(1,15):low 32high 128mid (low high) // 2while low < high:path "id1 and asci…

DeepSeekR1 苹果macbook M1本地可视化运行!

过年了&#xff0c;就带了一台 macbook air 8g&#xff0c;DeepSeekR1的消息还是铺天盖地的来&#xff0c;我就想着在这台电脑上也装一个吧。 经过简单的配置&#xff0c;最终也运行起来了&#xff0c;速度还可以。 我这是首款M系列笔记本&#xff0c;也是现在最低配的 M 系列…

centos 10 离线安装dnf 和 设置dnf镜像源

离线安装dnf可用kimi搜索, centos 使用curl 下载dnf 的rpm包 mkdir ~/dnf_packages cd ~/dnf_packages# CentOS 7 示例 curl -O http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/dnf-0.6.4-2.sdl7.noarch.rpm curl -O http://springdale.math.ias.edu/data/pu…

Vivado生成edif网表及其使用

介绍如何在Vivado中将模块设为顶层&#xff0c;并生成相应的网表文件&#xff08;Verilog文件和edif文件&#xff09;&#xff0c;该过程适用于需要将一个模块作为顶层设计进行综合&#xff0c;并生成用于其他工程中的网表文件的情况。 例如要将fpga_top模块制作成网表给其它工…

【Python网络爬虫】爬取网站图片实战

【Python网络爬虫】爬取网站图片实战 Scrapying Images on Website in Action By Jackson@ML *声明:本文简要介绍如何利用Python爬取网站数据图片,仅供学习交流。如涉及敏感图片或者违禁事项,请注意规避;笔者不承担相关责任。 1. 创建Python项目 1) 获取和安装最新版…

Python从0到100(八十八):LSTM网络详细介绍及实战指南

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

window patch按块分割矩阵

文章目录 1. excel 示意2. pytorch代码3. window mhsa 1. excel 示意 将一个三维矩阵按照window的大小进行拆分成多块2x2窗口矩阵&#xff0c;具体如下图所示 2. pytorch代码 pytorch源码 import torch import torch.nn as nn import torch.nn.functional as Ftorch.set_p…

python013-基于Python的智能停车系统的设计与实现(源码+数据库+论文+部署讲解等)

&#x1f495;&#x1f495;作者&#xff1a; 爱笑学姐 &#x1f495;&#x1f495;个人简介&#xff1a;十年Java&#xff0c;Python美女程序员一枚&#xff0c;精通计算机专业前后端各类框架。 &#x1f495;&#x1f495;各类成品Java毕设 。javaweb&#xff0c;ssm&#xf…

gitlab无法登录问题

在我第一次安装gitlab的时候发现登录页面是 正常的页面应该是 这种情况的主要原因是不是第一次登录&#xff0c;所以我们要找到原先的密码 解决方式&#xff1a; [rootgitlab ~]# vim /etc/gitlab/initial_root_password# WARNING: This value is valid only in the followin…

无线4G多联机分户计费集中控制系统

拓森无线4G多联机集中控制系统应用于宝龙广场多联机计费集中控制节能改造项目&#xff0c;包括多联机集中控制&#xff0c;分户计费&#xff0c;空调监控管理、告警管理、节能管控、统计报表、能效分析、空调远程开关机等功能。项目的成功实施&#xff0c;不仅提升了维护管理效…

oracle多次密码错误登录,用户锁住或失效

多次输入错误账号查询状态&#xff1a; select username,account_status from dba_users; TEST EXPIRED(GRACE) 密码错误延迟登录&#xff0c;延迟登录还能登录 或者 TEST LOCKED(TIMED) 密码错误锁 TEST EXPIRED(GR…

连通两台VMware虚拟机

连通两台VMware虚拟机 Fairing Winds and Following Seas VMware各模式的区别 在尝试连接之前&#xff0c;我们要搞清楚各模式的区别 简单来说就是&#xff0c;只有桥接模式和NAT模式是可以实现虚拟机联通的&#xff0c;而桥接模式和NAT模式分别对应了 V M w a r e VMware VM…