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

<!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>
posted @ 2025-03-03 13:52  Khru  阅读(139)  评论(0)    收藏  举报