init
TuxCoder
parent
2939d90df1
commit
8391fe79e2
|
|
@ -1,2 +1,3 @@
|
|||
/node_modules/
|
||||
bundle.js
|
||||
dist/app.js
|
||||
|
|
|
|||
20
_readme_.md
20
_readme_.md
|
|
@ -1,20 +0,0 @@
|
|||
# OpenLayers + Webpack
|
||||
|
||||
This example demonstrates how the `ol` package can be used with webpack 2.
|
||||
|
||||
Clone the project.
|
||||
|
||||
git clone git@gist.github.com:79025aef325cd2837364400a105405b8.git ol-webpack
|
||||
|
||||
Install the project dependencies.
|
||||
|
||||
cd ol-webpack
|
||||
npm install
|
||||
|
||||
Create a bundle for the browser.
|
||||
|
||||
npm run build
|
||||
|
||||
Open `index.html` to see the result.
|
||||
|
||||
open index.html
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using OpenLayers with Webpack</title>
|
||||
<link rel="stylesheet" href="./main.css" type="text/css">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
.ol-box {
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
|
||||
.ol-mouse-position {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ol-scale-line {
|
||||
background: rgba(0,60,136,0.3);
|
||||
border-radius: 4px;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
.ol-scale-line-inner {
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
color: #eee;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
margin: 1px;
|
||||
will-change: contents, width;
|
||||
}
|
||||
.ol-overlay-container {
|
||||
will-change: left,right,top,bottom;
|
||||
}
|
||||
|
||||
.ol-unsupported {
|
||||
display: none;
|
||||
}
|
||||
.ol-viewport, .ol-unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
.ol-selectable {
|
||||
-webkit-touch-callout: default;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
.ol-grabbing {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.ol-grab {
|
||||
cursor: move;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.ol-control {
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
.ol-control:hover {
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
}
|
||||
.ol-zoom {
|
||||
top: .5em;
|
||||
left: .5em;
|
||||
}
|
||||
.ol-rotate {
|
||||
top: .5em;
|
||||
right: .5em;
|
||||
transition: opacity .25s linear, visibility 0s linear;
|
||||
}
|
||||
.ol-rotate.ol-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity .25s linear, visibility 0s linear .25s;
|
||||
}
|
||||
.ol-zoom-extent {
|
||||
top: 4.643em;
|
||||
left: .5em;
|
||||
}
|
||||
.ol-full-screen {
|
||||
right: .5em;
|
||||
top: .5em;
|
||||
}
|
||||
@media print {
|
||||
.ol-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ol-control button {
|
||||
display: block;
|
||||
margin: 1px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-size: 1.14em;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
height: 1.375em;
|
||||
width: 1.375em;
|
||||
line-height: .4em;
|
||||
background-color: rgba(0,60,136,0.5);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ol-control button::-moz-focus-inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.ol-zoom-extent button {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.ol-compass {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
will-change: transform;
|
||||
}
|
||||
.ol-touch .ol-control button {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ol-touch .ol-zoom-extent {
|
||||
top: 5.5em;
|
||||
}
|
||||
.ol-control button:hover,
|
||||
.ol-control button:focus {
|
||||
text-decoration: none;
|
||||
background-color: rgba(0,60,136,0.7);
|
||||
}
|
||||
.ol-zoom .ol-zoom-in {
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
.ol-zoom .ol-zoom-out {
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
|
||||
.ol-attribution {
|
||||
text-align: right;
|
||||
bottom: .5em;
|
||||
right: .5em;
|
||||
max-width: calc(100% - 1.3em);
|
||||
}
|
||||
|
||||
.ol-attribution ul {
|
||||
margin: 0;
|
||||
padding: 0 .5em;
|
||||
font-size: .7rem;
|
||||
line-height: 1.375em;
|
||||
color: #000;
|
||||
text-shadow: 0 0 2px #fff;
|
||||
}
|
||||
.ol-attribution li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
line-height: inherit;
|
||||
}
|
||||
.ol-attribution li:not(:last-child):after {
|
||||
content: " ";
|
||||
}
|
||||
.ol-attribution img {
|
||||
max-height: 2em;
|
||||
max-width: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ol-attribution ul, .ol-attribution button {
|
||||
display: inline-block;
|
||||
}
|
||||
.ol-attribution.ol-collapsed ul {
|
||||
display: none;
|
||||
}
|
||||
.ol-attribution:not(.ol-collapsed) {
|
||||
background: rgba(255,255,255,0.8);
|
||||
}
|
||||
.ol-attribution.ol-uncollapsible {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 4px 0 0;
|
||||
height: 1.1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
.ol-attribution.ol-uncollapsible img {
|
||||
margin-top: -.2em;
|
||||
max-height: 1.6em;
|
||||
}
|
||||
.ol-attribution.ol-uncollapsible button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ol-zoomslider {
|
||||
top: 4.5em;
|
||||
left: .5em;
|
||||
height: 200px;
|
||||
}
|
||||
.ol-zoomslider button {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ol-touch .ol-zoomslider {
|
||||
top: 5.5em;
|
||||
}
|
||||
|
||||
.ol-overviewmap {
|
||||
left: 0.5em;
|
||||
bottom: 0.5em;
|
||||
}
|
||||
.ol-overviewmap.ol-uncollapsible {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
.ol-overviewmap .ol-overviewmap-map,
|
||||
.ol-overviewmap button {
|
||||
display: inline-block;
|
||||
}
|
||||
.ol-overviewmap .ol-overviewmap-map {
|
||||
border: 1px solid #7b98bc;
|
||||
height: 150px;
|
||||
margin: 2px;
|
||||
width: 150px;
|
||||
}
|
||||
.ol-overviewmap:not(.ol-collapsed) button{
|
||||
bottom: 1px;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
|
||||
.ol-overviewmap.ol-uncollapsible button {
|
||||
display: none;
|
||||
}
|
||||
.ol-overviewmap:not(.ol-collapsed) {
|
||||
background: rgba(255,255,255,0.8);
|
||||
}
|
||||
.ol-overviewmap-box {
|
||||
border: 2px dotted rgba(0,60,136,0.7);
|
||||
}
|
||||
|
||||
.ol-overviewmap .ol-overviewmap-box:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%; }
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
|
||||
/*# sourceMappingURL=main.css.map*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
24
index.html
24
index.html
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using OpenLayers with Webpack</title>
|
||||
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
main.js
18
main.js
|
|
@ -1,18 +0,0 @@
|
|||
import {Map, View} from 'ol';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
|
||||
new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
})
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
|
|
@ -1,15 +1,24 @@
|
|||
{
|
||||
"name": "ol-webpack",
|
||||
"version": "1.0.0",
|
||||
"description": "Example using OpenLayers with Webpack",
|
||||
"name": "cccamp19-map",
|
||||
"version": "0.1.0",
|
||||
"description": "milliways map",
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.js --mode production"
|
||||
"build": "node_modules/.bin/webpack --config webpack.config.js --mode production",
|
||||
"dev": "node_modules/.bin/webpack-dev-server --progress --colors --port 8080 --content-base dist --config webpack.config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^4.12.1",
|
||||
"webpack-command": "^0.3.0"
|
||||
"webpack": "^4.35.3",
|
||||
"webpack-cli": "^3.3.5",
|
||||
"webpack-dev-server": "^3.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ol": "^5.0.0"
|
||||
"css-loader": "^3.0.0",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"ol": "^5.3.3",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^6.0.4",
|
||||
"uglifyjs-webpack-plugin": "^2.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
import Map from 'ol/Map.js';
|
||||
import View from 'ol/View.js';
|
||||
import {all as allStrategy} from 'ol/loadingstrategy';
|
||||
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import OSM from 'ol/source/OSM.js';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import {fromLonLat} from 'ol/proj.js';
|
||||
import VectorLayer from 'ol/layer/Vector.js';
|
||||
import VectorSource from 'ol/source/Vector.js';
|
||||
import VectorTileLayer from 'ol/layer/VectorTile.js';
|
||||
import VectorTileSource from 'ol/source/VectorTile.js';
|
||||
import OSMXML from 'ol/format/OSMXML.js';
|
||||
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
|
||||
|
||||
|
||||
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
|
||||
|
||||
|
||||
var styles = {
|
||||
'amenity': {
|
||||
'parking': new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(170, 170, 170, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(170, 170, 170, 0.3)'
|
||||
})
|
||||
})
|
||||
},
|
||||
'building': {
|
||||
'.*': new Style({
|
||||
zIndex: 100,
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(246, 99, 79, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(246, 99, 79, 0.3)'
|
||||
})
|
||||
})
|
||||
},
|
||||
'highway': {
|
||||
'service': new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(255, 255, 255, 1.0)',
|
||||
width: 2
|
||||
})
|
||||
}),
|
||||
'.*': new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(255, 255, 255, 1.0)',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
},
|
||||
'landuse': {
|
||||
'forest|grass|allotments': new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(140, 208, 95, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(140, 208, 95, 0.3)'
|
||||
})
|
||||
})
|
||||
},
|
||||
'natural': {
|
||||
'tree': new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: 'rgba(140, 208, 95, 1.0)'
|
||||
}),
|
||||
stroke: null
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
var vectorSource = new VectorTileSource({
|
||||
format: new OSMXML(),
|
||||
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
|
||||
/*loader: function(extent, resolution, projection) {
|
||||
var proj = projection.getCode();
|
||||
var url = 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1';
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
var onError = function(e) {
|
||||
vectorSource.removeLoadedExtent(extent);
|
||||
}
|
||||
xhr.onerror = onError;
|
||||
xhr.onload = function() {
|
||||
if (xhr.status == 200) {
|
||||
vectorSource.addFeatures(
|
||||
vectorSource.getFormat().readFeatures(xhr.responseText));
|
||||
} else {
|
||||
onError();
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
},*/
|
||||
strategy: allStrategy
|
||||
})
|
||||
|
||||
var map = new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
})
|
||||
//source: OSM()
|
||||
}),
|
||||
new VectorTileLayer({
|
||||
source: vectorSource,
|
||||
style: function(feature) {
|
||||
for (var key in styles) {
|
||||
var value = feature.get(key);
|
||||
if (value !== undefined) {
|
||||
for (var regexp in styles[key]) {
|
||||
if (new RegExp(regexp).test(value)) {
|
||||
return styles[key][regexp];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
center: coordinate_cccamp19,
|
||||
zoom: 17
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
document.map = map;
|
||||
|
||||
module.export= {
|
||||
mapa: map
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import "~ol/ol.css";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +1,94 @@
|
|||
const path = require('path');
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const webpack = require('webpack');
|
||||
|
||||
// Where are your assets located in your project? This would typically be a path
|
||||
// that contains folders such as: images, stylesheets and javascript.
|
||||
var rootAssetPath = './assets';
|
||||
|
||||
var debug = true;
|
||||
|
||||
module.exports = {
|
||||
entry: './main.js',
|
||||
output: {
|
||||
path: __dirname,
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
"mode": debug ? "development":"production",
|
||||
"entry": [
|
||||
"./src/app.js",
|
||||
"./src/app.scss"
|
||||
],
|
||||
"output": {
|
||||
"path": path.join(__dirname, 'dist'),
|
||||
"filename": "[name].js"
|
||||
},
|
||||
"devtool": "source-map",
|
||||
/* "resolve": {
|
||||
"alias":{
|
||||
"jquery": "jquery/src/jquery"
|
||||
}
|
||||
},*/
|
||||
"module": {
|
||||
"rules": [
|
||||
{
|
||||
"test": /\.tsx?$/,
|
||||
"exclude": /node_modules/,
|
||||
"use": {
|
||||
"loader": "ts-loader",
|
||||
"options": {
|
||||
"transpileOnly": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"test": /\.scss$/,
|
||||
"use": [
|
||||
MiniCssExtractPlugin.loader,
|
||||
// "style-loader",
|
||||
"css-loader",
|
||||
"sass-loader"
|
||||
]
|
||||
},
|
||||
{
|
||||
"test": /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
"use": {
|
||||
"loader": "url-loader?limit=10000&mimetype=application/font-woff",
|
||||
"options": {
|
||||
name: '[path][name].[ext]',
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
"test": /\.(ttf|eot|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
"use": [
|
||||
"file-loader"
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
]
|
||||
},
|
||||
"optimization": {
|
||||
minimize: !debug,
|
||||
minimizer: [
|
||||
new UglifyJsPlugin({
|
||||
include: /\.js$/
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({
|
||||
include: /\.css$/
|
||||
})
|
||||
]
|
||||
},
|
||||
"plugins": [
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery"
|
||||
}),
|
||||
new MiniCssExtractPlugin("[name].css"),
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
compress: true,
|
||||
port: 8080
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue