OpenLayers加载空间数据

已于 2024-01-19 09:47:48 修改
阅读量1k 收藏 18
点赞数 29
文章标签： 交互 前端 vue.js javascript
于 2024-01-08 15:43:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46410110/article/details/135355393
版权

目录

一、OpenLayers地图加载

1.简介

  • 往期已经对OpenLayers框架进行了介绍，本期不在进行赘述，如果有想了解OpenLayers框架的GISer，可以看我的往期文章——Openlayers的交互功能（一）——新手教程，里面详细介绍了OpenLayers框架的基本情况、地图初始化、控件加载等。
  • 【注】：本文所有代码都是基于Vue3+OpenLayers7.4.0实现。

2.实现效果

第一个地图，视图中心为吉林省长春市

二、吉林一号影像服务的加载

1.吉林一号影像服务简介

  • 吉林一号首推影像服务套件，为开发者提供最新的高质量影像切片服务，也是日常工作中用的最多的底图服务。首先需要访问吉林一号切片影像套件网站（吉林一号切片影像套件），填写相关信息即可注册完成，获取对应的TK与服务的MK，即可进行使用，更多信息可以访问吉林一号网进行查看。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import {XYZ} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let JL1Source = new XYZ({
  url: "https://api.jl1mall.com/getMap/{z}/{x}/{-y}?mk={你的mk}&tk={你的tk}"
})
let JL1Layer = new TileLayer({
  source: JL1Source
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      JL1Layer
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

吉林一号影像服务的加载

三、天地图服务加载

1.天地图服务简介

  • 天地图为国内典型的开源底图服务，所以天地图服务的加载需要了解，以免不时之需。首先访问天地图开放平台的注册页面：http://lbs.tianditu.gov.cn/register.html，输入相关信息即可完成注册；然后进入控制台，创建新的应用，指定应用程序名称、类型和访问权限等，即可获取对应的key，此处不详细介绍。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import {XYZ} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let TDTSource = new XYZ({
  url: 'https://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk={你的key}'
})
let TDTLayer = new TileLayer({
  source: TDTSource
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      TDTLayer,
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

天地图服务加载

四、ArcGIS底图服务的加载

1.ArcGIS底图服务简介

  • ArcGIS提供一些在线的底图服务，可以进行获取更多的服务样式，其加载方式与天地图的加载类似，需要更换对应的瓦片切片地址。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import {XYZ} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let ArcGISSource = new XYZ({
  url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/WMTS/tile/1.0.0/ChinaOnlineStreetPurplishBlue/default/default028mm/{z}/{y}/{x}.png"
})
let ArcGISLayer = new TileLayer({
  source: ArcGISSource
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      ArcGISLayer
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

ArcGIS底图服务的加载

五、GeoServer发布的WMS服务加载

1. WMS服务简介

  • GeoServer是开源的地图服务器，利用GeoServer可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过GeoServer可以比较容易的在用户之间迅速共享空间地理信息。实际工作中用的比较多就是加载GeoServer发布的WMS服务，现对其加载进行说明。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import {ImageWMS} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";
import {Image} from 'ol/layer'

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图

let WMSSource = new ImageWMS({
  url: '你的url',
  crossOrigin: 'anonymous'
})
let WMSLayer = new Image({
  source: WMSSource ,
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      WMSLayer 
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

加载GeoServer发布的WMS图层

六、矢量切片的加载

1.矢量切片简介

  • 矢量切片作为Mapbox公司的明星产品，OpenLayers也可以使用。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";
import VectorTileLayer from 'ol/layer/VectorTile'
import VectorTileSource from 'ol/source/VectorTile'
import {MVT} from "ol/format";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let vectorTileSource = new VectorTileSource({
  format: new MVT(),
  //请求瓦片地址
  //ip：ip地址  post：端口号  serverName：请求后台名
  url: `${ip}:${post}/${serverName}/{z}/{x}/{y}`
})
let vectorTileLayer = new VectorTileLayer({
  source: vectorTileSource
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      vectorTileLayer
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

  • 受文件大小限制，没有办法上传gif图，暂时上传一张图片。
  • OpenLayers加载动态矢量切片的效果是没有MapBox好的，但是在高层级下的效果是明显优于GeoServer的。

动态矢量切片

七、GeoJson的加载

1.GeoJson简介

  • GeoJson是常用的地理数据规范，Mapbox将它作为Source，而Source可以与Layer进行绑定，从而实现地图绘制。GeoJson获取方式比较多，可以是原始shp导出生成的，也可以是后台读取得到，可以是存在项目中也可以是存在服务器上，接下来以存在服务器上的为例进行说明。

2.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import {Vector as VectorSource} from "ol/source";
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import {defaults as defaultControls} from "ol/control";
import {fromLonLat} from "ol/proj";
import {Vector as VectorLayer} from 'ol/layer'
import {GeoJSON} from "ol/format";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图

let geoJsonSource = new VectorSource({
  url: '你的GeoJson文件地址',
  format: new GeoJSON()
})
let geoJsonLayer = new VectorLayer({
  source: geoJsonSource
})
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      geoJsonLayer
    ],
    view: new View({
      projection: "EPSG:3857",
      center: fromLonLat([125.3574397847, 43.8865062907]),
      zoom: 12,
    }),
    controls: defaultControls({
      attribution: false,
      zoom: false,
      rotate: false,
    }).extend([]),
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

3.实现效果

GeoJson的加载

八、总结

  • 本文主要针对工作中常用的空间数据的加载进行说明。其实OpenLayers还支持很多其他的数据源，以后遇到了会继续补充。
  • 以后的章节也会继续分享和探索OpenLayers的使用。
  • 欢迎大家批评指正！
一心学习webGIS
关注
GIS开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-10 1万+
OpenLayer、Leaflet、Maplibre-gl和Cesiumjs（3d）OpenLayer 对各种地图服务支持较好，比如各种vms,vmts等，动态效果较差。Leaflet 对vue支持较好，与前端交互方便，对地图服务支持不好Maplibre-gl:继承自Mapbox-2d的开源分支，Mapbox商业化后Maplibre-gl项目从Mapbox-2d的开源分支开始继续维护更新，号称地图服务中动态效果最好的库，插件较多，个人感觉像是地图引擎里的游戏引擎，各种动态效果极好。
第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
liyajun54的博客
03-30 6466
大家好！从今天开始，我将分享我在GIS开发的过程中如何利用Openlayers和Cesium来创建一个二三维联动的项目，在后面的文章中我会讲解整个项目的搭建过程及每一个功能模块的实现方法，其中包括了很多我在入行几年做的各种特色功能实现方法，我也希望跟大家一起探讨学习，共同进步。
html5基于cesium.js库的3d立体地球仪模型动画代码.zip
09-27
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景
最新发布
qq_36287830的博客
07-17 1327
3d 行政区划 openlayers 地图背景 裁剪
openlayers学习（一）仿3D效果地图
的博客
02-21 4128
openlayers仿3D效果
用openlayer写一个3d的水流
weixin_35749796的博客
01-01 787
您好！我可以提供一些关于如何使用 OpenLayers 创建 3D 水流的建议。 首先，您需要在网页中导入 OpenLayers 库。接下来，您可以使用 OpenLayers 的 VectorTile 类来加载瓦片地图数据，其中包含水流的三维模型信息。您还可以使用 OpenLayers 的 Map 类来创建地图，并使用 View 类来设置地图的视图(例如中心点、缩放级别等)。 接下来，您可以使用 ...
基于OpenLayers加载电子地图（一）
weixin_34254823的博客
11-13 284
这里简单介绍一些基础知识还让如何基于OpenLayers加载电子地图，边学习边记录，希望自己能坚持下去！ 1. OpenLayers OpenLayers是一个用于开发WebGIS客户端的JavaScript包，是一个开源的项目，其设计目的是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助...
openlayers：实现d3集成 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 140
openlayers：实现d3集成 (附完整源码）
vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务
无心使然云中漫步
06-18 499
加载注记图层后，切片虽然显示png，但是好像不是透明的,只能在注记图层增加透明度控制。主要是不同类型source的使用。
Openlaye：学习笔记之事件
KaiSarH
11-21 484
首先来看一个案例:当我们点击地图的时候,会弹出一个提示框, <!Doctype html> <html lang="ch" > <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compati...
openlayers加载arcgis发布的OGC WMS服务
01-09
OGC Web Map Service（WMS）是一种标准协议，允许客户端（如OpenLayers）请求服务器（如ArcGIS Server）生成地理空间数据的图像。WMS服务通常用于显示地图，但不支持交互式编辑或查询数据。服务返回的图像可以叠加在...
OpenLayers6入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-04 492
本章讲解一下OpenLayers如何加载解析TopoJson格式的数据。TopoJson是用于表示地理空间数据的格式。是GeoJson格式的改进版，相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法，TopoJSON 中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的，因此TopoJSON 消除了部分冗余数据，使得文件最终大小比GeoJson缩小了约 80%。与GeoJson的区别TopoJson和GeoJson是两种用于表示地理空间数据的格式。
251: vue+openlayers 加载geotiff的瓦片数据
大剑师兰特的GIS世界
01-09 1174
本示例的目的是介绍演示如何在vue+openlayers中加载geotiff的瓦片数据。这是官网上的一个示例，借鉴的意义非常大。他将大的tif划分为小块的瓦片tif，然后通过url的方式调用。这里面涉及了TileGrid，WebGLTile，sourcesFromTileGrid等载体内容。 同时也要注意view中的一个参数，showFullExtent，它使得窗口更加的丝滑，不出现空白情况。
OpenLayers6入门，OpenLayers如何加载WFS服务的要素资源数据
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-01 931
本章讲解如何使用OpenLayers加载WFS服务的要素资源数据。WFS是基于地理要素级别的数据共享和数据操作，WFS规范定义了若干基于地理要素（Feature）级别的数据操作接口，并以 HTTP 作为分布式计算平台。通过 WFS服务，客户端可以得到矢量数据格式描述的单个地理要素的空间数据或要素集的空间数据，并可以对单个地理要素进行编辑、 删除、 添加等数据操作。WFS采用 GML描述地理要素特征， 根据用户请求的内容返回 GML描述的空间数据。
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
openlayer学习（一）
hengxin2014的博客
03-07 1049
openlayer学习（一）一、前言二、官网三、初探 一、前言 因为工作需要，今天开始学习openlayer。 GIS专业毕业。刚开始工作的时候是做java后端，顺便基于skyline和cesium做一些。然后做了一些开发项目与测绘项目管理工作，顺便做了一点前端与原型Axure。后面又接触了一点ue4和三维倾斜数据的处理。总结下来，接触面虽然广，但是没有纵深。趁着现在工作需要，主要以二三维地图为主，深入学习一下openlayer与cesium。因为学生期间用的是c#，工作刚开始用的是java，spring那
openlayers加载天地图、高德、百度、geoq(智图)、谷歌、arcgis在线地图、影像和标注
sinat_26396389的博客
10-22 1457
this.image_map = new ol.layer.Tile({ name: “影像图层”, source: new ol.source.XYZ({ url: “http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”...
mapbox-gl开发教程（十三）：加载三维面图层（白模）
地理信息技术杂谈 博客，欢迎技术交流
07-19 1870
在地图应用的开发中，加载带高度信息的面数据，显示简单建筑（白模）等效果，在mapbox-gl对应的是填充挤压（fill-extrusion）图层，下边讲一下如何在mapbox-gl加载fill-extrusion图层。mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论，公众号地理信息技术杂谈。mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。..
openlayers加载海量数据
10-14
综上所述，OpenLayers加载海量数据时，可以采取多种策略来优化性能，提高用户体验。通过数据分块加载、使用矢量数据、动态加载、缓存机制和数据压缩等方法，可以有效地处理大量的地理信息数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值