场景

Openlayers下载与加载geoserver的wms服务显示地图：

Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

除了上面加载wms服务显示地图之外，还可以加载显示GeoJson数据显示地图。

Openlayers官方示例代码：

geojson-vt integration

这里借用示例代码中json文件的网络url以及中心点和边界等参数。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、新建layer，并声明layer的source

        var layer =  new ol.layer.Vector({source: new ol.source.Vector({//url: './data/Line.json',     // 地图来源 使用本地url 离线加载会报跨域问题url: 'https://openlayers.org/data/vector/ecoregions.json',     // 地图来源           format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类})});

注意这里的url使用的是网络url，如果使用本地url的话，会报跨域问题

2、设置视图管理器相关参数

        var view = new ol.View({//中心点center: [0, 0],//缩放等级zoom: 4,//投影坐标系projection: "EPSG:4326",//边界extent: [0, 0, 4096, 4096],maxZoom: 7,minZoom: 4,});

3、地图map中添加图层并设置视图

        var map = new ol.Map({layers: [layer],target: 'map',view: view});

4、完整示例代码

<!doctype html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>OpenLayers 离线加载GeoJson数据</title><link rel="stylesheet" href="lib/ol65/ol.css" type="text/css"><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="lib/ol65/ol.js"></script><script type="text/javascript">//Layers 图层管理类，用来管理图层信息。主要包括Tile，Image，Vector，VectorTile等图层。var layer =  new ol.layer.Vector({source: new ol.source.Vector({//url: './data/Line.json',     // 地图来源 使用本地url 离线加载会报跨域问题url: 'https://openlayers.org/data/vector/ecoregions.json',     // 地图来源           format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类})});//View 视图管理器，主要用来管理地图视图，分辨率或旋转，中心、投影、分辨率、缩放级别等。var view = new ol.View({//中心点center: [0, 0],//缩放等级zoom: 4,//投影坐标系projection: "EPSG:4326",//边界extent: [0, 0, 4096, 4096],maxZoom: 7,minZoom: 4,});//Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。var map = new ol.Map({layers: [layer],target: 'map',view: view});</script>
</body></html>

5、效果

Openlayers中加载GeoJson文件显示地图相关推荐

Arcgis for js，Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADA ...
SDL 从内存流中加载图像并显示
最近做项目需要实现这么一个功能,需要将Android平板上显示的内容实时传送到投影仪上显示. 连接投影仪的机器安装了 CentOS 6,采用 SDL 开发库做 UI 界面.系统本来的需求只要在投影仪上 ...
Spire.PDF迎来最新版本更新，Spire.PDF 8.7.2 支持从流中加载 OFD 文件
Spire.PDF 8.7.2 支持从流中加载 OFD 文件 Spire.PDF for .net 更新至v8.7.2 .该版本支持从流中加载OFD文件,并在WPF程序集中增加了一个支持打印设置的接口 ...
html 调用c#dll中的控件,C#实现反射调用动态加载的DLL文件中的方法和在窗体中加载DLL文件的用户控件...
反射的作用: 1．可以使用反射动态地创建类型的实例,将类型绑定到现有对象,或从现有对象中获取类型 2．应用程序需要在运行时从某个特定的程序集中载入一个特定的类型,以便实现某个任务时可以用到反射. ...
spring配置中加载properties文件方法
首先,遇到一个问题,spring配置中加载properties文件配置如下: <context:property-placeholder ignore-unresolvable="tr ...
Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 上面加载显示 ...
arcgis中如何导出奥维可识别的图_如何在奥维中加载ArcGIS发布的地图服务
在工作中,您可能有大量的航拍图需要在奥维中加载显示,但直接导入航拍图的数据处理量较大.对电脑硬件的要求较高.因此,您可以通过ArcGIS将航拍图发布成地图服务,在奥维中以在线自定义地图的形式加载. 1 ...

Openlayers中加载GeoJson文件显示地图

场景

实现

Openlayers中加载GeoJson文件显示地图相关推荐

最新文章

热门文章