openlayers加载geoJson格式文件（并加载json中的样式）

已于 2022-08-05 15:07:59 修改
阅读量7.4k 收藏 30
点赞数 17
分类专栏： webgis openlayers GIS 文章标签： javascript
于 2021-01-21 12:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40482342/article/details/112913596
版权
GIS 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
webgis
2 篇文章 1 订阅
订阅专栏
openlayers
2 篇文章 0 订阅
订阅专栏

openlayers加载geoJson格式文件（并加载json中的样式）

样式如下图:
在这里插入图片描述
话不多说直接上代码和注释（geojson文件可以在我的CSDN中下载）下载
分享不易：点赞支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./ol/ol.css" type="text/css">
		<script src="./ol/ol.js"></script>
		<title>map</title>
		<style>
			.map {
				width: 100%;
				height: 100%;
			}

			.ol-popup {
				position: absolute;
				background-color: white;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
				padding: 15px;
				border-radius: 10px;
				border: 1px solid #cccccc;
				bottom: 12px;
				left: -50px;
				min-width: 280px;
			}

			.ol-popup:after,
			.ol-popup:before {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}

			.ol-popup:after {
				border-top-color: white;
				border-width: 10px;
				left: 48px;
				margin-left: -10px;
			}

			.ol-popup:before {
				border-top-color: #cccccc;
				border-width: 11px;
				left: 48px;
				margin-left: -11px;
			}

			.ol-popup-closer {
				text-decoration: none;
				position: absolute;
				top: 2px;
				right: 8px;
			}

			.ol-popup-closer:after {
				content: "✖";
			}
		</style>
	</head>
	<body>
		<div id="popup" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
			<div id="popup-content"></div>
		</div>
		<div id="map" class="map"></div>
		<script>
			/**
			 * 使用变量缓存弹窗需要的DOM对象
			 */
			var container = document.getElementById("popup");
			var content = document.getElementById("popup-content");
			var closer = document.getElementById("popup-closer");
	        /**
	        *将十六进制的颜色值转为RGB格式
	        */
			function colorRgba(sHex, alpha) {
				// 十六进制颜色值的正则表达式
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
				/* 16进制颜色转为RGB格式 */
				let sColor = sHex.toLowerCase()
				if (sColor && reg.test(sColor)) {
					if (sColor.length === 4) {
						var sColorNew = '#'
						for (let i = 1; i < 4; i += 1) {
							sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
						}
						sColor = sColorNew
					}
					//  处理六位的颜色值
					var sColorChange = []
					for (let i = 1; i < 7; i += 2) {
						sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
					}
					// return sColorChange.join(',')
					// 或
					return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
				} else {
					return sColor
				}
			}

			var styleFunction = function(feature) {
				return new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: feature.get('stroke'),//通过要素拿到具体的值
						width: 2,
						opacity: 1
					}),
					fill: new ol.style.Fill({
						color: colorRgba(feature.get('fill'), feature.get('fill-opacity')),
						///opacity: feature.get('fill-opacity')
					}),
					text: new ol.style.Text({
						text: feature.get('name'),
						font: '12px bold serif',
						fill: new ol.style.Fill({
							color: '#000'
						}),
						stroke: new ol.style.Stroke({
							color: '#fff',
							width: 2
						})
					})
				})
			};
            /**
            *创建图层渲染geoJson文件
            */
			var layers = [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				}),
				new ol.layer.Vector({
					title: 'add Layer',
					source: new ol.source.Vector({
						projection: 'EPSG:4326',
						url: "./json/map.geojson", //GeoJSON的文件路径，用户可以根据需求而改变
						format: new ol.format.GeoJSON()
					}),
					style: styleFunction
				})
			];

			/* 
			 创建一个Overlay叠加层对象用作显示弹窗
			*/
			var overlay = new ol.Overlay({
				element: container,
				// autoPan: true,
				autoPanAnimation: {
					duration: 250
				}
			});

			var map = new ol.Map({
				target: 'map',
				layers: layers,
				overlays: [overlay],
				view: new ol.View({
					center: ol.proj.fromLonLat([112.9518190800, 28.2411883300]),
					zoom: 15
				})
			});

			/**
			 * 为弹窗添加一个响应关闭的函数
			 */
			closer.onclick = function() {
				overlay.setPosition(undefined);
				closer.blur();
				return false;
			};

			/**
			 * 添加单击响应函数来处理弹窗动作
			 */
			map.on("click", function(e) {
				 /* var feature = map.getFeaturesAtPixel(e.pixel);
				 console.log(feature) */
				var pixel = map.getEventPixel(e.originalEvent);
				var hit = map.hasFeatureAtPixel(pixel);
				
				 //获取到当前像素下的feature
				var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
					return feature;
				});
				console.log(feature)
			    var coordinate = e.coordinate;
				content.innerHTML = "<p>你点击了这里:</p><code>" + feature.values_.name + "</code>";
				overlay.setPosition(coordinate);
			});
		</script>
	</body>
</html>
晨宇烁
关注
  • 17
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
Openlayers实战：加载GeoJSON
大剑师兰特的GIS世界
07-17 584
在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载GeoJSON文件。GeoJSON 是一种使用JavaScript 对象表示法(JSON) 对地理数据结构进行编码的格式。简而言之，GeoJSON 为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。
openlayer中加载geojson的几种方式
热门推荐
~~
08-05 1万+
首先： importGeoJSONfrom"ol/format/GeoJSON"; import VectorSource from "ol/layer/Vector" 一，本地geojson文件 new VectorSource({ features:new GeoJSON().readFeatures(this.geojsonData) }) 二，public中的文件 new VectorSource({ url: "sichuan_shp.json", ....
openlayers 实现区域选择（点击区域高亮，再次点击取消；放大层级显示街道图层，同样可以选择取消）
qq_23830005的博客
05-29 306
放大层级后会显示街道边界，保存选择街道信息到streetList中，然后筛选出相应的坐标数据，渲染到地图上。主要通过geojson数据实现边界显示，选择区域的同时加载街道边界，取消区域择清除街道边界。
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 3705
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayers01——使用openlayers展示GeoJSON数据
sheyueyu的博客
02-05 1155
【代码】openlayers01——使用openlayers展示GeoJSON数据。
OpenLayers-加载Geojson数据
giser__z的博客
03-09 529
地址可以是本地geojson文件，也可以是网络geojson格式的数据服务。加载完成后可以对数据要素进行遍历。值得注意的是，加载网络服务的行为（如geoserver发布的数据服务）属于异步，不能直接获得要素。下面代码是我解决此问题的一种思路，通过VectorSource的。事件(在要素完成加载时触发)
Openlayers中加载GeoJson文件显示地图
BADAO_LIUMANG_QIZHI的博客
02-11 2643
场景 Openlayers下载与加载geoserver的wms服务显示地图： Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 除了上面加载wms服务显示地图之外，还可以加载显示GeoJson数据显示地图。 Openlayers官方示例代码： geojson-vt integration 这里借用示例代码中json文件的网络url以及中心点和边界等参数。 注： 博客：BADAO_LIUMANG_QI.
vue集成openlayers加载geojson并实现点击弹窗教程
10-14
在本教程中，我们将探讨如何在Vue项目中集成OpenLayers库来加载GeoJSON数据，并实现点击地图要素时弹出详细信息窗口。OpenLayers是一个强大的开源JavaScript库，用于创建交互式地图应用，而Vue则是一种流行的前端...
openlayers防geojson.io 采集geojson的weob工具
12-06
在OpenLayers中，你可以加载GeoJSON数据，并通过各种图层样式展示这些特征，实现地图的个性化定制。 OpenLayers提供了丰富的API，允许开发者进行复杂的地图操作，如缩放、平移、添加图层、绘制几何对象等。对于描述...
geojson:适用于OpenLayers的geojson
03-29
要在OpenLayers中加载GeoJSON文件，首先需要创建一个`ol.source.Vector`源，然后使用GeoJSON格式化器将数据解析为features。例如： ```javascript var vectorSource = new ol.source.Vector({ format: new ol....
webgis前端加载展示shp文件
最新发布
06-18
要在WebGIS中使用SHP文件，我们需要将其转换为可以在浏览器中直接处理的格式，如GeoJSON或TopoJSON。 接下来，我们将讨论如何在Vue项目中集成这个功能。Vite-gis可能是一个用于处理GIS数据的Vite插件或者一个包含...
前端可视化开发-地图js、json文件
03-16
在描述中提到的“格式化之后的json”意味着这些GeoJSON文件已经按照标准格式整理好，方便开发者读取和理解。GeoJSON文件的内容通常包括几何对象（Point、LineString、Polygon等）、属性信息以及可能的CRS（坐标参考...
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 974
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
openlayers学习——5、openlayers添加GeoJSON
记录生活点滴
01-10 3702
openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
OpenLayers入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-28 534
前面两章已经讲了OpenLayers如何加载GeoJson数据到矢量图层和webgl图层上，前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
openlayer中geojson要素图层设置style样式
~~
08-26 7109
import "ol/ol.css"; import { Map, View } from "ol"; import { TileWMS, OSM, Vector as VectorSource } from "ol/source"; import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer"; import GeoJSON from "ol/format/GeoJSON"; import { Fill, Stroke, Styl.
openlayers加载geojson数据 *
aodao8891的博客
10-30 504
获取GeoJSON数据，可以通过http请求获取，也可以自己定义json数据。 注意格式 var geojsonObject = { 'type': 'FeatureCollection', 'crs': { 'type': 'name', 'properties':...
WebGIS如何实现openlayer中的GeoJson文件加载
qq_49491645的博客
01-16 1169
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制 GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含...
openlayers加载geojson
06-28
### 回答1： 要加载GeoJSON数据，可以使用OpenLayers的Vector图层。首先，需要创建一个Vector图层对象，然后使用OpenLayers的Format.GeoJSON类来解析GeoJSON数据，并将其添加到Vector图层中。最后，将Vector图层添加到地图中即可。 以下是一个示例代码： ``` var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'path/to/your/geojson/file.geojson', format: new ol.format.GeoJSON() }) }); map.addLayer(vectorLayer); ``` 其中，`url`属性指定GeoJSON文件的路径，`format`属性指定使用OpenLayers的GeoJSON解析器来解析数据。最后，将Vector图层添加到地图中即可。 注意：在使用OpenLayers加载GeoJSON数据时，需要确保GeoJSON文件的格式正确，否则可能会导致加载失败。 ### 回答2： Openlayers是一种开源地图框架，支持多种地图底图和图层。其中，加载GeoJSON是Openlayers的一项重要功能。 要加载GeoJSON，首先要创建一个新图层。新图层需要绑定一个数据源，可以是本地的一个GeoJSON文件，也可以是在线的GeoJSON链接。在创建图层之后，使用Openlayers的ol.source.Vector创建一个新的矢量数据源，并将其绑定到新图层。 然后，使用Openlayers的ol.format.GeoJSON将数据转换为矢量要素，并将其添加到矢量数据源中。最后，将新图层添加到Openlayers的地图中。 下面是一个加载GeoJSON的代码示例： ```javascript // 创建一个新的地图对象 var map = new ol.Map({ target: 'map', // 地图显示的容器 layers: [ // 地图图层 new ol.layer.Tile({ // 街道地图 source: new ol.source.OSM() }) ], view: new ol.View({ // 地图视图 center: ol.proj.fromLonLat([119.306239, 26.080407]), // 地图中心点 zoom: 14 // 地图缩放级别 }) }); // 创建一个新的矢量数据源 var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), // 数据源格式 url: '/path/to/geojson/file.geojson' // GeoJSON文件路径 }); // 创建一个新的矢量图层 var vectorLayer = new ol.layer.Vector({ source: vectorSource // 图层数据源 }); // 将图层添加到地图中 map.addLayer(vectorLayer); ``` 在上面的代码中，我们创建了一个地图对象，并在地图图层中添加了一个OSM街道地图。然后，我们创建了一个新的矢量数据源，并将其绑定到一个新图层中。最后，我们将图层添加到地图中。 值得注意的是，在GeoJSON文件路径中使用了绝对路径。为了方便测试，我们可以将文件放在服务器的根目录下，然后使用绝对路径访问。在实际项目中，我们可能需要使用相对路径或者动态生成路径。 总之，Openlayers提供了简单易用的API，使得加载GeoJSON变得非常容易。在实际应用中，我们可以将GeoJSON数据和地图交互来打造各种应用，例如展示数据统计、可视化、分析等。 ### 回答3： OpenLayers是一种用于Web GIS开发的JavaScript框架，它支持多种数据格式的加载和显示，包括GeoJSON。GeoJSON是一个用于地理数据交换的标准数据格式，它可以轻松地在WebGIS应用中实现地图数据的可视化。 在OpenLayers中加载GeoJSON数据，需要使用ol.source.Vector类，该类是OpenLayers中用于加载和显示矢量数据的核心类。下面是一个加载GeoJSON数据的简单示例： ```javascript var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: 'path/to/file.geojson' }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ layers: [vectorLayer], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); ``` 在这个示例中，我们首先创建了一个vectorSource对象，其中包含format和url两个属性，分别表示GeoJSON数据的格式和数据的路径。接着，我们使用vectorSource创建一个vectorLayer对象，并将其添加到地图上。最后，我们创建一个map对象，并将vectorLayer添加到图层数组中，实现了GeoJSON数据的加载和显示。 除了使用url加载GeoJSON数据外，还可以直接使用JavaScript对象或字符串加载数据。这种方式需要将数据转换为GeoJSON格式，然后使用vectorSource.addFeatures(features)方法将数据添加到vectorSource中。 总之，OpenLayers提供了简单而又强大的方法来加载和显示GeoJSON数据，使得开发WebGIS应用变得更加容易和高效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值