1. 前に作成した map.html ファイルを使って始めます。
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers example</title> <script src="/loader.js" type="text/javascript"></script> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var style = (function() {
var stroke = new ol.style.Stroke({
color: 'black'
});
var textStroke = new ol.style.Stroke({
color: '#fff',
width: 3
});
var textFill = new ol.style.Fill({
color: '#000'
});
return function(feature, resolution) {
return [new ol.style.Style({
stroke: stroke,
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: feature.get('key'),
fill: textFill,
stroke: textStroke
})
})];
};
})();
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'Buildings',
source: new ol.source.Vector({
url: '/data/layers/buildings.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: style
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-122.79264450073244, 42.30975194250527]),
zoom: 16
})
});
</script>
</body> </html>
{
"exports": [
"ol.Map",
"ol.View",
"ol.format.KML",
"ol.layer.Tile",
"ol.layer.Vector",
"ol.proj.fromLonLat",
"ol.source.OSM",
"ol.source.Vector",
"ol.style.Fill",
"ol.style.Stroke",
"ol.style.Style",
"ol.style.Text"
],
"jvm": [], "umd": true,
"compile": {
"externs": [
"externs/bingmaps.js",
"externs/cartodb.js",
"externs/closure-compiler.js",
"externs/esrijson.js",
"externs/geojson.js",
"externs/oli.js",
"externs/olx.js",
"externs/proj4js.js",
"externs/tilejson.js",
"externs/topojson.js"
],
"define": [ "goog.DEBUG=false", "ol.ENABLE_WEBGL=false", "ol.ENABLE_PROJ4JS=false" ],
"jscomp_error": [
"*"
],
"jscomp_off": [ "analyzerChecks", "lintChecks", "unnecessaryCasts", "useOfGoogBase" ],
"extra_annotation_name": [ "api", "observable" ],
"compilation_level": "ADVANCED", "warning_level": "VERBOSE", "use_types_for_optimization": true, "manage_closure_dependencies": true } }
$ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js
これは、プロジェクトのルートに ol-custom.js カスタムビルドを発生します。
2. では、map.html を開発 loader からカスタムビルド（ol-custom.js）に変更します。そのため、
<script src="/loader.js" type="text/javascript"></script>
を
<script src="/ol-custom.js" type="text/javascript"></script>
に変更します。
ページは、今、以前よりとても速くロードされます。
■□ Debian8 で試します■□
上記 map.html の内容のファイルをワークショップのルートディレクトリに作成します。
user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
上記 ol-custom.json の内容のファイルをワークショップのルートディレクトリに作成します。
user@deb8-vmw:~/openlayers-workshop-en$ vim ol-custom.json
次のコマンドでカスタムビルドを作成します。
user@deb8-vmw:~/openlayers-workshop-en$ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js
info ol Parsing dependencies
info ol Compiling 345 sources
info ol Parsing dependencies
info ol Compiling 345 sources
ol-custom.js は、ol.js から map.html に必要な機能だけを備えたカスタムビルドです。容量が少なくなっていることを確認します。
user@deb8-vmw:~/openlayers-workshop-en$ ls -l
---
-rw-r--r-- 1 user user 184857 6月 6 16:03 ol-custom.js
---
user@deb8-vmw:~/openlayers-workshop-en$ find -name ol.js -ls
2365510 492 -rw-r--r-- 1 user user 503391 2月 14 18:25 ./node_modules/openlayers/dist/ol.js
---
-rw-r--r-- 1 user user 184857 6月 6 16:03 ol-custom.js
---
user@deb8-vmw:~/openlayers-workshop-en$ find -name ol.js -ls
2365510 492 -rw-r--r-- 1 user user 503391 2月 14 18:25 ./node_modules/openlayers/dist/ol.js
map.html を開発 loader からカスタムビルド（ol-custom.js）に変更します。
user@deb8-vmw:~/openlayers-workshop-en$ vim map.html --- <script src="/ol-custom.js" type="text/javascript"></script> ---
■□ここまで■□
0 件のコメント:
コメントを投稿