openlayers 插件显示2D地图 根据坐标点几何 绘制一条线

持续前行
9 阅读2分钟 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers with Static World Map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.2.2/ol.css">
    <style>
        #map {
            width: 30%;
            height: 30vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/ol@7.2.2/dist/ol.js"></script>
	 <script>
  let data = [
   {
                "longitude": "0.0",
                "latitude": "0.0"
            },
            {
                "longitude": "1.0",
                "latitude": "0.5"
            },
            {
                "longitude": "2.0",
                "latitude": "1.0"
            },
            {
                "longitude": "3.0",
                "latitude": "1.5"
            },
  ];
    // 定义全球图片的经纬度范围
    const imageExtent = [-180, -90, 180, 90];

    // 创建地图
    const map = new ol.Map({
      target: "map", // 地图容器的ID
      layers: [
        new ol.layer.Image({
          source: new ol.source.ImageStatic({
            url: "bg2.jpg", // 全球图片路径
            imageExtent: imageExtent, // 图片的经纬度范围
            projection: "EPSG:4326", // 使用WGS84坐标系（经纬度）
          }),
        }),
      ],
      view: new ol.View({
        projection: "EPSG:4326", // 使用WGS84坐标系
        center: [0, 0], // 初始中心点（经纬度）
            zoom: 1, // 初始缩放级别
        minZoom: 1, // 最小缩放级别
        maxZoom: 18, // 最大缩放级别
      }),
    });

    // 过滤并转换点的坐标
    const points = [];
    data.forEach((item, index) => {
      if (
        item.longitude >= -180 &&
        item.longitude <= 180 &&
        item.latitude >= -90 &&
        item.latitude <= 90
      ) {
        points.push([parseFloat(item.longitude), parseFloat(item.latitude)]);
      } else {
        console.log("Invalid point:", item.longitude, item.latitude);
      }
    });

    // 创建点的样式
    const pointStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 1,
        fill: new ol.style.Fill({ color: "red" }),
        stroke: new ol.style.Stroke({ color: "red", width: 2 }),
      }),
      text: new ol.style.Text({
        text: "", // 初始文本为空
        font: "12px Arial",
        fill: new ol.style.Fill({ color: "black" }),
        offsetY: -10, // 文本偏移量
      }),
    });

    // 创建点的矢量图层
    // const pointLayer = new ol.layer.Vector({
    //   source: new ol.source.Vector(),
    //   style: function (feature) {
    //     const name = feature.get("name");
    //     pointStyle.getText().setText(name); // 动态设置文本
    //     return pointStyle;
    //   },
    // });

    // 将点添加到矢量图层
    // points.forEach((point) => {
    //   const feature = new ol.Feature({
    //     geometry: new ol.geom.Point(point),
    //     name: "", // 设置点的名称属性
    //   });
    //   pointLayer.getSource().addFeature(feature);
    // });

    // 创建线的样式
    const lineStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: "red", // 线的颜色
        width: 2, // 线的宽度
      }),
    });

    // 创建线的矢量图层
    const lineLayer = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: lineStyle,
    });

    // 将点连成线
    const lineString = new ol.geom.LineString(points);
    const lineFeature = new ol.Feature({
      geometry: lineString,
    });
    lineLayer.getSource().addFeature(lineFeature);

    // 将点和线图层添加到地图上
    // map.addLayer(pointLayer);
    map.addLayer(lineLayer);

vue3 写法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers with Static World Map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.2.2/ol.css">
    <style>
        #map {
            width: 30%;
            height: 30vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/ol@7.2.2/dist/ol.js"></script>
	 <script>
  let data = [
   {
                "longitude": "0.0",
                "latitude": "0.0"
            },
            {
                "longitude": "1.0",
                "latitude": "0.5"
            },
            {
                "longitude": "2.0",
                "latitude": "1.0"
            },
            {
                "longitude": "3.0",
                "latitude": "1.5"
            },
  ];
    // 定义全球图片的经纬度范围
    const imageExtent = [-180, -90, 180, 90];

    // 创建地图
    const map = new ol.Map({
      target: "map", // 地图容器的ID
      layers: [
        new ol.layer.Image({
          source: new ol.source.ImageStatic({
            url: "bg2.jpg", // 全球图片路径
            imageExtent: imageExtent, // 图片的经纬度范围
            projection: "EPSG:4326", // 使用WGS84坐标系（经纬度）
          }),
        }),
      ],
      view: new ol.View({
        projection: "EPSG:4326", // 使用WGS84坐标系
        center: [0, 0], // 初始中心点（经纬度）
            zoom: 1, // 初始缩放级别
        minZoom: 1, // 最小缩放级别
        maxZoom: 18, // 最大缩放级别
      }),
    });

    // 过滤并转换点的坐标
    const points = [];
    data.forEach((item, index) => {
      if (
        item.longitude >= -180 &&
        item.longitude <= 180 &&
        item.latitude >= -90 &&
        item.latitude <= 90
      ) {
        points.push([parseFloat(item.longitude), parseFloat(item.latitude)]);
      } else {
        console.log("Invalid point:", item.longitude, item.latitude);
      }
    });

    // 创建点的样式
    const pointStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 1,
        fill: new ol.style.Fill({ color: "red" }),
        stroke: new ol.style.Stroke({ color: "red", width: 2 }),
      }),
      text: new ol.style.Text({
        text: "", // 初始文本为空
        font: "12px Arial",
        fill: new ol.style.Fill({ color: "black" }),
        offsetY: -10, // 文本偏移量
      }),
    });

    // 创建点的矢量图层
    // const pointLayer = new ol.layer.Vector({
    //   source: new ol.source.Vector(),
    //   style: function (feature) {
    //     const name = feature.get("name");
    //     pointStyle.getText().setText(name); // 动态设置文本
    //     return pointStyle;
    //   },
    // });

    // 将点添加到矢量图层
    // points.forEach((point) => {
    //   const feature = new ol.Feature({
    //     geometry: new ol.geom.Point(point),
    //     name: "", // 设置点的名称属性
    //   });
    //   pointLayer.getSource().addFeature(feature);
    // });

    // 创建线的样式
    const lineStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: "red", // 线的颜色
        width: 2, // 线的宽度
      }),
    });

    // 创建线的矢量图层
    const lineLayer = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: lineStyle,
    });

    // 将点连成线
    const lineString = new ol.geom.LineString(points);
    const lineFeature = new ol.Feature({
      geometry: lineString,
    });
    lineLayer.getSource().addFeature(lineFeature);

    // 将点和线图层添加到地图上
    // map.addLayer(pointLayer);
    map.addLayer(lineLayer);
avatar
文章
阅读
粉丝