fredj/renderer.html

## renderer.html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Vector Features Performance Test</title>
    <style type="text/css">
        body {
            font-size: 0.8em;
        }
        p {
            padding-top: 1em;
        }
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
        }
    </style>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
    <script type="text/javascript">
        var features = {"type": "FeatureCollection", "features": [{"geometry": {"type": "Polygon", "coordinates": [[[-585733.80000000, -1138268.90000000], [-585735.60000000, -1138272.60000000], [-585733.50000000, -1138276.70000000], [-585735.30000000, -1138280.30000000], [-585733.00000000, -1138282.40000000], [-585722.20000000, -1138286.60000000], [-585653.60000000, -1138319.90000000], [-585611.13100000, -1138343.14400000], [-585589.66600000, -1138359.46700000], [-585565.24000000, -1138387.66300000], [-585554.13800000, -1138403.98700000], [-585548.95700000, -1138409.92300000], [-585541.76400000, -1138409.62500000], [-585542.99000000, -1138408.24100000], [-585542.38900000, -1138404.02300000], [-585538.78400000, -1138396.79000000], [-585497.33300000, -1138373.88900000], [-585519.53076775, -1138262.64695096], [-585519.60000000, -1138262.30000000], [-585524.60000000, -1138258.00000000], [-585527.90000000, -1138258.90000000], [-585533.90000000, -1138260.50000000], [-585545.50000000, -1138271.50000000], [-585552.00000000, -1138276.90000000], [-585561.30000000, -1138275.00000000], [-585567.00000000, -1138274.20000000], [-585569.20000000, -1138270.50000000], [-585573.90000000, -1138269.90000000], [-585579.00000000, -1138270.90000000], [-585584.60000000, -1138272.80000000], [-585631.54500000, -1138266.90900000], [-585669.39100000, -1138260.27900000], [-585704.37900000, -1138261.26700000], [-585711.07600000, -1138266.14300000], [-585714.80000000, -1138267.50000000], [-585725.40000000, -1138265.80000000], [-585733.80000000, -1138268.90000000]], [[-585643.90300000, -1138319.10300000], [-585638.52600000, -1138311.33900000], [-585630.30000000, -1138309.10000000], [-585623.29400000, -1138302.97500000], [-585620.30400000, -1138298.79200000], [-585626.30000000, -1138294.60000000], [-585627.47400000, -1138284.45600000], [-585638.52600000, -1138273.70600000], [-585635.53600000, -1138270.41800000], [-585628.96900000, -1138273.40400000], [-585623.20000000, -1138274.20000000], [-585620.60200000, -1138281.17300000], [-585609.40000000, -1138296.10000000], [-585604.40000000, -1138292.30000000], [-585595.51600000, -1138286.84700000], [-585589.84100000, -1138282.66400000], [-585586.20000000, -1138276.40000000], [-585573.80000000, -1138275.90000000], [-585566.20000000, -1138277.70000000], [-585561.76500000, -1138281.17300000], [-585555.49500000, -1138282.36600000], [-585550.11800000, -1138278.78200000], [-585542.94900000, -1138272.21100000], [-585534.90000000, -1138261.70000000], [-585528.31200000, -1138261.15900000], [-585522.34000000, -1138262.35600000], [-585524.90000000, -1138264.30000000], [-585527.80000000, -1138267.60000000], [-585537.70000000, -1138281.80000000], [-585544.90000000, -1138288.80000000], [-585559.80000000, -1138296.80000000], [-585569.60000000, -1138290.60000000], [-585575.70000000, -1138283.80000000], [-585583.57100000, -1138287.44200000], [-585591.10000000, -1138296.60000000], [-585601.80000000, -1138302.20000000], [-585609.70000000, -1138303.40000000], [-585619.90000000, -1138312.70000000], [-585628.90000000, -1138316.50000000], [-585635.00000000, -1138322.40000000], [-585643.90300000, -1138319.10300000]], [[-585600.90000000, -1138343.90000000], [-585605.40000000, -1138341.50000000], [-585577.60000000, -1138325.10000000], [-585564.80000000, -1138314.60000000], [-585556.10000000, -1138311.00000000], [-585534.20000000, -1138329.00000000], [-585520.00000000, -1138326.60000000], [-585513.38500000, -1138332.54200000], [-585510.69300000, -1138334.03700000], [-585508.00800000, -1138337.02300000], [-585509.49500000, -1138343.89200000], [-585512.48500000, -1138347.47700000], [-585518.16000000, -1138351.95800000], [-585533.68900000, -1138360.02000000], [-585551.61300000, -1138371.07200000], [-585565.94500000, -1138378.23700000], [-585567.14200000, -1138377.34100000], [-585567.73700000, -1138374.05800000], [-585567.44000000, -1138369.87800000], [-585563.26000000, -1138366.88800000], [-585547.43300000, -1138356.73600000], [-585531.30200000, -1138349.86400000], [-585525.62700000, -1138345.38700000], [-585525.32900000, -1138340.30700000], [-585529.21200000, -1138334.03700000], [-585557.60000000, -1138320.30000000], [-585600.90000000, -1138343.90000000]], [[-585584.50000000, -1138359.60000000], [-585583.26600000, -1138348.67000000], [-585561.60000000, -1138343.20000000], [-585547.12800000, -1138340.01000000], [-585545.03800000, -1138342.69800000], [-585546.83100000, -1138346.87800000], [-585564.80000000, -1138352.00000000], [-585575.70000000, -1138357.30000000], [-585584.50000000, -1138359.60000000]], [[-585559.67500000, -1138389.88800000], [-585560.27000000, -1138387.49700000], [-585558.47800000, -1138380.03000000], [-585508.00800000, -1138349.86400000], [-585505.01800000, -1138350.76000000], [-585502.92800000, -1138352.55300000], [-585505.01800000, -1138358.52800000], [-585514.60000000, -1138361.50000000], [-585538.30000000, -1138376.40000000], [-585556.99000000, -1138388.99200000], [-585559.67500000, -1138389.88800000]], [[-585552.20800000, -1138397.65300000], [-585552.20800000, -1138394.06800000], [-585506.51300000, -1138364.50100000], [-585502.63100000, -1138366.29300000], [-585502.33300000, -1138369.87800000], [-585539.80000000, -1138392.50000000], [-585548.92100000, -1138399.14700000], [-585552.20800000, -1138397.65300000]]]}, "type": "Feature", "properties": {}}]};
        var center = [-585541.3839987473, -1138308.366572589];
        var zoom = 17;

        function init() {
            var map = new ol.Map({
              target: 'map',
              view: new ol.View({
                center: center,
                zoom: zoom
              }),
              renderer: 'webgl'
              //renderer: 'canvas'
            });

            map.addInteraction(new ol.interaction.Select({
              condition: ol.events.condition.pointerMove
            }));

            var vectorLayer = new ol.layer.Vector({
              source: new ol.source.Vector()
            });
            map.addLayer(vectorLayer);
            var features1 = (new ol.format.GeoJSON()).readFeatures(features);
            vectorLayer.getSource().addFeatures(features1);
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Vector Features Performance Test</h1>
    <div id="map"></div>
  </body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Vector Features Performance Test</title>
	<style type="text/css">
	body {
	font-size: 0.8em;
	}
	p {
	padding-top: 1em;
	}
	#map {
	width: 512px;
	height: 512px;
	border: 1px solid black;
	}
	</style>
	<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
	<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
	<script type="text/javascript">
	var features = {"type": "FeatureCollection", "features": [{"geometry": {"type": "Polygon", "coordinates": [[[-585733.80000000, -1138268.90000000], [-585735.60000000, -1138272.60000000], [-585733.50000000, -1138276.70000000], [-585735.30000000, -1138280.30000000], [-585733.00000000, -1138282.40000000], [-585722.20000000, -1138286.60000000], [-585653.60000000, -1138319.90000000], [-585611.13100000, -1138343.14400000], [-585589.66600000, -1138359.46700000], [-585565.24000000, -1138387.66300000], [-585554.13800000, -1138403.98700000], [-585548.95700000, -1138409.92300000], [-585541.76400000, -1138409.62500000], [-585542.99000000, -1138408.24100000], [-585542.38900000, -1138404.02300000], [-585538.78400000, -1138396.79000000], [-585497.33300000, -1138373.88900000], [-585519.53076775, -1138262.64695096], [-585519.60000000, -1138262.30000000], [-585524.60000000, -1138258.00000000], [-585527.90000000, -1138258.90000000], [-585533.90000000, -1138260.50000000], [-585545.50000000, -1138271.50000000], [-585552.00000000, -1138276.90000000], [-585561.30000000, -1138275.00000000], [-585567.00000000, -1138274.20000000], [-585569.20000000, -1138270.50000000], [-585573.90000000, -1138269.90000000], [-585579.00000000, -1138270.90000000], [-585584.60000000, -1138272.80000000], [-585631.54500000, -1138266.90900000], [-585669.39100000, -1138260.27900000], [-585704.37900000, -1138261.26700000], [-585711.07600000, -1138266.14300000], [-585714.80000000, -1138267.50000000], [-585725.40000000, -1138265.80000000], [-585733.80000000, -1138268.90000000]], [[-585643.90300000, -1138319.10300000], [-585638.52600000, -1138311.33900000], [-585630.30000000, -1138309.10000000], [-585623.29400000, -1138302.97500000], [-585620.30400000, -1138298.79200000], [-585626.30000000, -1138294.60000000], [-585627.47400000, -1138284.45600000], [-585638.52600000, -1138273.70600000], [-585635.53600000, -1138270.41800000], [-585628.96900000, -1138273.40400000], [-585623.20000000, -1138274.20000000], [-585620.60200000, -1138281.17300000], [-585609.40000000, -1138296.10000000], [-585604.40000000, -1138292.30000000], [-585595.51600000, -1138286.84700000], [-585589.84100000, -1138282.66400000], [-585586.20000000, -1138276.40000000], [-585573.80000000, -1138275.90000000], [-585566.20000000, -1138277.70000000], [-585561.76500000, -1138281.17300000], [-585555.49500000, -1138282.36600000], [-585550.11800000, -1138278.78200000], [-585542.94900000, -1138272.21100000], [-585534.90000000, -1138261.70000000], [-585528.31200000, -1138261.15900000], [-585522.34000000, -1138262.35600000], [-585524.90000000, -1138264.30000000], [-585527.80000000, -1138267.60000000], [-585537.70000000, -1138281.80000000], [-585544.90000000, -1138288.80000000], [-585559.80000000, -1138296.80000000], [-585569.60000000, -1138290.60000000], [-585575.70000000, -1138283.80000000], [-585583.57100000, -1138287.44200000], [-585591.10000000, -1138296.60000000], [-585601.80000000, -1138302.20000000], [-585609.70000000, -1138303.40000000], [-585619.90000000, -1138312.70000000], [-585628.90000000, -1138316.50000000], [-585635.00000000, -1138322.40000000], [-585643.90300000, -1138319.10300000]], [[-585600.90000000, -1138343.90000000], [-585605.40000000, -1138341.50000000], [-585577.60000000, -1138325.10000000], [-585564.80000000, -1138314.60000000], [-585556.10000000, -1138311.00000000], [-585534.20000000, -1138329.00000000], [-585520.00000000, -1138326.60000000], [-585513.38500000, -1138332.54200000], [-585510.69300000, -1138334.03700000], [-585508.00800000, -1138337.02300000], [-585509.49500000, -1138343.89200000], [-585512.48500000, -1138347.47700000], [-585518.16000000, -1138351.95800000], [-585533.68900000, -1138360.02000000], [-585551.61300000, -1138371.07200000], [-585565.94500000, -1138378.23700000], [-585567.14200000, -1138377.34100000], [-585567.73700000, -1138374.05800000], [-585567.44000000, -1138369.87800000], [-585563.26000000, -1138366.88800000], [-585547.43300000, -1138356.73600000], [-585531.30200000, -1138349.86400000], [-585525.62700000, -1138345.38700000], [-585525.32900000, -1138340.30700000], [-585529.21200000, -1138334.03700000], [-585557.60000000, -1138320.30000000], [-585600.90000000, -1138343.90000000]], [[-585584.50000000, -1138359.60000000], [-585583.26600000, -1138348.67000000], [-585561.60000000, -1138343.20000000], [-585547.12800000, -1138340.01000000], [-585545.03800000, -1138342.69800000], [-585546.83100000, -1138346.87800000], [-585564.80000000, -1138352.00000000], [-585575.70000000, -1138357.30000000], [-585584.50000000, -1138359.60000000]], [[-585559.67500000, -1138389.88800000], [-585560.27000000, -1138387.49700000], [-585558.47800000, -1138380.03000000], [-585508.00800000, -1138349.86400000], [-585505.01800000, -1138350.76000000], [-585502.92800000, -1138352.55300000], [-585505.01800000, -1138358.52800000], [-585514.60000000, -1138361.50000000], [-585538.30000000, -1138376.40000000], [-585556.99000000, -1138388.99200000], [-585559.67500000, -1138389.88800000]], [[-585552.20800000, -1138397.65300000], [-585552.20800000, -1138394.06800000], [-585506.51300000, -1138364.50100000], [-585502.63100000, -1138366.29300000], [-585502.33300000, -1138369.87800000], [-585539.80000000, -1138392.50000000], [-585548.92100000, -1138399.14700000], [-585552.20800000, -1138397.65300000]]]}, "type": "Feature", "properties": {}}]};
	var center = [-585541.3839987473, -1138308.366572589];
	var zoom = 17;

	function init() {
	var map = new ol.Map({
	target: 'map',
	view: new ol.View({
	center: center,
	zoom: zoom
	}),
	renderer: 'webgl'
	//renderer: 'canvas'
	});

	map.addInteraction(new ol.interaction.Select({
	condition: ol.events.condition.pointerMove
	}));

	var vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector()
	});
	map.addLayer(vectorLayer);
	var features1 = (new ol.format.GeoJSON()).readFeatures(features);
	vectorLayer.getSource().addFeatures(features1);
	}
	</script>
	</head>
	<body onload="init()">
	<h1 id="title">Vector Features Performance Test</h1>
	<div id="map"></div>
	</body>
	</html>