OpenLayers에서 위도 경도 선을 지도에 그리기

14384 단어 Openlayers자바스크립트맵GPS
GPS 로거로 기록한 위도 경도를 OpenLayers를 사용하여 표시하는 샘플입니다. 여기에서는 OpenLayers가 가지는 KML이나 GPX의 read 기능은 사용하지 않고, 배열로 건네준 위도 경도의 값을 사용하는 방법을 소개하고 있습니다

대상 환경


  • OpenLayers v5.3.0

    • 샘플



    이런 식으로 코드를 쓰면 좋다고 생각합니다.

    ol_sample.html
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OL Sample - LineString</title>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      const Map = ol.Map;
      const View = ol.View;
      const Feature = ol.Feature;
      const Polyline = ol.format.Polyline;
      const Point = ol.geom.Point;
      const TileLayer = ol.layer.Tile;
      const VectorLayer = ol.layer.Vector;
      const OSM = ol.source.OSM;
      const VectorSource = ol.source.Vector;
      const Icon = ol.style.Icon;
      const Stroke = ol.style.Stroke;
      const Style = ol.style.Style;
      const Geom = ol.geom;

      const coordinates = [   // 経度、緯度の順で定義
                              [135.495650, 34.702113],
                              [139.767130, 35.680776]
                          ];

      var route = new Geom.LineString(coordinates);
      route.transform('EPSG:4326', 'EPSG:3857');  // 地理座標系(WGS84) の EPSG:4326 からメルカトル図法の EPSG:3857 に変換します

      const routeCoords = route.getCoordinates();
      const routeLength = routeCoords.length;

      const routeFeature = new Feature({
        type: 'route',
        geometry: route
      });
      const startMarker = new Feature({
        type: 'icon',
        geometry: new Point(routeCoords[0])
      });
      const endMarker = new Feature({
        type: 'icon',
        geometry: new Point(routeCoords[routeLength - 1])
      });

      const styles = {
        'route': new Style({
          stroke: new Stroke({
            width: 6, color: [237, 30, 164, 0.8]
          })
        }),
        'icon': new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: 'http://github.com/suzutsuki0220/TrackView/blob/master/src/image/caution.png?raw=true'  // 適当に置き換えてください
          })
        })
      };

      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [routeFeature, startMarker, endMarker]
        }),
        style: function(feature) {
          return styles[feature.get('type')];
        }
      });

      var map = new Map({
        target: document.getElementById('map'),
        view: new View({
          center: routeCoords[0],
          zoom: 7
        }),
        layers: [
          new TileLayer({
            source: new OSM()
          }),
          vectorLayer
        ]
      });
    </script>
  </body>
</html>

    도쿄와 오사카를 연결하는 선이 표시됩니다.



    수업 정보



    View, Souce, Feature 등 많은 이름이 나오므로 우선 그 역할을 정리했습니다. OpenLayers를 처음 만졌을 때 고생하는 곳이라고 생각했습니다.

    공식 문서는 htps : // 오페인 rs. 오 rg / 엔 / 아 st / 두 c / 쓰리 아 ls / 곤세 pts. HTML에 기록되어 있습니다.


    이름
    역할
    보충


    Map
    기초가 되는 클래스
    Map 클래스에 View, Layer 등을 설정합니다.

    보기
    지도 표시와 관련된 설정을 유지합니다.
    샘플에서는 중앙 위치와 줌 레벨을 설정합니다.

    소스
    레이어를 구성하기 위한 데이터를 정의합니다.
    지도 공급자를 변경하거나 GeoJSON 및 KML과 같은 데이터 형식을 지정합니다.

    레이어
    화면의 표시를 구성하는 레이어입니다 Tile
    샘플에서는 다음 레이어를 사용합니다. Image OSM 지도 표시, Vector coordinates(경도/위도) 선 보기

    Feature
    레이어를 구성하는 요소


    VectorTile , Tile: , Vector: , Polyline , Point 는 대략 알 수 있다고 생각하므로 생략합니다Icon는 Geometry입니다.

    흐리게



    지금까지 Google Map의 API를 사용하고 있었지만, 맵의 열화나 요금 인상의 화제가 오르고 있으므로, 다른 맵으로 전환하려고 생각해 OpenLayers 를 접해 보았습니다.

    OpenLayers 로 할 수 있는 것은 공식 Examples 에 정리되어 있습니다만, 경로를 draw 하는 돈 피샤의 예는 발견되지 않고, 가장 가까운 마커 애니메이션 에서는 예가 너무 복잡했습니다. Example 의 polyline 을 바꾸면 좋겠다고 생각했지만, 경도 위도의 배열로 바꾼 것만으로는 경로는 표시되지 않아 고생하고 있었습니다. 어색한 메모라고 생각하지만 도움이되면 다행입니다.
    F9P에서 기지국
    ESP32에서 RTCM3 수신기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage