dayjournal memo

Total 973 articles!!

OpenLayers #032 – ダブルクリック位置の経緯度取得

Yasunori Kirimoto's avatar


画像



ダブルクリック位置の経緯度を取得するメモ。



画像



script.js

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";

// MIERUNE Streets読み込み
const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new XYZ({
        url:
          "https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]",
        attributions:
          '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18,
      }),
    }),
  ],
  view: new View({
    center: fromLonLat([139.767, 35.681]),
    zoom: 15,
  }),
});

// ダブルクリックイベント
map.on('dblclick', function (e) {
    //ダブルクリッククリック位置経緯度取得
    const lonlat = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');
    //経緯度表示
    alert('lat: ' + lonlat[1] + ', lat: ' + lonlat[0]);
});



OpenLayers を手軽に始めるビルド環境公開しています。
openlayers-starter



book

Q&A