openlayers加载geoJson格式文件(并加载json中的样式)

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 = "

你点击了这里:

"
+ feature.values_.name + ""; overlay.setPosition(coordinate); }); </script> </body> </html>

你可能感兴趣的:(webgis,openlayers,GIS,javascript)