OpenLayers 3 View 简单应用

最新推荐文章于 2022-08-14 08:16:15 发布
最新推荐文章于 2022-08-14 08:16:15 发布
阅读量954 收藏
点赞数
分类专栏： OpenLayers 3 文章标签： OpenLayers 3 View Zoom extent
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521890/article/details/121904251
版权

View简单应用

视图View除了设置地图中心，还可设置地图显示范围和地图缩放级别

一、设置地图显示范围

1、地图项目结构

在这里插入图片描述

2、核心代码
        // 设置显示地图的视图
        view: new ol.View({

            //设置成都为地图中心
            center: [104.06, 30.67],

            /**
             *  根据中心设置地图显示范围
             *  注：此时设置的显示层级会失效
             *
             *  extent参数类型为包含四个元素的数组：[minX, minY, maxX, maxY]
             *      第一个元素，最小x轴坐标
             *      第二个元素，最小y轴坐标
             *      第三个元素，最大x轴坐标
             *      第四个元素，最大y轴坐标
             */
            extent: [102, 29, 104, 31],

            //指定投影
            projection: 'EPSG:4326',

            //此时设置的显示层级会失效
            zoom: 2
        }),
3、map.html
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3:设置地图显示范围</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>

<body>
<div id="map" style="width: 800px;height: 1000px;margin: auto"></div>
<script>

    // 创建地图
    new ol.Map({

        // 设置地图图层
        layers: [
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({

            //设置成都为地图中心
            center: [104.06, 30.67],

            /**
             *  根据中心设置地图显示范围
             *  注：此时设置的显示层级会失效
             *
             *  extent参数类型为包含四个元素的数组：[minX, minY, maxX, maxY]
             *      第一个元素，最小x轴坐标
             *      第二个元素，最小y轴坐标
             *      第三个元素，最大x轴坐标
             *      第四个元素，最大y轴坐标
             */
            extent: [102, 29, 104, 31],

            //指定投影
            projection: 'EPSG:4326',

            //此时设置的显示层级会失效
            zoom: 2
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

</script>
</body>

</html>

二、设置地图缩放级别

1、核心代码
 // 设置显示地图的视图
        view: new ol.View({

            //设置成都为地图中心
            center: [104.06, 30.67],

            //指定投影
            projection: 'EPSG:4326',

            //设置地图初始缩放级别
            zoom: 10
			
            // 设置地图缩放最小级别为10
            minZoom: 10,
			
			//设置地图缩放最大级别为14
            maxZoom: 14
        }),
1、map2.html
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3:地图缩放级别设置</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>

<body>
<div id="map" style="width: 800px;height: 1000px;margin: auto"></div>
<script>

    // 创建地图
    new ol.Map({

        // 设置地图图层
        layers: [
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({

            //设置成都为地图中心
            center: [104.06, 30.67],

            //指定投影
            projection: 'EPSG:4326',

            //设置地图初始缩放级别
            zoom: 10
			
            // 设置地图缩放最小级别为10
            minZoom: 10,
			
			//设置地图缩放最大级别为14
            maxZoom: 14
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

</script>
</body>

</html>
大树下躲雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Openlayers实战：extent介绍及实际应用
大剑师兰特的GIS世界
07-23 992
Openlayers中，extent是重要的属性，它主要目的是圈定边界。setExtent方法可以设定边界的值；fit()方法可以适配狂口的位置。
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 858
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
openlayers3 简单示例
07-05
openlayers 3 示例代码 demo.html:基本的地图展示示例 - map-animation.html:地图动画效果示例 - map-zoom.html:地图基本缩放操作示例 - map-controls.html：地图控件显示的操作示例 - map-geojson.html: 加载geojson示例 - map-spy.html: 地图通透镜效果 - map-swipe.html:地图卷帘效果
openlayers3 热力图
06-30
openlayers3 热力图
openLayers3基本写法
08-31
openLayers3基本写法
Android View原理（View树遍历，View重绘，View动画）
小地盘的诺克萨斯
04-01 6129
一、屏幕绘图基础 Android中的GUI系统是客户端和服务端配合的窗口系统，即后台运行了一个绘制服务，每个应用程序都是该服务端的一个客户端，当客户端需要绘制时，首先请求服务端创建一个窗口，然后在窗口中进行具体的视图内容绘制；对于每个客户端而言，他们都感觉自己独占了屏幕，而对于服务端而言，它会给每一个客户端窗口分配不同的层值，并根据用户的交互情况动态改变窗口的层值，这就给用户造成了所谓的前台
获取openlayer图层中的范围 Extent
TianKongDeTangGuo的博客
01-05 1949
foolerPolygon 为图层 foolerPolygon.getSource().getExtent()
openlayer4中，地图通过extent缩放至范围。
liuxu1875的博客
03-08 1万+
//地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。 function zoomToExtent(extent) { var MapZoom = extent; var mapPadding = [20, 10, 20, 10]; // alert(isArrayFn(extent)); if (is...
OpenLayers入门（二）
sinat_33488770的博客
08-03 1278
前言 好久不见，距离OpenLayers入门第一篇已经过了很久，为什么迟迟没有后续呢，主要有两个原因，一是因为近期项目里使用地图的部分比较少，二是因为很多时候即使功能做出来了，但是还是不能完全理解，不是很明白的东西除了贴代码之外也写不了啥，其实第一篇也是很基础很简单的，但是意外的是看的人是最多的，这让我意识到可能即使是贴一下代码对一些人也是有帮助的，这就是这一篇的主要目的，可能有一些地方会看不懂，但是不要问，问我也不知道，如果你恰好了解的话十分欢迎在评论里分享，感谢~ 首先来分享一个我无意中找到的教程，ht
openlayers控制地图显示范围
aodao8891的博客
10-17 1428
openlayers控制地图显示范围 简介:为了突出地图关注区域，有时会禁止其他范围地图显示，针对这种需求，openlayers提供了图层的extent属性 查看文章 转载于:https://www.cnblogs.com/dqygiser/p/10463981.html...
openlayers3版本
08-31
openlayers3版本
OpenLayers3实现测量功能
10-14
主要为大家详细介绍了OpenLayers3实现测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers6【三】 地图视图 View 详解
@必意玲
04-03 6676
官方文档：https://openlayers.org/en/latest/apidoc/module-ol_View-View.html 上篇文章讲到 ，初始化map地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分，用于控制与用户的交互。 1. view 属性 center 模组：ol / coordinate〜Coordinate 视图的初始中心。如果未.
container view_ArcGIS4Js重要概念1：Map和View
weixin_40002692的博客
11-30 193
在使用ArcGIS for JS 4.x中，View 和 Map 这两货是一对好基友，都是成双成对出现使用的，在开发地图应用中肯定会使用它们两的。 Map 负责管理地图中的各种图层数据（包括底图），View 负责Map中图层、微件、弹出框等展示以及处理地图点击等用户交互。总的来说View负责和用户打交道，Map负责提供数据给View。Map 的使用Map 用来管理地图中的所有图层，可以进行添加图层...
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 1920
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
OpenLayers源码解析14 ol/extent.js
qq_45005996的博客
08-27 591
ol/extent.js 主要功能 参数 方法 /** * @module ol/extent */ import Corner from './extent/Corner.js'; import Relationship from './extent/Relationship.js'; import {assert} from './asserts.js'; /** * An array of numbers representing an extent: `[minx, miny, maxx,
openlayers6【四】地图图层Layers详解
热门推荐
@必意玲
04-30 1万+
文章目录1. 什么是图层？？？1.1 线状图层1.2 点状图层1.3 面状图层2. 图层存在一个或者多个3. Layers 的常见属性4. Layers 各种图层及图层类型4.1 `Graticule` 地图上覆盖的网格标尺图层4.2 `HeatMap`，热力图层4.3 `Vector`，矢量图层4.4 `Image Layer` 单张图片的矢量图层4.5 `VectorTile Layer`，矢量瓦片图层4.6 `WebGLPoints，WebGL` 渲染的海量点图层5. Layers 事件触发6. 写
openlayers 设置边界线外圈遮罩
小猪佩奇
12-16 2492
openlayers 设置边界线外圈遮罩 话不多说直接上图 代码里面有详细注解请看代码片段，如有不清楚的话私信我。 drawArea() { let _this = this; let geoJson = new GeoJSON(); //获取边界数据MultiPolygon数组 let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries() //获取绘制边界数据的数组，
node-v4.2.2-headers.tar.xz
最新发布
05-21
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
openlayers vue
05-16
OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上创建交互式地图。Vue.js 是一个流行的 JavaScript 框架，用于构建动态 Web 应用程序。由于 OpenLayers 和 Vue.js 都是基于 JavaScript 的，因此可以很容易地将它们结合在一起。 要在 Vue.js 中使用 OpenLayers，可以使用第三方库 vue2-leaflet 或 vue-ol。这些库提供了 Vue.js 组件，使您可以轻松地将 OpenLayers 地图集成到您的 Vue.js 应用程序中。 使用 vue2-leaflet，您可以使用以下代码在 Vue.js 中创建一个简单的地图： ``` <template> <div> <l-map :zoom="zoom" :center="center"> <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> </l-map> </div> </template> <script> import { LMap, LTileLayer } from 'vue2-leaflet'; export default { components: { LMap, LTileLayer, }, data() { return { zoom: 13, center: [51.505, -0.09], url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors', }; }, }; </script> ``` 这个示例创建了一个简单的 OpenStreetMap 地图，其中包含一个标记在伦敦市中心。您可以根据自己的需要进行调整。 使用 vue-ol，您可以使用以下代码创建一个简单的地图： ``` <template> <div> <ol-map :view="view"> <ol-layer-tile> <ol-source-osm></ol-source-osm> </ol-layer-tile> </ol-map> </div> </template> <script> import { OlMap, OlView, OlLayerTile, OlSourceOSM } from 'vue-ol'; export default { components: { OlMap, OlView, OlLayerTile, OlSourceOSM, }, data() { return { view: new OlView({ center: [0, 0], zoom: 2, }), }; }, }; </script> ``` 这个示例创建了一个简单的 OpenStreetMap 地图，其中包含一个初始视图，显示世界地图。您可以根据自己的需要进行调整。 无论您使用哪个库，都可以使用 OpenLayers 的所有功能来创建自定义地图，并将其与 Vue.js 应用程序集成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

大树下躲雨

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值