openlayers地图使用---跟随地图比例尺动态标绘大小的一种方式3

openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式

预期:随着地图比例尺放大缩小,地图上的标绘随着变化尺寸
在这里插入图片描述
思路:通过VectorImage和动态修改Feature尺寸实现Feature跟随地图比例尺尺寸变化
优点:结合第1和第2种方式的优点,效果较好,且有过渡效果,数量越多,过渡效果越好(标绘的尺寸突变越不明显)地图响应迅速,地图操作不卡顿,图片缩放过渡自然

页面

  <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/dist/ol.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/ol.min.css" rel="stylesheet"><style>.olMap {width: 100%;height: 500px;}</style>
</head><div id="map" class="olMap"></div>

js代码

    var map = null; // 地图var vectorSource = null;//图源var feas = [];// features集合// 初始化地图function initMap() {// 矢量图层vectorSource = new ol.source.Vector();// 创建矢量图层 绘制标注const vLayer = new ol.layer.Vector({source: vectorSource})// 创建一个新的 VectorImageLayer 实例  const vectorLayerx = new ol.layer.VectorImage({source: vectorSource,zIndex: 99,style: function (feature) {// 定义样式函数,根据需要自定义样式  const style = new Style({image: new ol.style.Icon({src: '../assets/bg02.jpg', // 替换为你自己的图标URL  size: [160, 160] // 图标大小  })});return style;}});// 高德地图var gaodeMapLayer = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',wrapX: false})});//地图容器map = new ol.Map({target: 'map',layers: [gaodeMapLayer,vectorLayerx],view: new ol.View({center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点zoom: 12,minZoom: 1,maxZoom: 29}),})}initMap()/*** @description: 绘制一些图片* 特点:修改了图层类型,相比较与普通图层 更丝滑* @param {*} num* @return {*}* @author: ldl*/function drawSome(num) {vectorSource.clear()feas = []// 添加若干图片for (let i = 0; i < num; i++) {// 创建一个活动图标需要的Feature,并设置随机位置const r1 = Math.random();const r2 = Math.random();let rand1 = r1 / 100 + i / 1000 + i / 1000;let rand2 = r2 / 100 + i / 1000 + i / 1000;rand1 = r1 > 0.45 ? rand1 : -rand1;rand2 = r2 > 0.45 ? rand2 : -rand2;const feature = new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([103.23 + rand1, 35.33 + rand2], 'EPSG:4326', 'EPSG:3857'))})feature.setId(9999 + i);// 设置Feature的样式,使用小旗帜图标feature.setStyle(new ol.style.Style({image: new ol.style.Icon({src: "./bg02.jpg",anchor: [0.5, 1],scale: getScaleImgae(3000)})}))feas.push(feature)vectorSource.addFeature(feature)}}// 修改标绘的尺寸function reDrawFeatures() {// 添加若干图片for (let i = 0; i < feas.length; i++) {const feature = feas[i]// 设置缩放等级feature.getStyle().getImage().setScale(getScaleImgae(3000))}}// 计算不同比例尺下 实际距离在屏幕上的宽度pxfunction getLengthPixel(length) {return length / map.getView().getResolution()}// 计算不同比例尺下,图片在屏幕上应该缩放的大小function getScaleImgae(length) {// 图片源文件的实际宽度pxconst info = { width: 800 }const scale = getLengthPixel(length) / info.widthreturn scale}drawSome(20000)setInterval(() => {reDrawFeatures()}, 300)

如上,绘制20000个标绘,标绘的缩放效果依然流畅。
总结三种实现跟随地图比例尺动态标绘大小的方式(见实现方式1和实现方式2):

1.第2种方式,非常适合标绘数量小于10000个的情形,使用ImageStatic实现,过渡自然;
2. 第3种方式,适合比较多的标绘,过渡效果较第2种方式差一丢丢,但是不会卡顿地图操作;
3. 第1种方式是直接修改Feature的样式,过渡效果相对其他方式最差。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/208057.shtml

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

相关文章

openlayers地图使用---跟随地图比例尺动态标绘大小的一种方式2

openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式2 预期&#xff1a;随着地图比例尺放大缩小&#xff0c;地图上的标绘随着变化尺寸 思路&#xff1a;通过不断添加地图图层实现标绘的动态缩放 优点&#xff1a;标绘放大缩小非常流畅 缺点&#xff1a;标绘超过1000…

LangChain 22 LangServe用于一键部署LangChain应用程序

LangChain系列文章 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储&#xff0c;读取YouTube的视频文本搜索I…

3DCAT+上汽奥迪:打造新零售汽车配置器实时云渲染解决方案

在 5G、云计算等技术飞速发展的加持下&#xff0c;云渲染技术迎来了突飞猛进的发展。在这样的背景下&#xff0c;3DCAT应运而生&#xff0c;成为了业内知名的实时云渲染服务商之一。 交互式3D实时云看车作为云渲染技术的一种使用场景&#xff0c;也逐步成为一种新的看车方式&a…

设备温度和振动综合监测:温振一体式传感器的优点和应用

随着工业设备的复杂性和自动化程度的提高&#xff0c;对设备状态监测的需求也日益增加。温振一体式传感器作为一种集振动和温度监测于一体的传感器&#xff0c;具备多项优势&#xff0c;因此在工业设备状态监测领域得到广泛应用。 温振一体式传感器基于振动传感器和温度传感器的…

网络运维与网络安全 学习笔记2023.12.1

网络运维与网络安全 学习笔记 第三十二天 今日目标 ACL原理与类型、基本ACL配置、高级ACL配置 高级ACL之ICMP、高级ACL之telnet ACL原理与类型 项目背景 为了企业的业务安全&#xff0c;要求不同部门对服务器有不同的权限 PC1不能访问Server PC2允许访问Server 允许其他所…

043:vue项目一直出现 sockjs-node/info?t=XX的解决办法

第043个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

Linux文件系统与基础IO

文章目录 1 C文件接口1.1 fopen1.2 fwrite、fread、rewind、fclose 2 文件系统调用2.1 open2.1.1 参数2&#xff1a;flags2.1.2 参数3&#xff1a;mode2.1.3 返回值——file descriptor 2.2 write2.3 read2.4 close 3 文件的本质3.1 struct file3.2 一个进程如何与多个文件相关…

Python 日志指南

目录 日志指南 日志基础教程 什么时候使用日志 一个简单的例子 记录日志到文件 从多个模块记录日志 记录变量数据 更改显示消息的格式 在消息中显示日期/时间 后续步骤 进阶日志教程 记录流程 记录器 处理器 格式器 配置日志记录 如果没有提供配置会发生什么 …

QLoRA论文概述

QLORA: Efficient Finetuning of Quantized LLMs QLoRA论文概述前言&#xff08;省流版本&#xff09;摘要论文十问实验实验1数据集和模型实验结论 实验2数据集和模型实验结论 局限性模型尺度数据集其他微调方法 QLoRA论文概述 前言&#xff08;省流版本&#xff09; 微调需要…

期末速成数据库极简版【查询】(2)

目录 select数据查询----表 【1】筛选列 【2】where简单查询 【3】top-n/distinct/排序的查询 【4】常用内置函数 常用日期函数 常用的字符串函数 【5】模糊查询 【6】表数据操作——增/删/改 插入 更新 删除 【7】数据汇总 聚合 分类 ​ &#x1f642;&#…

分享十几个适合新手练习的软件测试项目

说实话&#xff0c;在找项目的过程中&#xff0c;我下载过&#xff08;甚至付费下载过&#xff09;N多个项目、联系过很多项目的作者&#xff0c;但是绝大部分项目&#xff0c;在我看来&#xff0c;并不适合你拿来练习&#xff0c;它们或多或少都存在着“问题”&#xff0c;比如…

12v转48v升压电源芯片:参数、特点及应用领域

12v转48v升压电源芯片&#xff1a;参数、特点及应用领域 随着电子设备的日益普及&#xff0c;电源芯片的需求也在不断增长。今天我们将介绍一款具有广泛应用前景的升压电源芯片——12v转48v升压电源芯片。该芯片具有宽输入电压范围、高效率、固定工作频率等特点&#xff0c;适…

mp3的播放

1.这段vue代码会播放声音&#xff0c;但是会有audio标签 <template><div><audio id"myAudio" controls><source src"./test.mp3" type"audio/mp3" />Your browser does not support the audio tag.</audio></…

库卡LBR_iisy_3_R760协作机器人导入到coppeliasim

1.从库卡官网xpert下载模型 一般载都是这个step文件格式&#xff0c;其他的好像不太好用。coppeliasim导入格式用的是stl,需要用freeCAD打开重新转换一下。下载下来后&#xff0c;很多都是一个整体&#xff0c;在freeCAD导入中&#xff0c;导入选择要不勾选合并。 下载完用CAD …

正则表达式详细讲解

目录 一、正则表达式概念 二、八元素 1、普通字符&#xff1a; 2、元字符&#xff1a; 3、通配符 .&#xff1a; 4、字符类 []&#xff1a; 5、量词&#xff1a; 6、锚点 ^ 和 $&#xff1a; 7、捕获组 ()&#xff1a; 8、转义字符 \&#xff1a; 三、日常使用的正则…

markdown记录

文章目录 基础操作使用一级列表、二级列表 博文链接 基础操作 使用一级列表、二级列表 博文链接 CSDN-Markdown语法集锦 CSDN-markdown语法之如何使用LaTeX语法编写数学公式 CSDN Markdown简明教程1-关于Markdown CSDN Markdown简明教程2-基本使用 CSDN Markdown简明教程3-表…

Bash脚本调用百度翻译API进行中文到英文的翻译

写一个bash脚本调用百度翻译API进行中文到英文的翻译&#xff0c;首先需要进行相关的申请。看百度给出的文档链接: 百度翻译API文档 需要先注册一个百度账号&#xff0c;然后申请APPID。脚本中会用到appid和key这两个值。按照文档给出的提示可以获得。如下是脚本&#xff1a; #…

使用VBA创建Excel条件格式

实例需求&#xff1a;数据总行数不确定&#xff0c;现需要将Category区域&#xff08;即C列到J列&#xff09;中第3行开始的区域设置条件格式&#xff0c;规则如下&#xff1a; 只对部分指定单元格应用色阶条件格式&#xff08;3色&#xff09;指定单元格应满足条件&#xff1…

移动距离

//偶数行需要反转&#xff0c;判断行数时,最后一个需要特判,可以用向上取整 //也可以把传入的值减一,下标从0开始 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public class Main{static int w,m,n;static BufferedReader i…

大数据技术1:大数据发展简史

前言&#xff1a;学习大数据技术&#xff0c;知道会用已经够了&#xff0c;但是要想走得更远&#xff0c;应该了解它发展的来龙去脉&#xff0c;为何会有新的技术/工具的出现&#xff0c;相比老的技术有什么样的进步。 1、传统数据处理系统存在的问题 随着信息时代互联网技术爆…