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

openlayers 封装加载本地geojson数据 - vue3

Geojson数据是矢量数据,主要是点、线、面数据集合

Geojson数据获取:DataV.GeoAtlas地理小工具系列

实现代码如下:

 

import {ref,toRaw} from 'vue';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Style, Fill, Stroke, Circle as CircleStyle  } from 'ol/style';
import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, Geometry} from 'ol/geom.js';
import { transform, fromLonLat, toLonLat } from 'ol/proj.js'
import Feature from 'ol/Feature.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Select  from 'ol/interaction/Select.js';
import Overlay from 'ol/Overlay';
import pointData from "../../../static/datas/point.json";// 本地点数据
import lineData from "../../../static/datas/line.json";// 本地线数据
import polygonData from "../../../static/datas/polygon.json";// 本地面数据
import multiPointData from "../../../static/datas/multiPoint.json";// 本地multipoint数据
import multiLineData from "../../../static/datas/multiLine.json";// 本地multiLine数据
import multiPolygonData from "../../../static/datas/multiPolygon.json";// 本地multiPolygon数据
import ccsData from "../../../static/datas/ccs.json";// 数据源
const vectorSource = ref(null);
// 创建图层
const vectorLayer = ref(null);// 添加
export const addBaseGeoJson = (map) =>{// 删除图层map.removeLayer(vectorLayer.value);// 创建要素数据源vectorSource.value = new VectorSource();// 创建要素图层vectorLayer.value = new VectorLayer();// 遍历本地数据pointData.features.forEach(function(element){const feature = new Feature();// 要素名称/类型const featurName = element.type;feature.setGeometryName(featurName);// 要素属性信息const properties = element.properties;// 要素图层类型const geomType = element.geometry.type;console.log("geomType",geomType)if("Point" == geomType){// 点数据// 要素数据图形 const pointGeom = element.geometry.coordinates// 转换坐标//const transformedCoords = transform([pointGeom[0],pointGeom[1]],'EPSG:4326', 'EPSG:3857');const transformedCoords = fromLonLat([pointGeom[0],pointGeom[1]]);// 添加数据const pointGeometry = new Point(transformedCoords);feature.setGeometry(pointGeometry);// 设置样式feature.setStyle(new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:7,// 半径}),}));}else if("LineString" == geomType){// 线数据// 要素数据图形 const lineGeom = element.geometry.coordinates;// 转换坐标const transformedCoords = lineGeom.map((coord) => {return transform(coord, 'EPSG:4326','EPSG:3857');});// 创建线对象const lineGeometry = new LineString(transformedCoords);feature.setGeometry(lineGeometry);// 设置线特征样式(Style)feature.setStyle(new Style({stroke:new Stroke({color:"red",// 线的颜色width:7// 线宽带})}));}else if("Polygon" == geomType){// 面数据// 要素数据图形 const polygonGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  polygonGeom.map((item)=>{const coordResult = item.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});// 创建面对象const polygonGeometry = new Polygon(transformedCoords);feature.setGeometry(polygonGeometry);// 设置多边形样式(Style)feature.setStyle(new Style({stroke:new Stroke({color:"yellow",// 多边形边界颜色width:2// 多边形边界宽度}),fill:new Fill({color:'rgba(0,0,255,0.5)'// 多边形填充颜色,这里设置为半透明颜色})}));}else if("MultiPoint" == geomType){// 点集合// 要素数据图形 const multiPointGeom = element.geometry.coordinates;// 转换坐标const transformedCoords = multiPointGeom.map((coord) => {return transform(coord, 'EPSG:4326','EPSG:3857');});// 创建MultiPoint对象const MultiPointGeometry = new MultiPoint(transformedCoords);feature.setGeometry(MultiPointGeometry);// 设置样式feature.setStyle(new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:7,// 半径}),}));}else if("MultiLineString" == geomType){// 线集合// 要素数据图形 const multiLineGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  multiLineGeom.map((item)=>{const coordResult = item.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});// 创建MultiLineString对象const MultiLineGeometry = new MultiLineString(transformedCoords);feature.setGeometry(MultiLineGeometry);// 设置多边形样式(Style)feature.setStyle(new Style({stroke:new Stroke({color:"green",// 多边形边界颜色width:2// 多边形边界宽度}),fill:new Fill({color:'rgba(0,0,255,0.5)'// 多边形填充颜色,这里设置为半透明颜色})}));}else if("MultiPolygon" == geomType){// 面集合// 要素数据图形 const multiPolygonGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  multiPolygonGeom.map((parentItem)=>{const parentCoordResult = parentItem.map((parentCoord)=>{const coordResult = parentCoord.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});return parentCoordResult;});// 创建MultiPolygmon对象const multiPolygonGeometry = new MultiPolygon(transformedCoords);feature.setGeometry(multiPolygonGeometry);feature.setStyle(new Style({fill: new Fill({color: 'rgba(255, 0, 0, 1)'}),// 样式-边框stroke: new Stroke({color: '#0099ff',width: 3}),}));}// 点数据添加到数据源vectorSource.value.addFeature(feature);// 要素数据信息feature.setProperties(properties);});// 数据源添加到图层vectorLayer.value.setSource(vectorSource.value);// 将图层添加到地图上map.addLayer(vectorLayer.value);// 点选查看数据信息map.on('click', ev => {const pixel = ev.pixel   // 鼠标点击的位置,这个应该是像素const mousePoint = ev.coordinate  // 鼠标点击的坐标位置const feature = map.forEachFeatureAtPixel(pixel, (feature) => {return feature   // 查找出点击的哪个要素});if (feature) {  // 如果是点击了坐标点// 区域名称const properties = feature.getProperties();console.log("properties",properties);} else {console.log("没有要素数据");}})// 选中获取geojson数据/*if(vectorLayer.value != null){const featureLayer = toRaw(vectorLayer.value);// 创建选择交互const selectInteraction = new Select({layers:[featureLayer],});map.addInteraction(selectInteraction);// 监听选中要素的变化selectInteraction.on('select',(event) =>{// 获取被选中的要素const selectedFeatures = event.target.getFeatures();selectedFeatures.forEach(element => {//获取到选中要素的属性console.log("element",element.getProperties());});});}else{alert("没有要素图层!")}*/}/*** 添加点(坐标不一致位置会偏)不推荐使用* @param {*} map */export const addPoint = (map) =>{// 删除图层map.removeLayer(vectorLayer.value);// 加载本地数据vectorSource.value = new VectorSource({features: new GeoJSON().readFeatures(pointData),});vectorLayer.value = new VectorLayer({source: vectorSource.value,style:new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:70,// 半径}),}),});map.addLayer(vectorLayer.value);
}

使用方法:

在**.vue引入

import {addBaseGeoJson} from "../js/baseGeojson.js";// 引入js// 使用
// 全图事件
const addJson = () => {addBaseGeoJson(map); 
}

注意:本地数据放置在根目录新建static/datas/下

point.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "点1","region":"绿园区","content":"信息点1"},"geometry": {"type": "Point","coordinates": [125.362488, 43.916037]}},{"type": "Feature","properties": {"name": "点2","region":"绿园区","content":"信息点2"},"geometry": {"type": "Point","coordinates": [125.362488, 43.906037]}},{"type": "Feature","properties": {"name": "点3","region":"绿园区","content":"信息点3"},"geometry": {"type": "Point","coordinates": [125.363488, 43.936037]}}]
}

line.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "线1","region":"测试区1","content":"信息线1"},"geometry": {"type": "LineString","coordinates": [[125.363488, 43.936037],[125.362488, 43.906037]]}},{"type": "Feature","properties": {"name": "线2","region":"测试区2","content":"信息线2"},"geometry": {"type": "LineString","coordinates": [[125.44,43.95],[125.44,43.96]]}},{"type": "Feature","properties": {"name": "线3","region":"测试区1","content":"信息线1"},"geometry": {"type": "LineString","coordinates": [[125.34,43.95],[125.54,43.96]]}}]
}

polygon.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "面1","region":"测试区1","content":"信息面1"},"geometry": {"type": "Polygon","coordinates": [[[125.323488, 43.86037],[124.332488, 42.706037],[125.342401, 43.607037]]]}},{"type": "Feature","properties": {"name": "面2","region":"测试区2","content":"信息面2"},"geometry": {"type": "Polygon","coordinates": [[[125.44,43.95],[125.46,43.96],[125.24,42.96]]]}},{"type": "Feature","properties": {"name": "面3","region":"测试区1","content":"信息面1"},"geometry": {"type": "Polygon","coordinates": [[[125.34,43.95],[125.54,43.96],[125.64,43.90],[125.68,43.98]]]}}]
}

multiPoint.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiPoint点1","region":"绿园区","content":"信息点1"},"geometry": {"type": "MultiPoint","coordinates": [[125.362488, 43.916037],[125.352488, 43.936037]]}},{"type": "Feature","properties": {"name": "multiPoint点2","region":"绿园区","content":"信息点2"},"geometry": {"type": "MultiPoint","coordinates": [[125.362488, 43.906037],[125.372488, 43.946037]]}},{"type": "Feature","properties": {"name": "multiPoint点3","region":"绿园区","content":"信息点3"},"geometry": {"type": "MultiPoint","coordinates": [[125.563488, 43.976037],[125.373488, 43.946037]]}}]}

multiLine.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiLine线1","region":"测试区1","content":"信息线1"},"geometry": {"type": "MultiLineString","coordinates": [[[125.363488, 43.936037], [125.362488, 43.906037]],[[125.263488, 43.736037], [125.242488, 43.706037]]]}},{"type": "Feature","properties": {"name": "multiLine线2","region":"测试区2","content":"信息线2"},"geometry": {"type": "MultiLineString","coordinates": [[[125.49,43.92],[125.45,43.96]],[[125.45,43.91],[125.44,43.96]]]}},{"type": "Feature","properties": {"name": "multiLine线3","region":"测试区1","content":"信息线1"},"geometry": {"type": "MultiLineString","coordinates": [[[125.38,43.95],[125.54,43.96]],[[125.34,43.92],[125.54,47.94]]]}}]
}

multiPolygon.json数据格式:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiPolygon面1","region":"测试区1","content":"信息面1"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.323488, 43.86037],[124.332488, 42.706037],[125.342401, 43.607037]]],[[[125.123488, 43.36037],[124.132488, 42.306037],[125.142401, 43.307037]]]]}},{"type": "Feature","properties": {"name": "multiPolygon面2","region":"测试区2","content":"信息面2"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.44,43.95],[125.46,43.96],[125.24,42.96]]],[[[125.46,43.95],[125.47,43.71],[125.28,42.56]]]]}},{"type": "Feature","properties": {"name": "multiPolygon面3","region":"测试区1","content":"信息面1"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.34,43.95],[125.54,43.96],[125.64,43.90],[125.68,43.98]]],[[[125.24,43.2],[125.34,43.94],[125.44,43.97],[125.58,43.99]]]]}}]
}

相关文章:

openlayers 封装加载本地geojson数据 - vue3

Geojson数据是矢量数据,主要是点、线、面数据集合 Geojson数据获取:DataV.GeoAtlas地理小工具系列 实现代码如下: import {ref,toRaw} from vue; import { Vector as VectorLayer } from ol/layer.js; import { Vector as VectorSource } fr…...

手机号码携号转网查询接口-在线手机号码携号转网查询-手机号码携号转网查询API

接口简介:通过手机号精准查询该号码转网前及转网后所归属运营商 可查询号码是否为虚拟手机号 可查询到号码归属地信息 高准确率,实时查询运营商数据库 多用于营销场景,如运营商业务办理、客户信息查询、携号转网、电话营销等 接口地址&#x…...

yolo目标检测和姿态识别和目标追踪

要检测摄像头画面中有多少人,人一排排坐着,像教室那样。由于摄像头高度和角度的原因,有的人会被遮挡。 yolo v5 首先需要下载yolo v5官方代码,可以克隆或下载主分支的代码,或者下载release中发布的。 简单说一下环境…...

Docker搭建开源Web云桌面操作系统Puter和DaedalOS

文章目录 Puter 操作系统说明基于 Docker 启动 Puter 操作系统拉取镜像运行容器基于 Docker-Compose 启动 Puter操作系统创建目录编写docker-compose.yml运行在本地直接运行puter操作系统puter界面截图puter个人使用总结构建自己的Puter镜像daedalos基于web的操作系统说明技术特…...

FAQ-为什么交换机发给服务器的日志显示的时间少8小时

问题描述 配置交换机向日志服务器发送日志,在交换机上面查看日志显示的时间比日志服务器显示的时间快8个小时 解决方案 根据公司全球化整改的要求,syslog默认发送的是UTC时间。 当前设备上配置了时区UTC8,因此,设备上显示的本地…...

[表达式]真假计算

题目描述 有一棵树,不一定是二叉树。 所有叶子节点都是 True 或者 False。 对于从上往下奇数层的非叶子节点是 and,偶数层非叶子节点为 or。 树上每个节点的值是所有孩子节点的值进行该节点的运算操作。 判断一棵树能否砍掉,最快的方法就是从…...

记录一次线上环境svchost.exe antimalware service executable 进程占用CPU过高问题

博主介绍: 大家好,我是想成为Super的Yuperman,互联网宇宙厂经验,17年医疗健康行业的码拉松奔跑者,曾担任技术专家、架构师、研发总监负责和主导多个应用架构。 技术范围: 目前专注java体系,有多…...

Docker 部署 EMQX 一分钟极速部署

部署 EMQX ( Docker ) [Step 1] : 拉取 EMQX 镜像 docker pull emqx/emqx:latest[Step 2] : 创建目录 ➡️ 创建容器 ➡️ 拷贝文件 ➡️ 授权文件 ➡️ 删除容器 # 创建目录 mkdir -p /data/emqx/{etc,data,log}# 创建容器 docker run -d --name emqx -p 1883:1883 -p 1808…...

STL-常用容器-list

1list基本概念 **功能:**将数据进行链式存储 链表(list)是一种物理存储单元上非连续的存储结构,数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成:链表由一系列结点组成 结点的组成:一个是存储…...

Lambda 架构

Lambda架构是一种用于构建可扩展、容错和实时数据处理系统的架构模式。 它由三个主要部分组成:批处理层(Batch Layer)、实时层(Speed Layer)和服务层(Serving Layer)。 Lambda架构旨在结合批处…...

Windows电脑设置网络唤醒(Wake-on-LAN)

1. 启用 Windows 电脑的 Wake-on-LAN 功能 首先,你需要确保你的 Windows 电脑支持并启用了 Wake-on-LAN: BIOS/UEFI 设置(具体看自己电脑主板如何设置): 启动 Windows 电脑,进入 BIOS/UEFI 设置。找到网络适配器相关的设置,启用 …...

前端项目构建流程

1. 需求分析 目标:明确项目目标、核心功能和用户需求。 产品需求讨论: 与产品经理、客户、业务部门讨论项目的需求和目标,理解产品的功能、业务流程以及用户需求。定义用户角色(Persona),明确不同用户的功…...

支持国密算法的数字证书-国密SSL证书详解

在互联网中,数字证书作为标志通讯各方身份信息的数字认证而存在,常见的数字证书大都采用国际算法,比如RSA算法、ECC算法、SHA2算法等。随着我国加强网络安全技术自主可控的大趋势,也出现了支持国密算法的数字证书-国密SSL证书。那…...

【EndNote使用教程】创建文献库、导入文献、文献分类

1、创建文献库 打开“EndNote”,点击“文件”,点击“新建”,选择保存文件路径。 2、导入文献 (1)可以选择导入电脑上的PDF文件,如下图所示。 (2) 也可以选择直接在浏览器网页上面直…...

双十一电容笔选哪个好?!西圣、益博思、吉玛仕电容笔实测对比!

当数码测评博主几年年,我也实测过不下10款电容笔了,对电容笔这个品类也算是半个内行人了。提到电容笔,在平替品牌的追逐中,西圣、益博思、吉玛仕这三款作为国货黑马一直备受瞩目,综合各大电商平台的销量榜、好评口碑榜…...

房地产网络安全:主要风险及缓解建议

房地产行业已开始数字化转型,因此极易受到网络犯罪的攻击。潜在风险的清单很长:从客户敏感信息的数据泄露到勒索软件攻击,网络犯罪分子将房地产公司视为其所携带的所有类型敏感信息的高价值目标。 在本文中,我们将探讨房地产领域…...

玩转大模型的第一步——提示词(Prompt)工程【抛砖篇】

前言 AI大模型提示词工程,又名 LLM prompts Project,指的是在使用大型语言模型(如OpenAI的GPT系列)时,用于引导模型生成特定响应的输入,是在使用AI大模型过程中非常重要的一个环节,是模型生成文…...

火山引擎数据飞轮线上研讨会即将开启,助力消费品牌双十一造爆款

随着双十一的临近,各大品牌方的备战工作已进入紧张而有序的倒计时阶段。这场持续十多年的电商大促,对消费者来说是购物狂欢节,对各大品牌方来说,则是更是品牌实力与策略的比拼。面对日益激烈的市场竞争,如何更好地撬动…...

【python实战】利用代理ip爬取Alibaba海外版数据

引言 在跨境电商的业务场景中,数据采集是分析市场、了解竞争对手以及优化经营策略的重要环节。然而,随着越来越多企业依赖数据驱动决策,许多跨境电商平台为了保护自身数据,采取了更严格的防护措施。这些平台通过屏蔽大陆IP地址或部…...

FFMPEG录屏(20)--- 枚举macOS下的窗口和屏幕列表,并获取名称缩略图等信息

在 macOS 下获取可屏幕共享的窗口和屏幕 在 macOS 下,我们可以通过使用 Core Graphics 和 Cocoa 框架来获取当前系统中可屏幕共享的窗口和屏幕信息。本文将详细介绍如何获取窗口和屏幕的 ID、标题、坐标、进程图标和缩略图等信息。 前提条件 在开始之前&#xff…...

XML Group端口详解

在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...

ESP32读取DHT11温湿度数据

芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...

Java编程之桥接模式

定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...