Openlayer with HK80

by LandsD Map API

HTML

<script src="https://landsvm.cbpmshk.info/openlayers/build/ol.js"></script>
<link rel="stylesheet" href="https://landsvm.cbpmshk.info/openlayers/css/ol.css">
<script src="https://landsvm.cbpmshk.info/landsd_js_api/proj4/proj4.js"></script>
<div id="map" class="map" style="height:320px"></div>
<div id="mouse-position"></div>
<form>
  <label>Projection </label>
  <select id="projection">
    <option value="EPSG:2326">EPSG:2326</option>
    <option value="EPSG:4326">EPSG:4326</option>
    <option value="EPSG:3857">EPSG:3857</option>
  </select>
  <label>Precision </label>
  <input id="precision" type="number" min="0" max="12" value="4" />
</form>

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 extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
 var projection = ol.proj.get('EPSG:2326');
 projection.setExtent(extent);
 var hkorigin = [-4786700.0, 8353100.0];
 //var hkorigin = [800000,800000];
 var resolutions = [156543.03392800014, 78271.51696399994,
   39135.75848200009, 19567.87924099992,
   9783.93962049996, 4891.96981024998,
   2445.98490512499, 1222.992452562495,
   611.4962262813797,
   305.74811314055756,
   152.87405657041106, 76.43702828507324, 38.21851414253662,
   19.10925707126831, 9.554628535634155, 4.77731426794937,
   2.388657133974685, 1.1943285668550503, 0.5971642835598172,
   0.29858214164761665, 0.14929107082380833
 ];

 var scales = [
   5.91657527591555E8, 2.95828763795777E8,
   1.47914381897889E8, 7.3957190948944E7,
   3.6978595474472E7, 1.8489297737236E7,
   9244648.868618, 4622324.434309,
   2311162.217155,
   1155581.108577,
   577790.554289, 288895.277144,
   144447.638572, 72223.819286,
   36111.909643, 18055.954822,
   9027.977411, 4513.988705,
   2256.994353, 1128.497176, 564.248588
 ];
 //var projExtent = ol.proj.get('EPSG:2326').getExtent();
 //     var startResolution = ol.extent.getWidth(projExtent) / 256;
 //      var resolutions = new Array(22);
 //     for (var i = 0, ii = resolutions.length; i < ii; ++i) {
 //       resolutions[i] = startResolution / Math.pow(2, i);
 //     }
 console.log(resolutions);
 var tileGrid = new ol.tilegrid.TileGrid({
   extent: extent,
   origin: hkorigin,
   scales: scales,
   resolutions: resolutions,
   tileSize: 256
 });
 // var tileGrid = new ol.tilegrid.TileGrid({
 //    origin:hkorigin,
 //    resolutions:resolutions,
 //   scales: scales,
 //   tileSize :256
 //});
 var mousePositionControl = new...