軒軒的爸媽

今天心血來潮，試試看OpenStreetMap，畢竟GOOGLE要收費@~@....

上網G了一下，趕緊來測試看看，只想要一個簡單的功能，顯示個Marker就好了

先在index.html引入

<!-- OpenLayers CSS-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

<!-- OpenLayers Library -->
 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 

app.component.html

<div id="map" </div>

app.component.ts

export class AppComponent implements OnInit {

ngOnInit() {

   // 台北火車站
  const longitude = 25.047940;
  const latitude =  121.516981;
  const zoom = 18;

// 主層
  const mlayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

  // icon以及矢量空間
  const vectorSource = new ol.source.Vector({});

      // 圖標位置
  const iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([latitude, longitude]), 'XY'),
          name: 'my Icon',
      });
      // 加入
  vectorSource.addFeature(iconFeature);

  // 圖標的樣式
  const iconStyle = new ol.style.Style({
      image: new ol.style.Icon({
          opacity: 1,
          src: 'https://openlayers.org/en/latest/examples/data/icon.png'
      }),
  });

  // 圖標層
  const vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle,
    });

  const map = new ol.Map({
    target: 'map',
    layers: [
      mlayer,
      vectorLayer
    ],
    view: new ol.View({
      projection: 'EPSG:3857',
      center: ol.proj.fromLonLat([latitude, longitude]),
      zoom
    })
  });

}
}