使用openLayer加载KML,加载本地瓦片并添加标注创建点击事件

最新推荐文章于 2024-02-12 22:49:07 发布

原创

最新推荐文章于 2024-02-12 22:49:07 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#KML #openlayer #地图 #瓦片加载

本文详细介绍如何使用OpenLayers库创建地图应用，包括瓦片地图加载、KML文件解析及地图标注交互实现。通过实例演示，读者可以学习到地图开发的基本流程和技术要点。

一、准备工作

从官网下载所需的包https://openlayers.org/

二、下载瓦片地图

这边使用迈高图下载的高德街道地图，仅下载了某个区域下面以此区域为例：甘南藏族自治州

下载后的文件结构预览其中保函瓦片影像以及所选区域的KML

三、开始正文

引入openLayer包

<link rel="stylesheet" type="text/css" href="cs/ol.css" />
<script src="js/ol.js"></script>

<body onload="init()">
	<div id="map"></div>
    <!--标注点-->
	<div id="mouse-position" class="mouse-position-wrapper">
		<div class="custom-mouse-position"></div>
		<div id="popup" class="ol-popup">
			<a href="#" id="popup

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

回憶是如此忧伤

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

020：vue+openlayers设置显示全屏功能（示例代码）

大剑师兰特的GIS世界

08-10

1467

本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果

Openlayers实战：加载KML文件

大剑师兰特的GIS世界

07-17

990

在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载KML文件。具有 .KML 文件扩展名的文件是 Keyhole 标记语言文件。KML 文件使用 XML 通过存储位置、图像叠加、视频链接以及线条、形状、3D 图像和点等建模信息来表达地理注释和可视化。

参与评论您还未登录，请先登录后发表或查看评论

使用Vue和OpenLayers加载本地KML文件

TechNovaX的博客

09-14

530

通过结合Vue和OpenLayers，我们可以轻松地在Vue应用程序中加载本地KML文件并在地图上显示其内容。然后，我们创建了一个地图组件，使用OpenLayers初始化地图，并加载KML文件的内容。通过结合Vue和OpenLayers，我们可以轻松地在Vue应用程序中加载本地KML文件并在地图上显示其内容。然后，我们创建了一个地图组件，使用OpenLayers初始化地图，并加载KML文件的内容。接下来，我们创建一个用于加载KML文件的VectorSource，并将其添加到地图中作为一个矢量图层。

openlayers：实现加载KML文件（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

02-12

349

openlayers：实现加载KML文件（附完整源码）

如何使用OpenLayer发布离线地图

www2111的博客

09-23

768

如何使用OpenLayer发布离线地图

openlayers6：入门基础（二）之加载图层

Puzzle的博客

10-31

8475

#Tiled Layers ## OSM ????OpenLayers v6.9.0 API - Class: OSM Layer source for the OpenStreetMap tile server. new ol.layer.Tile({ title: "OSM", source: new ol.source.OSM({ url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}....

openlayer相关知识的总结--持续更新.zip

最新发布

04-03

瓦片图层通常从WMS服务获取数据，而矢量图层则可以处理GeoJSON、KML等本地数据。 4. **数据源**：图层需要数据源提供数据，如`ol.source.OSM`用于加载开放街图数据，`ol.source.Vector`用于存储和加载矢量数据。 5...

OpenLayer与天地图集成教程：经纬度投影实践

资源摘要信息: "本文档主要介绍如何将OpenLayers地图库接入天地图，并使用经纬度投影。OpenLayers是一个开源的JavaScript地图库，广泛用于创建交互式地图。天地图是中国国家测绘地理信息局提供的网络地图服务平台，...

java kmltolayer,openlayers5之加载KML数据

weixin_42327217的博客

03-19

374

openlayers5之加载KML数据功能说明openlayers加载KML格式数据//矢量图层，数据源为kml文件;var vetorLayer=new ol.layer.Vector({source:new ol.source.Vector({url: 'data/kml/2012-02-10.kml',format:new ol.format.KML()});})//与其他矢量图层一样进行查...

使用KML作为Openlayers的底图

03-27

NULL 博文链接：https://shevawen.iteye.com/blog/1149928

openlayers加载本地离线底图瓦片google数据直接运行即可（亲测）

09-15

利用下载好得离线google地图瓦片数据结合openlayers接口进行加载显示纯本地离线好得瓦片数据运行没问题当然把瓦片放在服务器上发布出来也是可以的代码中修改url即可

openlayers加载本地离线地图瓦片（重新发2018-10-23）

10-24

有朋友反应上一次代码无法运行，我看了一下是html里的路径写死了然后把ol.js 与 ol.css也放上来了。。。保证能运行！！！

GeoServer学习——OpenLayers3加载KML地图实现框选

08-12

NULL 博文链接：https://wallimn.iteye.com/blog/2279201

Openlayers根据kml文件绘制地图

少年感

06-05

907

【代码】Openlayers根据kml文件绘制地图。vue + Openlayers 根据kml文件动态绘制天地图

260：vue+openlayers 通过webgl方式加载矢量图层

大剑师兰特的GIS世界

01-30

1630

本示例介绍如何在vue+openlayers中通过webgl方式加载矢量图层。在做这个示例的时候，采用vite的方式而非webpack的方式。这里的基础设置需要改变一下。 ol的版本7.5.2或者更高。

openlayer加载本地kml的方法

行走的过客

04-14

2903

openlayer官网上有kml加载显示的方法： openlayer官网加载kml示例只是其中url是相对前端服务器根目录路径：然而开发过程中出现需要加载本地文件的需求，本来是想通过上传ftp曲线救国，但是考虑到现在很多浏览器放弃了对ftp的支持，故而放弃ftp思路，决定直接选择本地kml文件加载。由于直接使用file://协议会出现跨域问题，所以使用js的fileReader方式读取...

加载kml图层及自动标注

wxljmy的专栏

04-03

6050

private var kml_layer:KML; private var zirancun_label:VectorLayer; //添加kml文件作为图层(要求必须是利用图层管理器矢量图层下的导出工具生成,kml格式与geoserver导出的不一样) //1.用globalmapper工具导出矢量kml文件。

Openlayer kml Demo

figo333的专栏

03-16

539

https://www.cnblogs.com/song555/archive/2013/01/12/2857732.html

vue使用高德地图加载kml文件

02-07

在使用 Vue 的项目中使用高德地图加载 kml 文件，你可以这么做： 1. 在高德地图官网上注册开发者账号并申请应用密钥。 2. 在项目中安装高德地图的 JavaScript API，你可以直接在 HTML 文件中引入： ```html 你的...