2025-03-03 13:52阅读: 15评论: 0推荐: 0

OpenLayers-加载影像、点、面要素

利用point.txt，实现添加隐患点数据，且点的样式要用zip里面的point.png图标来展示
加载imageAnhua.png作为影像图层，范围为[110.721085,27.974829,111.987103,28.639647]
解析yjq.json里的数据作为面要素图层，要求用黄色(#FFFF00)显示

 <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OpenLayers</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/ol.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/dist/ol.js"></script>
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // 创建一个 OpenLayers 地图实例，并指定其目标容器的 ID 为 "map"
      const map = new ol.Map({
        target: "map",
      });
      // 设置地图的视图，包括投影、中心点和缩放级别
      map.setView(
        new ol.View({
          projection: "EPSG:4326", // 坐标系，使用 WGS84 地理坐标系
          center: [111.354094, 28.307238], // 地图中心点坐标
          zoom: 8,
        })
      );
      // 创建一个高德地图瓦片图层
      const gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          // 高德地图瓦片服务的 URL，使用 {x}, {y}, {z} 作为瓦片坐标占位符
          url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        }),
      });
      // 将高德地图图层添加到地图中
      map.addLayer(gaodeMapLayer);
 
      // 定义本地影像文件、点数据文件、图标文件和面要素文件的路径
      const imgPath = "./imageAnhua.png";
      const pointPath = "./point.txt";
      const iconPath = "./point.png";
      const shpPath = "./yjq.json";
 
      // 加载影像图层
      const imageLayer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
          url: imgPath, // 影像文件的路径
          projection: "EPSG:4326", // 影像的投影坐标系
          imageExtent: [110.721085, 27.974829, 111.987103, 28.639647], // 影像的地理范围
        }),
      });
      // 将影像图层添加到地图中
      map.addLayer(imageLayer);
 
      // 创建一个矢量数据源和图层，用于存储点和面要素
      const vectorSource = new ol.source.Vector({});
      const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
      });
      // 将矢量图层添加到地图中
      map.addLayer(vectorLayer);
 
      // 读取 point.txt 文件，获取点数据
      fetch(pointPath)
        .then((response) => {
          console.log(response); // 打印响应信息
          return response.text(); // 将响应转换为文本格式
        })
        .then((text) => {
          // 将文本中的 "point:" 替换为 "data = "，以便后续解析
          text = text.replace("point:", "data = ");
          var data;
          // 使用 eval 函数解析文本为 JavaScript 对象
          eval(text);
          console.log(data); // 打印解析后的数据
          // 遍历每个点数据
          data.forEach((point) => {
            // 将经纬度字符串转换为浮点数
            const lon = parseFloat(point.lon);
            const lat = parseFloat(point.lat);
            // 创建一个点特征
            const feature = new ol.Feature({
              geometry: new ol.geom.Point([lon, lat]),
            });
            // 设置点的样式
            feature.setStyle(
              new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 0.5], // 图标锚点位置
                  anchorXUnits: "fraction", // 锚点 X 坐标单位为分数
                  anchorYUnits: "fraction", // 锚点 Y 坐标单位为分数
                  src: iconPath, // 图标文件的路径
                }),
              })
            );
            // 将点特征添加到矢量数据源中
            vectorSource.addFeature(feature);
          });
        })
        .catch((error) => console.error("Error loading point data:", error));
 
      // 加载面要素文件
      fetch(shpPath)
        .then((response) => response.json()) // 将响应转换为 JSON 格式
        .then((data) => {
          // 假设面数据存储在 data.pos 中
          data = data.pos;
          console.log(data); // 打印面数据
          // 创建一个多边形几何对象
          const polygon = new ol.geom.Polygon([data]);
          // 创建一个面特征
          const feature = new ol.Feature({
            geometry: polygon,
          });
          // 设置面的样式，包括黄色填充和黄色边框
          feature.setStyle(
            new ol.style.Style({
              fill: new ol.style.Fill({
                color: "#FFFF00", // 黄色填充
              }),
              stroke: new ol.style.Stroke({
                color: "#FFFF00", // 黄色边框
                width: 2,
              }),
            })
          );
          // 将面特征添加到矢量数据源中
          vectorSource.addFeature(feature);
        })
        .catch((error) => console.error("Error loading polygon data:", error));
    </script>
  </body>
</html>

上一篇Cesium-加载GLB和倾斜摄影模型

下一篇Nginx-简单使用

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18748060

posted @ 2025-03-03 13:52 Khru 阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

OpenLayers-加载影像、点、面要素

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>OpenLayers</title>
	<link
	href="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/ol.css"
	rel="stylesheet"
	/>
	<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/dist/ol.js"></script>
	<style>
	html,
	body,
	#map {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	// 创建一个 OpenLayers 地图实例，并指定其目标容器的 ID 为 "map"
	const map = new ol.Map({
	target: "map",
	});
	// 设置地图的视图，包括投影、中心点和缩放级别
	map.setView(
	new ol.View({
	projection: "EPSG:4326", // 坐标系，使用 WGS84 地理坐标系
	center: [111.354094, 28.307238], // 地图中心点坐标
	zoom: 8,
	})
	);
	// 创建一个高德地图瓦片图层
	const gaodeMapLayer = new ol.layer.Tile({
	source: new ol.source.XYZ({
	// 高德地图瓦片服务的 URL，使用 {x}, {y}, {z} 作为瓦片坐标占位符
	url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
	}),
	});
	// 将高德地图图层添加到地图中
	map.addLayer(gaodeMapLayer);

	// 定义本地影像文件、点数据文件、图标文件和面要素文件的路径
	const imgPath = "./imageAnhua.png";
	const pointPath = "./point.txt";
	const iconPath = "./point.png";
	const shpPath = "./yjq.json";

	// 加载影像图层
	const imageLayer = new ol.layer.Image({
	source: new ol.source.ImageStatic({
	url: imgPath, // 影像文件的路径
	projection: "EPSG:4326", // 影像的投影坐标系
	imageExtent: [110.721085, 27.974829, 111.987103, 28.639647], // 影像的地理范围
	}),
	});
	// 将影像图层添加到地图中
	map.addLayer(imageLayer);

	// 创建一个矢量数据源和图层，用于存储点和面要素
	const vectorSource = new ol.source.Vector({});
	const vectorLayer = new ol.layer.Vector({
	source: vectorSource,
	});
	// 将矢量图层添加到地图中
	map.addLayer(vectorLayer);

	// 读取 point.txt 文件，获取点数据
	fetch(pointPath)
	.then((response) => {
	console.log(response); // 打印响应信息
	return response.text(); // 将响应转换为文本格式
	})
	.then((text) => {
	// 将文本中的 "point:" 替换为 "data = "，以便后续解析
	text = text.replace("point:", "data = ");
	var data;
	// 使用 eval 函数解析文本为 JavaScript 对象
	eval(text);
	console.log(data); // 打印解析后的数据
	// 遍历每个点数据
	data.forEach((point) => {
	// 将经纬度字符串转换为浮点数
	const lon = parseFloat(point.lon);
	const lat = parseFloat(point.lat);
	// 创建一个点特征
	const feature = new ol.Feature({
	geometry: new ol.geom.Point([lon, lat]),
	});
	// 设置点的样式
	feature.setStyle(
	new ol.style.Style({
	image: new ol.style.Icon({
	anchor: [0.5, 0.5], // 图标锚点位置
	anchorXUnits: "fraction", // 锚点 X 坐标单位为分数
	anchorYUnits: "fraction", // 锚点 Y 坐标单位为分数
	src: iconPath, // 图标文件的路径
	}),
	})
	);
	// 将点特征添加到矢量数据源中
	vectorSource.addFeature(feature);
	});
	})
	.catch((error) => console.error("Error loading point data:", error));

	// 加载面要素文件
	fetch(shpPath)
	.then((response) => response.json()) // 将响应转换为 JSON 格式
	.then((data) => {
	// 假设面数据存储在 data.pos 中
	data = data.pos;
	console.log(data); // 打印面数据
	// 创建一个多边形几何对象
	const polygon = new ol.geom.Polygon([data]);
	// 创建一个面特征
	const feature = new ol.Feature({
	geometry: polygon,
	});
	// 设置面的样式，包括黄色填充和黄色边框
	feature.setStyle(
	new ol.style.Style({
	fill: new ol.style.Fill({
	color: "#FFFF00", // 黄色填充
	}),
	stroke: new ol.style.Stroke({
	color: "#FFFF00", // 黄色边框
	width: 2,
	}),
	})
	);
	// 将面特征添加到矢量数据源中
	vectorSource.addFeature(feature);
	})
	.catch((error) => console.error("Error loading polygon data:", error));
	</script>
	</body>
	</html>