098：vue+openlayers的set extent 和 fit extent功能（示例代码）

已于 2024-05-14 14:36:28 修改
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： vue.js javascript openlayers openlayers示例 openlayers教程
于 2022-08-28 07:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/126499314
本文由高级前端工程师分享，通过vue+openlayers实现地图的set extent和fit extent功能，提供详细配置步骤及87行源代码示例，涵盖地图加载、控件展示、数据加载、图形绘制、事件交互、测量等多个应用场景。

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

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

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+openlayers中使用extent，演示 set extent 和 fit extent等内容。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560
或者同样查看：https://blog.csdn.net/cuclife/article/details/126195754
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、示例源代码（共87行）


/*
* @Author: 大剑师兰特（xiaozhuanlan），还是
了解本专栏 订阅专栏 解锁全文
Openlayers实战：使几何图形适配窗口
大剑师兰特的GIS世界
08-08 1476
Openlayers开发的项目中，有一种应用非常重要，就是绘制或者显示出几何图形后，让几何图形居中并适配到窗口下，这样能让用户很好的聚焦到所要看的内容中去。这里使用了fit的这个view 的方法，具体的操作请参考示例源代码。
Openlayers实战：extent介绍及实际应用
大剑师兰特的GIS世界
07-23 1553
Openlayers中，extent是重要的属性，它主要目的是圈定边界。setExtent方法可以设定边界的值；fit()方法可以适配狂口的位置。
openlayers自适应视图 (十三)
吴佩佩佩佩的博客
09-05 5926
在开发gis应用中，经常碰到需要改变视图来展示某个区域，比如切换每个城市，以前我的方法是通过区划数据计算出中心点和缩放等级设置给视图，如： let center = [x, y] let zoom = 15 map.getView().setCenter(center) map.getView().setZoom(zoom) 后来我就想，能不能去自适应center和zoom，通过翻官方文档，找到了view中的fit方法，来看一下官方文档的介绍： fit方法可以传2个参数。 第一个是几何图形或者范围，其实
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 1605
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
openlayers图标大小随zoom变化，icon动态变化 change:resolution
qlin_11的博客
09-09 5665
有两个思路；一个是动态样式，一个是事件监听更改样式。 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.
083：vue+openlayers 地点搜索定位 （代码示例）
大剑师兰特的GIS世界
08-23 2261
本示例的目的是介绍演示如何在vue+openlayers中使用geocoder插件来查询地址，采用popup的形式来显示定位地点。
142：vue+openlayers 测量长度和面积，modifyend后更改数值
大剑师兰特的GIS世界
10-10 675
本示例的目的是介绍如何在vue+openlayers项目中测量长度和面积，控制开关及提示信息尾随在某个点上，长度尾随在最后一个点，面积是extent的中心交互点。通过modify来修改线段或者面积的信息，modifyend执行后，相应的数值会随之改变。关键部分是，modifyend得到的是一组features点击查看本专栏内容目录列表。
274: vue+openlayers 点图标的大小随着zoom的放大缩小而变化
大剑师兰特的GIS世界
07-05 1156
本示例介绍如何在vue+openlayer中实现点图标的大小随着zoom的放大缩小而变化。这里是一个方法的演示，可以多种变换。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果
273：vue+openlayers 显示流动轨迹并计算航向
大剑师兰特的GIS世界
07-04 1747
本示例介绍如何在vue+openlayer中显示流动轨迹并计算航向。这里要注意角度和弧度的转换，并且以正北为主方向，做不同的转变。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果**
024：Mapbox GL加载image图像文件
大剑师兰特的GIS世界
04-24 1682
第024个本示例的目的是介绍演示如何在vue+mapbox中加载image图像文件。图像源。“url”值包含图像位置。“坐标”数组包含按顺时针顺序列出的图像角的 [longitude, latitude] 对：左上角、右上角、右下角、左下角。
[Mapbox GL]使用data-driven风格绘制圆形
每天写一点，进步一点点
12-21 2525
使用分类的circle-color属性函数实现可视化 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken =
Openlayer+Vue组件实现弹窗自定义开发
胡萝卜先生的进阶之路
07-13 1186
<template> <div id="map" ref="rootmap"> </div> </template> <script> import { Map, View, Feature, Overlay } from "ol"; import TileLayer from "ol/layer/Tile"; import OSM from "ol/source/OSM"; import XYZ from "ol/sour
使用Vue和OpenLayers在不同坐标参考系（EPSG）下的范围值处理 - JavaScript实现
LdfcLoop的博客
09-17 370
在Web地图应用中，我们经常需要对不同坐标参考系（EPSG）下的范围值进行处理和转换。本文将介绍如何使用Vue和OpenLayers库来处理EPSG：3857、EPSG：4326和CRS：84三种常见坐标参考系下的范围值，并给出相应的JavaScript源代码示例。函数进行不同坐标参考系下的范围值转换。同时，还演示了在地图上展示不同坐标参考系下范围值的方法。希望本文能帮助您理解和处理多种坐标参考系下的范围值。本文介绍了使用Vue和OpenLayers库处理不同坐标参考系下的范围值。
mapbox-gl加载气象场数据（视频）
地理信息技术杂谈 博客，欢迎技术交流
01-18 994
参见链接地址： https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485814&idx=1&sn=fd818a24f69dc5bf6ad59df26fe38ae1&chksm=fc8ba944cbfc20522d5def271523b0fa0f5e0ef1478660a684fda54f277a55c1cd48ffad39ff&token=1755084543&lang=zh_CN#rd ..
mapboxgl添加雪碧图 addImage loadImage png/jpg svg
AllBluefm的专栏
03-19 1960
二、mapboxgl不支持直接添加svg到雪碧图，可以先把svg转成base64，再绘制到canvas上生成一张图片。一、mapboxgl可以添加png或者jpg类型的图片到雪碧图中。
mapbox-gl开发教程（十四）：画圆技巧
地理信息技术杂谈 博客，欢迎技术交流
07-29 1933
mapbox-gl提供了一个画圆的图层方式，图层的类型设置成circle，通过设置circle-radius，实现圆的大小变化，不过这个参数的单位是像素（pixels），在地图缩放的时候，圆一直是像素尺寸，在地图上覆盖的空间面积也不同，不能满足按照地理距离单位的变化。mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。...
Vue+OpenLayers学习系列（九）Vue+OpenLayers小案例（长度测量、面积测量、坐标定位、坐标获取）
Ocean111best的博客
03-11 2158
很早之前做的一个例子，最近想复习下Vue+OpenLayers的使用案例，所以发出来供大家下载 vue-ol-demo-master 本Demo的功能包括：地图展示、地图放大缩小、添加鹰眼、长度测量、面积测量、坐标获取、坐标定位。 其中测量工具实现的方法逻辑单独放在src/shared/tools/measure.js文件里面，避免放到组件里面太大太冗余。 运行方法： #下载依赖 npm install #运行 npm run serve ...
openlayers学习——2、openlayers放大缩小
记录生活点滴
01-06 4616
openlayers放大缩小 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/inde
使用Mapbox GL加载mp4视频文件的JavaScript方法
ByteZenith的博客
09-18 235
Mapbox GL是一款强大的地图渲染库，它提供了各种功能和扩展，可以用于创建交互式地图应用程序。而在开发中，有时候我们需要在地图上显示视频内容，这就需要加载mp4视频文件并将其嵌入到地图中。接下来，我们需要创建一个Mapbox GL地图实例，并将其添加到页面上的指定元素中。然后，我们可以使用Mapbox GL提供的内置控件来控制地图的交互和导航。通过以上步骤，我们就可以在Mapbox GL地图中加载mp4视频文件并进行相应的控制了。现在，我们需要创建一个HTML视频元素，并将其添加到地图上的指定位置。
vue+openlayers添加海量点，使用WebGLPoints方法（示例代码）
最新发布
10-15
Vue.js 和 OpenLayers 结合可以创建复杂的地图应用，尤其是处理大量数据时。OpenLayers 的 WebGLPoints 方法允许你渲染大型点集，它通过 WebGL 提供了高性能的图形渲染能力。 以下是一个简单的 Vue 组件示例，展示了如何使用 `WebGLPoints` 来显示大量的点： ```html <template> <div ref="map" :style="{ height: '400px' }"></div> </template> <script> import { Map, VectorSource, Point, Layer } from 'ol'; import 'ol/webgl'; export default { data() { return { points: [], // 这里需要你自己填充海量点的数据 map: null, }; }, mounted() { const canvas = this.$refs.map.canvas; // 初始化地图 this.map = new Map({ target: canvas, view: new View(), layers: [ new Layer({ source: new VectorSource({ type: 'geojson', url: 'your_data.json', // 你的点数据源，可能是文件或API format: new GeoJSON(), loader: () => { return fetch('your_data.json') .then(response => response.json()) .then(data => ({ features: data.features })); }, }), style: function(feature) { return { image: new ImageMarker( new Point(feature.getGeometry().getCoordinates()), { size: [8, 8] } ), }; }, }), ], }); // 使用WebGLPoints渲染点 const webGLPointsLayer = new ol.layer.Vector({ source: new ol.source.Vector({ wrapX: false, useSpatialIndex: false, format: new ol.format.GeoJSON(), loader: () => { // 加载并解析GeoJSON数据 return fetch('your_data.json') .then(response => response.json()) .then(data => { const features = data.features.map(f => f.geometry); return { type: 'FeatureCollection', features: features, }; }); }, strategy: ol.loadingstrategy.tileVector({ tileGrid: this.map.getView().getResolutionScale(512), extent: this.map.getSize().tonormalizedUnits(), reprojection: function(extent, resolution) { return transformExtent(extent, this.source.projection, this.view.getProjection()); }, }), strategies: [new ol.loadingstrategy.BBOX(), new ol.loadingstrategy.ZoomLevels()], }), // 使用WebGLPoints样式 style: function(feature) { return [ new ol.style.Style({ image: new ol.style.WebGLPoints({ size: 1, fill: new ol.style.Fill({ color: [255, 255, 255, 0.7] }), stroke: new ol.style.Stroke({ color: [0, 0, 0, 1], width: 1 }), radius: 6, }), geometry: feature.getGeometry(), }) ]; }, }); this.map.add(webGLPointsLayer); }, }; </script> ``` 在这个例子中，首先从GeoJSON数据加载点，并在`mounted`生命周期钩子函数中初始化地图和`WebGLPointsLayer`。注意，由于WebGL对性能的影响，你可能需要根据实际需求调整`loader`策略和`style`设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值