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

vue2+OpenLayers 天地图上凸显出当前地理位置区域(4)

凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里
在这里插入图片描述

看下效果图
在这里插入图片描述
遮盖层的逃命都是可以调的
引入 下面一段代码

import sx from "@/views/json/sx1.json"; //  下载的json
import GeoJSON from "ol/format/GeoJSON";  // ol的一些方法
import Polygon, { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';
<template><div class="container"><div id="vue-openlayers" class="map-x"></div><divid="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv" style="width: 100px; height: 100px"></div></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";import sx from "@/views/json/sx1.json";
import GeoJSON from "ol/format/GeoJSON";
import Polygon, { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';export default {name: "FirstMap",data() {return {map: null,draw: null,maskLayer: null,logo,layers: [],};},methods: {initMap() {let that = this;// 将图标样式应用到点要素const features = [];const point = new Point([108.56, 34.15]); // 修改坐标格式const feature = new Feature({geometry: point,custom: { data: "123", type: "icon" },type: "icon",});feature.setStyle([new Style({image: new Icon({crossOrigin: "anonymous",src: this.logo,// size: [40, 40],scale: 0.2, // 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源const source = new VectorSource({features,});let markLayerPoints = new VectorLayer({source: source,});let map = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new XYZ({url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",}),}),markLayerPoints, // 确保图层顺序正确// vectorLayers,],view: new View({projection: "EPSG:4326",center: [108.56, 34.15], // 修改中心坐标格式zoom: 6,}),});this.map = map;that.showSFArea() // 蓝色蒙层},// 移除图层方法removeFun(layerId) {const that = this;const selArr = that.map.getLayers().getArray(); // 获取所有图层selArr.map((item, index) => {if (item.values_?.id == layerId) {// 移除图层that.map.removeLayer(selArr[index]);}});},// 创建蒙层,凸显区域showSFArea() {const initLayer = new VectorLayer({name: "blueLayer",// zIndex: 1,// opacity: 0.6,source: new VectorSource(),style: new Style({fill: new Fill({color: "rgba(3, 44, 79, 1)",}),stroke: new Stroke({color: "rgba(0,0,0,0.8)",width: 1})}),});this.map.addLayer(initLayer);this.addConver(initLayer);},// 添加遮罩addConver(converLayer) {let codeJson = sx;var fts = new GeoJSON().readFeatures(codeJson);const ft = fts[0];const converGeom = this.erase(ft.getGeometry());const convertFt = new Feature({geometry: converGeom,});converLayer.getSource().addFeature(convertFt);},// 擦除操作,生产遮罩范围erase(geom) {const extent = [-180, -90, 180, 90];const polygonRing = fromExtent(extent);const coords = geom.getCoordinates();coords.forEach((coord) => {const linearRing = new LinearRing(coord[0]);polygonRing.appendLinearRing(linearRing);});return polygonRing;},},mounted() {this.initMap();},
};
</script>
<style scoped lang="scss">
.input {position: fixed;top: 10px;right: 10px;border-radius: 10px;background: #fff;display: flex;flex-direction: column;padding: 5px;padding-bottom: 10px;> * {margin-top: 10px;display: flex;align-items: center;}
}
</style><style scoped lang="scss">
.container {position: relative;.btn {position: absolute;left: 4%;top: 1%;}
}#vue-openlayers {width: 100vw;height: 100vh;
}h3 {line-height: 40px;
}/* 隐藏信息盒子的初始样式 */
#info-box {display: none;position: absolute;background: white;border: 1px solid black;padding: 10px;border-radius: 5px;font-size: 14px;pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>

相关文章:

vue2+OpenLayers 天地图上凸显出当前地理位置区域(4)

凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里 看下效果图 遮盖层的逃命都是可以调的 引入 下面一段代码 import sx from "/views/json/sx1.json"; // 下载的json import GeoJSON from "ol/format/GeoJSON"; // ol的一些方法 imp…...

基于Python、Django开发Web计算器

1、创建项目 创建Django项目参照https://blog.csdn.net/qq_42148307/article/details/140798249&#xff0c;其中项目名为compute&#xff0c;并在该项目下创建一个名为app的应用&#xff0c;并且进行基本的配置。 2、导入Bootstrap前端框架 Bootstrap的使用参照https://blo…...

高性能并行计算面试-核心概念-问题理解

目录 1.什么是并行计算&#xff1f;高性能从哪些方面体现&#xff1f; 2.CPU常见的并行技术 3.GPU并行 4.并发与并行 5.常见的并行计算模型 6.如何评估并行程序的性能&#xff1f; 7.描述Am达尔定律和Gustafson定律&#xff0c;并解释它们对并行计算性能的影响 8.并行计…...

java-activiti笔记

版本&#xff1a;activiti7 <dependency><groupId>org.activiti</groupId><artifactId>activiti-json-converter</artifactId><version>7.0.0.Beta2</version><exclusions><exclusion><groupId>org.mybatis</g…...

Layui——隐藏表单项后不再进行验证

目录 修改后的部分代码 修改后的完整代码 我编辑用户信息和添加新用户用的是同一个表单&#xff0c;不同的是编辑用户信息里没有密码项和确认密码项&#xff0c;但是把它们隐藏后仍然要进行验证&#xff0c;也就是说它们俩的验证并没有随着表单项的隐藏而关闭。原因&#xf…...

Github Copilot 使用技巧

&#x1f3af;目标读者 本文不包含如何安装 Github Copilot本文介绍了 Github Copilot 使用方法和一些技巧 本人已经使用 Github Copilot 2 年了&#xff0c;交了 3 次年费&#xff0c;每年 100$ 着实心痛&#xff0c;但是用着确实爽歪歪 但是感觉一直只用了一小部分功能&am…...

【实现100个unity特效之20】用unity实现物品悬浮和发光像素粒子特效

最终效果 文章目录 最终效果新增飞升粒子效果光圈效果修改不同颜色完结 新增飞升粒子效果 效果 光圈效果 效果 修改不同颜色 完结 赠人玫瑰&#xff0c;手有余香&#xff01;如果文章内容对你有所帮助&#xff0c;请不要吝啬你的点赞评论和关注&#xff0c;你的每一次支持…...

GPT-4o mini发布,轻量级大模型如何颠覆AI的未来?

从巨无霸到小巨人&#xff1a;GPT-4o Mini的创新之路 ©作者|潇潇 来源|神州问学 引言 随着人工智能技术的飞速进步&#xff0c;AI领域的竞争日益激烈&#xff0c;大型模型的发布几乎成为常态。然而&#xff0c;这些庞大的模型通常需要大量的计算资源和存储空间&#xff…...

高性能的 C++ Web 开发框架 CPPCMS + WebSocket 模拟实现聊天与文件传输案例。

1. 项目结构 2. config.json {"service": {"api": "http","port": 8080,"ip": "0.0.0.0"},"http": {"script": "","static": "/static"} }3. CMakeLists.txt…...

合合信息OCR支持30类国内常见票据一站式分类识别,支持医疗发票、数电票识别

合合信息TextIn平台明星产品——国内通用票据识别&#xff0c;重磅更新&#xff01; 产品支持票据类型扩展到23大类、30小类&#xff0c;覆盖场景更全面&#xff0c;同时升级优化了多款票据识别模型&#xff0c;平均识别率较前版本提升11.5%&#xff0c;整体识别速度提升21.9%…...

LeetCode-day40-3151. 特殊数组 I

LeetCode-day40-3151. 特殊数组 I 题目描述示例示例1&#xff1a;示例2&#xff1a;示例3&#xff1a; 思路代码 题目描述 如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 Aging 有一个整数数组 nums。如果 nums 是一个 特殊…...

技术研究:Redis 数据结构与 I/O 模型

数据结构 Redis之所以“快”&#xff0c;一方面因为它是内存数据库&#xff0c;所有操作都在内存上完成&#xff0c;内存的访问速度本来就快。另一方面则是因为高效的数据结构&#xff0c;使得操作键值效率较高。总体来说&#xff0c;Redis使用了一个用来保存每个Key/Value的全…...

46-扇孔的处理及铺铜以及布线

1.先连信号线 2.电源管脚,以如下方式处理&#xff1a; 引线打孔处理...

LVS实验的三模式总结

文章目录 LVS的概念叙述NAT工作模式实战案例**思想&#xff1a;**NAT工作模式的优点NAT工作模式的缺点 NAT工作模式的应用场景大致配置 route&#xff1a;打开路由内核功能 部署DR模式集群案例工作思想&#xff1a;大致工作图如下思路模型 具体配置与事实步骤补充 防火墙标签解…...

游戏安全入门-扫雷分析远程线程注入

前言 无论学习什么&#xff0c;首先&#xff0c;我们应该有个目标&#xff0c;那么入门windows游戏安全&#xff0c;脑海中浮现出来的一个游戏 – 扫雷&#xff0c;一款家喻户晓的游戏&#xff0c;虽然已经被大家分析的不能再透了&#xff0c;但是我觉得自己去分析一下还是极好…...

bert-base-chinese模型的完整训练、推理和一些思考

前言 使用google-bert/bert-base-chinese模型进行中文文本分类任务&#xff0c;使用THUCNews中文数据集进行训练&#xff0c;训练完成后&#xff0c;可以导出模型&#xff0c;进行预测。 项目详细介绍和数据下载 数据集下载地址 Github完整代码 现记录训练过程中的一些感悟…...

JS基础5(JS的作用域和JS预解析)

JS的作用域 1. 全局作用域 全局作用域是在代码的任何地方都能访问到的最外层作用域。在浏览器环境下&#xff0c;全局作用域就是window对象&#xff0c;因此所有在全局作用域中声明的变量和函数都会成为window对象的属性和方法。 var globalVar "I am global"; …...

Doris 夺命 30 连问!(中)

导言 抱歉&#xff0c;作为从 S2 开始的骨灰级玩家看到 EDGUZI 官宣首发上线&#xff0c;兴奋之余忘了写文档 - -||&#xff0c;还望各位看官老爷见谅&#xff0c;这次错了&#xff0c;下次还敢 ^_^ 这是继上次的 30 问上篇的中篇&#xff0c;也是 10 个问题&#xff0c;有些…...

书生.浦江大模型实战训练营——(四)书生·浦语大模型全链路开源开放体系

最近在学习书生.浦江大模型实战训练营&#xff0c;所有课程都免费&#xff0c;以关卡的形式学习&#xff0c;也比较有意思&#xff0c;提供免费的算力实战&#xff0c;真的很不错&#xff08;无广&#xff09;&#xff01;欢迎大家一起学习&#xff0c;打开LLM探索大门&#xf…...

SpringBoot 整合 RabbitMQ 实现延迟消息

一、业务场景说明 用于解决用户下单以后&#xff0c;订单超时如何取消订单的问题。 用户进行下单操作&#xff08;会有锁定商品库存、使用优惠券、积分一系列的操作&#xff09;&#xff1b;生成订单&#xff0c;获取订单的id&#xff1b;获取到设置的订单超时时间&#xff0…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...