OpenLayers
便利サイト
- geojson.io 位置情報の編集に
- epsg.io 好きな空間参照系の変換のときにproj4.jsと組み合わせて使う
マーカーの見た目を変える方法
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Tile from 'ol/source/Tile.js'
import OSM from 'ol/source/OSM.js'
import proj from 'ol/proj.js'
let feature = new Feature({
geometry: new Point()
})
let map = new ol.Map({
target: 'map',
layers: [
new Tile({
source: new OSM()
})
],
view: new View({
center: proj.fromLonLat([139.745433,35.658581]),
zoom: 16
})
})
GeoJSONからデータを読み込んで指定した空間参照系に変換するコード
import format from 'ol/format'
const features = (new format.GeoJSON()).readFeatures(loadGeoJSONFileForTest())
for (const f of features) {
const geom = f.getGeometry()
if (!geom) continue
geom.transform(/* from */ 'EPSG:4326', /* to */'EPSG:3857')
}
ちなみにある座標値を変換したいときはol.proj.transform(coordinate, from, to)
を使うといい
import proj from 'ol/proj'
const coordinate = [123.123, 123.123]
proj.transform(coordinate, /* from */ 'EPSG:4326', /* to */'EPSG:3857')
ドラッグアンドドロップで座標データを読み込ませたいときのコード
import DragAndDrop from 'ol/interaction/DragAndDrop'
import source from 'ol/source'
import layer from 'ol/layer'
import format from 'ol/format'
function initDragAndDrop(map) {
const source = new source.Vector()
const layer = new layer.Vector({
source: source
})
map.addLayer(layer)
map.addInteraction(new DragAndDrop({
source: source,
formatConstructors: [format.GeoJSON]
}))
}