Openlayer with API

by LandsD Map API

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script src="https://mapapis01.blob.core.windows.net/javascript/openlayers401/build/ollandsd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
 <div id="map" class="map"></div>

CSS

#map { height: 530px; };

JavaScript

proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');

			var projection = ol.proj.get('EPSG:2326');

			 var mousePositionControl = new ol.control.MousePosition({
											coordinateFormat: ol.coordinate.createStringXY(4),
											projection: 'EPSG:2326',
											   // comment the following two lines to have the mouse position
											   // be placed within the map.
											className: 'custom-mouse-position',
											target: document.getElementById('mouse-position'),
											undefinedHTML: '&nbsp;'
										});

var map = new ol.Map({
			   controls: ol.control.defaults({
				 attributionOptions: ({
				   collapsible: false
				 })
			   }).extend([mousePositionControl]),
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.landsd({layername: 'hk80basemap'})
         }),
          new ol.layer.Tile({
				   source: new ol.source.landsd({layername: 'hk80tclbl'})
				 })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([114.20847, 22.29227]),
         zoom: 17,
         minZoom: 10,
         maxZoom: 19
       })
     });