OpenLayer示例网址汇总

2023-11-07 18:18
文章标签 汇总 示例 网址 openlayer

本文主要是介绍OpenLayer示例网址汇总,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.https://openlayers.org/en/latest/examples/feature-move-animation.html
图标 行进轨迹动画 使用后期渲染事件和矢量上下文沿线对标记要素设置动画。在该示例中,使用了编码折线。

2.https://openlayers.org/en/latest/examples/utfgrid.html?q=dynamic-data 有用
鼠标移动事件,鼠标移动,随着指向一个国家以查看其名称和标志

3.https://openlayers.org/en/latest/examples/canvas-tiles.html
帆布砖 黑色网格图块是使用HTML5画布在客户端上生成的。显示的图块坐标是XYZ图块坐标。

4.https://openlayers.org/en/latest/examples/bing-maps.html
Bing Maps当Bing Maps切片服务没有给定分辨率和区域的切片时,它将返回“占位符”切片,指示该情况。将地图缩放到19级以上,以查看“占位符”图块。如果您希望OpenLayers显示拉伸的图块,以代替缩放级别19以上的“占位符”图块maxZoom,请19在传递给的选项中将其设置为ol/source/BingMaps。

5.https://openlayers.org/en/latest/examples/cartodb.html
Carto源示例 一个带有匿名cartodb映射的简单示例

6.https://openlayers.org/en/latest/examples/arcgis-tiled.html 有用
平铺的ArcGIS MapServer 本示例说明如何将ArcGIS REST MapService用作图块。此源类型支持地图和图像服务。对于缓存的ArcGIS服务,通过使用可以提供更好的性能ol/source/XYZ。

7.https://openlayers.org/en/latest/examples/custom-interactions.html
自定义互动,能拖动页面上的子元素,本示例演示了如何通过子类化创建自定义交互ol/interaction/Pointer。请注意,内置交互ol/interaction/Translate可能是移动要素的更好选择。

8.https://openlayers.org/en/latest/examples/chaikin.html
使用Chaikins算法平滑线条,能够在页面上画折线,此示例使用chaikin-smooth实现Chaikins算法的npm包来平滑绘制的线条。首先在地图上绘制。完成工程图后,将通过表单元素对特征的几何进行平滑处理。

9.https://openlayers.org/en/latest/examples/cluster.html
集群距离,本示例说明如何对点要素进行聚类

10.https://openlayers.org/en/latest/examples/drag-and-drop.html
拖放,使用拖放交互的示例。将GPX,GeoJSON,IGC,KML或TopoJSON文件拖放到地图上。没有投影变换支持,因此仅适用于EPSG:4326和EPSG:3857中的数据。

11.https://openlayers.org/en/latest/examples/drag-and-drop-image-vector.html
拖放图像矢量,在ol/layer/VectorImage图层上使用拖放交互的示例。将GPX,GeoJSON,IGC,KML或TopoJSON文件拖放到地图上。每个文件都呈现为客户端上的图像。

12.https://openlayers.org/en/latest/examples/draw-and-modify-features.html
在地图上绘制几何类型(点/折线/多边形/圆)。将ol / interaction / Draw交互与ol / interaction / Modify交互一起使用的示例。

13.https://openlayers.org/en/latest/examples/draw-features.html
绘图功能,按住shift可以自由画图,使用Draw交互的示例。从上面的下拉列表中选择一种几何类型以开始绘图。要完成绘图,请单击最后一点。要激活线条,多边形和圆形的徒手绘图,请按住Shift键。

14.https://openlayers.org/en/latest/examples/draw-freehand.html
写意画,此示例演示了ol/interaction/Draw手绘模式(可绘点/折线/多边形/圆)。在徒手绘制过程中,拖动时会添加点。设置freehand: true为启用手绘模式。请注意,可以通过使用该freehandCondition选项来有条件地启用手绘模式。例如Shift,使用键切换徒手模式freehandCondition: shiftKeyOnly。

15.https://openlayers.org/en/latest/examples/drag-rotate-and-zoom.html
拖动,旋转和缩放。Shift+鼠标单击可 围绕地图中心旋转和缩放地图。

16.https://openlayers.org/en/latest/examples/device-orientation.html
设备方向,说明如何跟踪设备方向的变化。gyronorm.js库用于从浏览器访问和规范事件。

17.https://openlayers.org/en/latest/examples/dynamic-data.html
动态数据,动态数据示例

18.https://openlayers.org/en/latest/examples/edit-geographic.html
地理编辑,useGeographic在’ol/proj’模块中调用该函数可以使地图视图使用地理坐标(即使视图投影不是地理坐标)。能修改既成的地理板块。

19.https://openlayers.org/en/latest/examples/draw-shapes.html
绘制形状,这演示了的geometryFunction选项的使用ol/interaction/Draw。从上方的下拉菜单中选择一种形状类型以开始绘图。要激活徒手绘图,请按住Shift键。通过使用type: 'Circle’带有type的type 来实现正方形绘图,该type geometryFunction创建4边的常规多边形而不是圆形。箱形图type: 'Circle’与配合使用geometryFunction,可创建盒形多边形而不是圆形。星图绘制使用自定义的几何函数,该函数使用绘制交互作用提供的中心和半径将圆心覆盖到起点。可以绘制圆圈,正方形,长方形,五角星。

20.https://openlayers.org/en/latest/examples/epsg-4326.html
EPSG:4326本示例说明如何在EPSG:4326中创建地图。

21.https://openlayers.org/en/latest/examples/earthquake-custom-symbol.html
带有自定义符号的地震,本示例将解析KML文件,并将要素呈现为矢量层。图层指定了style,可使用自定义的闪电符号和相对于震级的大小来绘制地震位置。

22.https://openlayers.org/en/latest/examples/animation.html
查看动画,本示例说明如何使用该view.animate()方法来运行一个或多个动画。

23.https://openlayers.org/en/latest/examples/extent-constrained.html 有用
约束范围,显示一定的区域,该地图的视图在一定程度上受到限制。这是使用extentview选项完成的。请注意,指定constrainOnlyCenter: true只会将范围限制应用于视图中心。

24.https://openlayers.org/en/latest/examples/filter-points-webgl.html
使用WebGL过滤功能,本示例说明如何ol/layer/WebGLPoints与文字样式一起使用以动态过滤大量的点几何。上面的地图基于来自NASA的数据集,其中包含45k个记录的陨石着陆点。每个陨石在地图上都有一个圆圈标记(圆圈越大,物体越重)。添加了脉冲效果,但被影响年份略微抵消了。调整滑块会使超出日期范围的对象从地图中过滤掉。这是通过style更改提供给WebGL层的对象中的变量来完成的。还要注意,最后一段代码是必需的,以确保地图每帧刷新一次。

25.https://openlayers.org/en/latest/examples/feature-animation.html
自定义动画,本示例说明如何使用postrender和vectorContext设置要素动画。在这里,我们选择每次将特征添加到图层时都执行Flash动画。

26.https://openlayers.org/en/latest/examples/extent-interaction.html
互动,本示例说明如何使用Extent交互来绘制可修改范围。使用Shift+Drag绘制的程度。 Shift+Drag在范围的角或边缘上调整大小。Shift+Click取消删除的程度。

27.https://openlayers.org/en/latest/examples/flight-animation.html
飞行动画,本示例说明如何使用postrender和vectorContext为飞行设置动画。两个机场之间的大圆弧形计算公式是arc.js然后飞行路径与动画postrender。

28.https://openlayers.org/en/latest/examples/geojson.html
GeoJSON功能示例。

29.https://openlayers.org/en/latest/examples/geojson-vt.html
与geojson-vt库集成的示例。

30.https://openlayers.org/en/latest/examples/getfeatureinfo-layers.html
WMS GetFeatureInfo(层),演示layers在ol/format/WMSGetFeatureInfoformat对象中使用该选项,该选项允许单个WMS GetFeatureInfo请求返回的功能,这些请求要求通过层名称读取多个层。

31.https://openlayers.org/en/latest/examples/geolocation.html
地理位置,本示例使用Geolocation API来控制视图。位于“ https://www.googleapis.com/”上的网络位置提供商:未收到任何回复。

32.https://openlayers.org/en/latest/examples/arcgis-image.html
Image ArcGIS MapServer,本示例说明如何使用动态ArcGIS REST MapService。此源类型支持地图和图像服务。用于动态ArcGIS服务。

33.https://openlayers.org/en/latest/examples/gpx.html
使用GPX来源的示例。

34.https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html
WMS GetFeatureInfo(平铺层),本示例说明如何单击WMS切片图层以触发WMS GetFeatureInfo请求。另外,map.forEachLayerAtPixel当将鼠标悬停在地图上的非透明像素上时,可用于更改鼠标指针。

35.https://openlayers.org/en/latest/examples/here-maps.html
HERE地图图块API使用ol/source/XYZ。使用其tile API时,请务必遵守HERE服务条款。

36.https://openlayers.org/en/latest/examples/heatmap-earthquakes.html
地震热图,本示例将解析KML文件并将要素呈现为ol/layer/Heatmap图层。

37.https://openlayers.org/en/latest/examples/hit-tolerance.html
命中公差,默认情况下,map.forEachFeatureAtPixel()函数仅考虑直接位于提供的像素下方的要素。这会使与触摸设备上的功能进行交互变得困难。要考虑距提供的像素一定距离内的要素,请使用hitTo

这篇关于OpenLayer示例网址汇总的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/365433

相关文章

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

C++中std::distance使用方法示例

《C++中std::distance使用方法示例》std::distance是C++标准库中的一个函数,用于计算两个迭代器之间的距离,本文主要介绍了C++中std::distance使用方法示例,具... 目录语法使用方式解释示例输出:其他说明:总结std::distance&n编程bsp;是 C++ 标准

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

golang 日志log与logrus示例详解

《golang日志log与logrus示例详解》log是Go语言标准库中一个简单的日志库,本文给大家介绍golang日志log与logrus示例详解,感兴趣的朋友一起看看吧... 目录一、Go 标准库 log 详解1. 功能特点2. 常用函数3. 示例代码4. 优势和局限二、第三方库 logrus 详解1.

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.