JSFiddle - React, Tailwind, and code Playground

by larssoe

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vector Tile </title>
    <script src="https://unpkg.com/elm-pep"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4-src.js" type="text/javascript"></script>
	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.6.0/build/ol.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      #map {
        position: relative;
      }      
    </style>
  </head>
  <body>
  <div id="mouse-position"></div>
    <div id="map" class="map">
      <pre id="info"/>
    </div>
	
    <script src="vectorTiles.js"></script>
  </body>
</html>

JavaScript

proj4.defs('EPSG:25832', "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");
	ol.proj.proj4.register(proj4);

var myProjection = ol.proj.get('EPSG:25832');
myProjection.setExtent([130000, 5661139.2, 1378291.2, 6500000]);  
var resturl = 'https://bragdev3.gis.dk/arcgis/rest/services/Plandistrikter2/MapServer';

const mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:25832',
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
});

var map = new ol.Map({
  controls: ol.control.defaults().extend([mousePositionControl]),
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 10,
		projection: myProjection
    //projection: 'EPSG:25832',
  }),
  layers: [
    
	new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      //tilegrid: myTileGrid,
      projection: 'EPSG:25832',
      minZoom: 0,
      maxZoom: 15,
      maxResolution: 1638.4,
      wrapX: false,
      url: 'https://bragdev3.gis.dk/arcgis/rest/services/Hosted/Plandistrikter2/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      }),
      tileSize: 512,
      //tilegrid: myTileGrid2
	}),
  new ol.layer.Tile({
		title:'ArcGISRest',
		source: new ol.source.TileArcGISRest({
			url: resturl,
			params: {
				FORMAT: "png32",
				LAYERS: "show:0",
				DPI: 96
			},
			projection: ol.proj.get("EPSG:25832"),
      //tilegrid: myTileGrid
		})
	})
  ],
});

map.on('moveend', move);

function move(event) {
	var info = document.getElementById('info');
  const extent = map.getView().calculateExtent(map.getSize());
  const resolution = map.getView().getResolution();
  const zoom = map.getView().getZoom();
  info.innerText = 'zoom: ' + zoom + ' resolution: ' + resolution + ' extent:' + extent;
  info.style.opacity = 1;}

var info = document.getElementById('info');
function showInfo(event) {
  var features = map.getFeaturesAtPixel(event.pixel);
  if...