281：vue+openlayers 利用 Point 显示点

于 2024-07-24 00:30:00 发布
阅读量436 收藏 54
点赞数 72
分类专栏： # openlayers综合教程300+ 文章标签： 大剑师 openlayers教程 openlayers入门 openlayers示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/140524960
版权
openlayers综合教程300+ 专栏收录该内容
285 篇文章 202 订阅 ¥259.90 ¥399.90
订阅专栏

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 281个示例

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+openlayer中利用 Point 显示点。在OpenLayers中，Point是一种几何对象，它可以表示由点组成的几何集合。

直接复制下面的 vue+openlayers源代码࿰

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
  • 72
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 56
    评论
专栏目录
订阅专栏
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 1078
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
135：vue+openlayers添加海量点，使用WebGLPoints方法（示例代码）
大剑师兰特的GIS世界
09-28 1870
本示例的目的是介绍演示如何在vue+openlayers项目中使用webGLPoints的方法来加载海量的数据点，本示例中点击显示20000个点，速度还是蛮快的。点击查看本专栏内容目录列表。
187：vue+openlayers 轨迹动画，走过后轨道呈现不同颜色
大剑师兰特的GIS世界
12-08 1274
本示例的目的是介绍演示如何在vue+openlayers中实现轨迹动画，这里设置了小汽车开始，暂停，结束等的控制键，采用了线段步长位置获取坐标来定位点的方式来显示小车的动态。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果谷歌地图无法加载，请加载其他来练习1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560 或者同样查看：https://blog.csdn.net/cuclife/article/details/126
openlayers图标大小随zoom变化，icon动态变化 change:resolution
qlin_11的博客
09-09 5072
有两个思路；一个是动态样式，一个是事件监听更改样式。 change:resolution事件监听更改样式 1 map.getView().on('change:resolution',checkZoom);//checkZoom为调用的函数 2 3 function checkZoom() { 4 // alert("1"); 5 // var childId; 6 console.log(map.getView().getZoom()); 7 if (map.
024：Mapbox GL加载image图像文件
大剑师兰特的GIS世界
04-24 1233
第024个本示例的目的是介绍演示如何在vue+mapbox中加载image图像文件。图像源。“url”值包含图像位置。“坐标”数组包含按顺时针顺序列出的图像角的 [longitude, latitude] 对：左上角、右上角、右下角、左下角。
使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
mapbox-gl加载气象场数据（视频）
地理信息技术杂谈 博客，欢迎技术交流
01-18 793
参见链接地址： https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485814&idx=1&sn=fd818a24f69dc5bf6ad59df26fe38ae1&chksm=fc8ba944cbfc20522d5def271523b0fa0f5e0ef1478660a684fda54f277a55c1cd48ffad39ff&token=1755084543&lang=zh_CN#rd ..
Openlayers实战：回显多点、多线段、多多边形
大剑师兰特的GIS世界
07-09 797
Openlayers地图中，回显数据是非常重要的。继上一示例回显点、线、圆形、多边形后。本示例回显多线，多点，多个多边形。用到了MultiPoint,MultiLineString,MultiPolygon。多个信息的显示可以采用循环的方式，单个显示点、线、面。但是循环方式是要多次计算的，而MultiPoint，MultiLineString，MultiPolygon 一次解决，提高效率。
269：vue+openlayers 利用 MultiPoint 显示多点
大剑师兰特的GIS世界
06-20 857
本示例介绍如何在vue+openlayer中利用 MultiPoint 显示点。在OpenLayers中，MultiPoint是一种几何对象，它可以表示由多个Point组成的几何集合。
mapbox加载3dtiles倾斜摄影模型demo
07-06
mapbox加载3dtiles倾斜摄影模型demo mapbox+deck.gl加载cesium定义的3dtiles数据，方便加载倾斜摄影模型
273：vue+openlayers 显示流动轨迹并计算航向
大剑师兰特的GIS世界
07-04 1076
本示例介绍如何在vue+openlayer中显示流动轨迹并计算航向。这里要注意角度和弧度的转换，并且以正北为主方向，做不同的转变。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果**
272：vue+openlayers 显示流动轨迹并计算流动速度
大剑师兰特的GIS世界
07-02 890
本示例介绍如何在vue+openlayer中显示轨迹并计算流动速度。项目中，有一个浮标起始位于一点，结束为零一点，这期间要漂浮流动，这里计算出漂浮的距离，根据时间，计算出流动速度。
274: vue+openlayers 点图标的大小随着zoom的放大缩小而变化
最新发布
大剑师兰特的GIS世界
07-05 605
本示例介绍如何在vue+openlayer中实现点图标的大小随着zoom的放大缩小而变化。这里是一个方法的演示，可以多种变换。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果
mapboxgl添加雪碧图 addImage loadImage png/jpg svg
AllBluefm的专栏
03-19 691
二、mapboxgl不支持直接添加svg到雪碧图，可以先把svg转成base64，再绘制到canvas上生成一张图片。一、mapboxgl可以添加png或者jpg类型的图片到雪碧图中。
mapbox地图加载本地图片
jimjiayu
03-28 378
【代码】mapbox地图加载本地图片。
mapbox绘制多边形
qq_43840793的博客
07-17 978
这里的feature是一个json文件，已经上传服务器，根据url引入，内容格式如下。绘制一个填充的多边形，再描个边框。
【mapbox for javascript】绘制多边形图层并可进行编辑图层
xiaozhahza的博客
04-25 305
这个工具直接放到工具文件可以传入所需参数即可使用。
vue3 openlayers添加标注
12-16
在Vue3中，我们可以使用OpenLayers库来添加标注（marker）到地图上。下面是一个简单的步骤： 1. 首先，确保你已经安装了Vue和OpenLayers库。你可以通过npm命令来安装它们： ``` npm install vue npm install ol ``` 2. 在Vue组件中引入OpenLayers： ```javascript import * as ol from 'ol'; import 'ol/ol.css'; ``` 3. 在Vue组件中创建地图容器元素和地图对象： ```javascript mounted() { const map = new ol.Map({ target: 'map-container', // 地图容器元素的ID layers: [ new ol.layer.Tile({ source: new ol.source.OSM() // 使用OpenStreetMap作为底图 }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), // 地图中心坐标 zoom: 2 // 缩放级别 }) }); } ``` 4. 在Vue组件的模板中添加地图容器元素： ```html <template> <div id="map-container"></div> </template> ``` 5. 在Vue组件中添加标注到地图上： ```javascript mounted() { // ...其他代码 const marker = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])) // 标注的经纬度坐标 }); marker.setStyle( new ol.style.Style({ image: new ol.style.Icon({ src: 'marker.png' // 标注的图标文件路径 }) }) ); const vectorSource = new ol.source.Vector({ features: [marker] }); const vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); } ``` 通过上述步骤，我们可以在Vue3中使用OpenLayers库来添加标注到地图上。你可以根据实际情况调整代码和样式来满足你的需求。
评论 56
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值