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>
# javascript
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区