Skip to content

Commit aec19a7

Browse files
SomedayhzpSomedayhzp
committed
[update] replace with webgl library
1 parent 2302f39 commit aec19a7

File tree

819 files changed

+122748
-187755
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

819 files changed

+122748
-187755
lines changed

‎build/build.bat

+10-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@ call npm install
44
call npm install uglify-js -g
55
call npm run build
66
call copy style "dist"
7-
call copy README.md "dist"
8-
7+
copy README.md dist
8+
move dist\ol.mapsuite.js %~pd0compression
9+
copy src\ol %~pd0compression
10+
cd %~pd0compression
11+
call npm link
12+
call merge.bat
13+
call move vectormap-dev.js ../../dist
14+
call compression.bat
15+
call move vectormap.js ../../dist
16+
del /q /s *^ol*
917

1018

1119

‎debug/index.html

+40-47
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,49 @@
22
<html>
33

44
<head>
5-
<meta charset="utf-8">
6-
<title>Using OpenLayers with Webpack</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8-
<link rel="stylesheet" href="ol.css" type="text/css">
9-
<script src="./webfontloader.js"></script>
10-
<script>
11-
WebFont.load({
12-
custom: {
13-
families: ["vectormap-icons"],
14-
urls: ["https://cdn.thinkgeo.com/vectormap-icons/2.0.0/vectormap-icons.css"]
15-
}
16-
});
17-
</script>
18-
<style>
19-
html,
20-
body {
21-
margin: 0;
22-
height: 100%;
23-
}
24-
25-
#map {
26-
position: absolute;
27-
top: 0;
28-
bottom: 0;
29-
width: 100%;
30-
}
31-
32-
#olzoom {
33-
position: absolute;
34-
z-index: 1000;
35-
top: 10.5em;
36-
left: .5em;
37-
}
38-
39-
#canvasSize {
40-
position: absolute;
41-
z-index: 1000;
42-
top: 6.5em;
43-
left: .5em;
44-
}
45-
</style>
5+
<title>ThinkGeo Vector Tile Map</title>
6+
<link rel="stylesheet" href="mapsuite.css">
7+
<script src="./webfontloader.js"></script>
8+
<!-- <script>
9+
WebFont.load({
10+
custom: {
11+
families: ["vectormap-icons"],
12+
urls:["map-icon/vectormap-icons.css"]
13+
}
14+
});
15+
</script> -->
16+
<link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/vectormap-icons.css" type="text/css">
17+
<meta name="viewport" content="width=device-width, initial-scale=1">
18+
<style>
19+
html,
20+
body {
21+
margin: 0;
22+
padding: 0;
23+
color: #333;
24+
font-size: .85em;
25+
font-family: Arial, Verdana, Helvetica, Sans-Serif;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
#map {
30+
height: 100%;
31+
background-color: #f0eee8;
32+
}
33+
#olzoom {
34+
position: absolute;
35+
z-index: 1000;
36+
top: 9.5em;
37+
left: .5em;
38+
}
39+
</style>
40+
<script src="../../src/ol/ol-debug.js"></script>
41+
<script src="dist/ol.mapsuite.js"></script>
4642
</head>
4743

4844
<body>
49-
<label id="olzoom"></label>
50-
<!-- <label id="canvasSize"></label> -->
51-
<div id="map"></div>
52-
<script src="../dist/vectormap-dev.js"></script>
53-
<script src="thinkgeo-world-streets-light.js"></script>
54-
<script src="index.js"></script>
45+
<label id="olzoom"></label>
46+
<div id="map" class="map" tabindex="0"> </div>
47+
<script src="index.js"></script>
5548
</body>
5649

5750
</html>

‎debug/index.js

+47-41
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,8 @@
1-
let layer = new ol.mapsuite.VectorTileLayer(light, {
2-
multithread: true
3-
});
4-
5-
var tilegrid = new ol.layer.Tile({
6-
source: new ol.source.TileDebug({
7-
projection: "EPSG:3857",
8-
tileGrid: ol.tilegrid.createXYZ({ tileSize: 512, maxZoom: 22 })
9-
})
10-
})
11-
12-
var style = new ol.style.Style({
13-
text: new ol.style.Text({
14-
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
15-
placement: 'line',
16-
fill: new ol.style.Fill({
17-
color: '#cccccc'
18-
})
19-
})
20-
});
21-
22-
var vectorTileLayer = new ol.layer.VectorTile({
23-
updateWhileAnimating: true,
24-
updateWhileInteracting: true,
25-
source: new ol.source.VectorTile({
26-
format: new ol.format.MVT({
27-
}),
28-
url: "https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apiKey=WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~"
29-
}),
30-
declutter: true
31-
})
32-
33-
341
var view = new ol.View({
35-
center: [-10775718.490585351, 3868389.0226015863],
36-
zoom: 4,
2+
center: ol.proj.fromLonLat([-96.79748, 32.78819]),
3+
zoom: 2,
374
maxZoom: 19,
38-
maxResolution: 40075016.68557849 / 512,
39-
progressiveZoom: true
5+
maxResolution: 40075016.68557849 / 512
406
});
417
var zoom = view.getZoom();
428
document.getElementById("olzoom").innerHTML = "Zoom:" + (zoom);
@@ -48,11 +14,51 @@ view.on("change:resolution", function (e) {
4814
document.getElementById("olzoom").innerHTML = "Zoom:" + (zoom);
4915
});
5016

17+
var worldStreetsLayer = new ol.mapsuite.VectorTileLayer("thinkgeo-world-streets-light.json", {
18+
declutter: true,
19+
// threadMode:ol.mapsuite.VectorTileLayerThreadMode.Default,
20+
// backgroundWorkerCount:2,
21+
multithread: true,
22+
minimalist: true,
23+
});
24+
25+
// var tileGrid1 = new ol.layer.Tile({
26+
// source: new ol.source.TileDebug({
27+
// projection: "EPSG:3857",
28+
// tileGrid: worldStreetsLayer.createVectorTileGrid()
29+
// })
30+
// });
31+
32+
// var tileGrid2 = new ol.layer.Tile({
33+
// source: new ol.source.OSM()
34+
// });
35+
5136
var map = new ol.Map({
37+
layers: [worldStreetsLayer],
5238
target: 'map',
53-
layers: [
54-
layer
55-
],
5639
view: view,
40+
renderer: 'webgl',
5741
loadTilesWhileInteracting: true
58-
});
42+
});
43+
44+
// map.on('pointermove', showInfo);
45+
var info = document.getElementById('info');
46+
function showInfo(event) {
47+
var features = map.getFeaturesAtPixel(event.pixel);
48+
if(features)
49+
{
50+
for(var i=0;i<features.length;i++)
51+
{
52+
console.log(features[i].styleId);
53+
}
54+
console.log("--")
55+
}
56+
}
57+
58+
// disable rotation in mobile devices
59+
if ((navigator.userAgent.match(/(pad|iPad|iOS|Android|iPhone)/i))) {
60+
map.getInteractions().forEach(function (element, index, array) {
61+
// if (element instanceof ol.interaction.DragRotateAndZoom) element.setActive(false);
62+
// if (element instanceof ol.interaction.PinchRotate) element.setActive(false);
63+
});
64+
}

‎debug/mapsuite.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎debug/ol.css

-2
This file was deleted.

‎debug/ol/index.html

-41
This file was deleted.

‎debug/ol/index.js

-46
This file was deleted.

‎debug/ol/ol.css

-2
This file was deleted.

0 commit comments

Comments
 (0)