mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-30 23:55:32 +01:00
Merge pull request #253 from orangemug/maintenance/openlayers-update
Updated openlayers
This commit is contained in:
commit
07efe1e1b8
7 changed files with 581 additions and 982 deletions
|
@ -35,7 +35,7 @@ exports.config = {
|
||||||
mochaOpts: {
|
mochaOpts: {
|
||||||
ui: 'bdd',
|
ui: 'bdd',
|
||||||
// Because we don't know how long the initial build will take...
|
// Because we don't know how long the initial build will take...
|
||||||
timeout: 2*60*1000
|
timeout: 4*60*1000
|
||||||
},
|
},
|
||||||
onPrepare: function (config, capabilities) {
|
onPrepare: function (config, capabilities) {
|
||||||
var compiler = webpack(webpackConfig);
|
var compiler = webpack(webpackConfig);
|
||||||
|
|
|
@ -25,8 +25,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
noParse: [
|
noParse: [
|
||||||
/mapbox-gl\/dist\/mapbox-gl.js/,
|
/mapbox-gl\/dist\/mapbox-gl.js/
|
||||||
/openlayers\/dist\/ol.js/
|
|
||||||
],
|
],
|
||||||
loaders: loaders
|
loaders: loaders
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,7 +17,8 @@ module.exports = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.jsx?$/,
|
test: /\.jsx?$/,
|
||||||
exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/,
|
// Note: These modules aren't ES5 therefore we much compile them.
|
||||||
|
exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
query: {
|
query: {
|
||||||
presets: ['env', 'react'],
|
presets: ['env', 'react'],
|
||||||
|
|
|
@ -7,6 +7,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
|
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
|
||||||
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||||
var CopyWebpackPlugin = require('copy-webpack-plugin');
|
var CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
|
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||||
|
|
||||||
var OUTPATH;
|
var OUTPATH;
|
||||||
if(process.env.CIRCLE_ARTIFACTS) {
|
if(process.env.CIRCLE_ARTIFACTS) {
|
||||||
|
@ -49,8 +50,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
noParse: [
|
noParse: [
|
||||||
/mapbox-gl\/dist\/mapbox-gl.js/,
|
/mapbox-gl\/dist\/mapbox-gl.js/
|
||||||
/openlayers\/dist\/ol.js/
|
|
||||||
],
|
],
|
||||||
loaders
|
loaders
|
||||||
},
|
},
|
||||||
|
@ -68,12 +68,7 @@ module.exports = {
|
||||||
NODE_ENV: '"production"'
|
NODE_ENV: '"production"'
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
new UglifyJsPlugin(),
|
||||||
compress: {
|
|
||||||
warnings: false,
|
|
||||||
screw_ie8: true,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
new ExtractTextPlugin('[contenthash].css', {
|
new ExtractTextPlugin('[contenthash].css', {
|
||||||
allChunks: true
|
allChunks: true
|
||||||
}),
|
}),
|
||||||
|
|
1422
package-lock.json
generated
1422
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -37,8 +37,8 @@
|
||||||
"mapbox-gl-inspect": "^1.2.6",
|
"mapbox-gl-inspect": "^1.2.6",
|
||||||
"maputnik-design": "github:maputnik/design",
|
"maputnik-design": "github:maputnik/design",
|
||||||
"mousetrap": "^1.6.1",
|
"mousetrap": "^1.6.1",
|
||||||
"ol-mapbox-style": "^1.0.1",
|
"ol-mapbox-style": "^2.10.1",
|
||||||
"openlayers": "^4.4.2",
|
"ol": "^4.6.4",
|
||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.0",
|
||||||
"react": "16.0.0",
|
"react": "16.0.0",
|
||||||
"react-addons-pure-render-mixin": "^15.6.2",
|
"react-addons-pure-render-mixin": "^15.6.2",
|
||||||
|
@ -97,6 +97,7 @@
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-flow": "^6.23.0",
|
"babel-preset-flow": "^6.23.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"babel-runtime": "^6.26.0",
|
"babel-runtime": "^6.26.0",
|
||||||
|
@ -124,6 +125,7 @@
|
||||||
"stylelint": "^7.13.0",
|
"stylelint": "^7.13.0",
|
||||||
"stylelint-config-standard": "^15.0.1",
|
"stylelint-config-standard": "^15.0.1",
|
||||||
"transform-loader": "^0.2.4",
|
"transform-loader": "^0.2.4",
|
||||||
|
"uglifyjs-webpack-plugin": "^1.1.8",
|
||||||
"wdio-mocha-framework": "^0.5.11",
|
"wdio-mocha-framework": "^0.5.11",
|
||||||
"wdio-phantomjs-service": "^0.2.2",
|
"wdio-phantomjs-service": "^0.2.2",
|
||||||
"wdio-spec-reporter": "^0.1.2",
|
"wdio-spec-reporter": "^0.1.2",
|
||||||
|
|
|
@ -3,66 +3,8 @@ import PropTypes from 'prop-types'
|
||||||
import style from '../../libs/style.js'
|
import style from '../../libs/style.js'
|
||||||
import isEqual from 'lodash.isequal'
|
import isEqual from 'lodash.isequal'
|
||||||
import { loadJSON } from '../../libs/urlopen'
|
import { loadJSON } from '../../libs/urlopen'
|
||||||
import 'openlayers/dist/ol.css'
|
import 'ol/ol.css'
|
||||||
|
|
||||||
function suitableVectorSource(mapStyle) {
|
|
||||||
const sources = Object.keys(mapStyle.sources)
|
|
||||||
.map(sourceId => {
|
|
||||||
return {
|
|
||||||
id: sourceId,
|
|
||||||
source: mapStyle.sources[sourceId]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.filter(({source}) => (source.type === 'vector' || source.type === 'geojson'))
|
|
||||||
return sources[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
function toVectorLayer(source, tilegrid, cb) {
|
|
||||||
function newMVTLayer(tileUrl) {
|
|
||||||
const ol = require('openlayers')
|
|
||||||
return new ol.layer.VectorTile({
|
|
||||||
source: new ol.source.VectorTile({
|
|
||||||
format: new ol.format.MVT(),
|
|
||||||
tileGrid: tilegrid,
|
|
||||||
tilePixelRatio: 8,
|
|
||||||
url: tileUrl
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function newGeoJSONLayer(sourceUrl) {
|
|
||||||
const ol = require('openlayers')
|
|
||||||
return new ol.layer.Vector({
|
|
||||||
source: new ol.source.Vector({
|
|
||||||
format: new ol.format.GeoJSON(),
|
|
||||||
url: sourceUrl
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (source.type === 'vector') {
|
|
||||||
if(!source.tiles) {
|
|
||||||
sourceFromTileJSON(source.url, tileSource => {
|
|
||||||
cb(newMVTLayer(tileSource.tiles[0]))
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
cb(newMVTLayer(source.tiles[0]))
|
|
||||||
}
|
|
||||||
} else if (source.type === 'geojson') {
|
|
||||||
cb(newGeoJSONLayer(source.data))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sourceFromTileJSON(url, cb) {
|
|
||||||
loadJSON(url, null, tilejson => {
|
|
||||||
if(!tilejson) return
|
|
||||||
cb({
|
|
||||||
type: 'vector',
|
|
||||||
tiles: tilejson.tiles,
|
|
||||||
minzoom: tilejson.minzoom,
|
|
||||||
maxzoom: tilejson.maxzoom,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
class OpenLayers3Map extends React.Component {
|
class OpenLayers3Map extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -79,49 +21,17 @@ class OpenLayers3Map extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.tilegrid = null
|
|
||||||
this.resolutions = null
|
|
||||||
this.layer = null
|
|
||||||
this.map = null
|
this.map = null
|
||||||
}
|
}
|
||||||
|
|
||||||
updateStyle(newMapStyle) {
|
updateStyle(newMapStyle) {
|
||||||
const oldSource = suitableVectorSource(this.props.mapStyle)
|
const olms = require('ol-mapbox-style');
|
||||||
const newSource = suitableVectorSource(newMapStyle)
|
const styleFunc = olms.apply(this.map, newMapStyle)
|
||||||
const resolutions = this.resolutions
|
|
||||||
|
|
||||||
function setStyleFunc(map, layer) {
|
|
||||||
const olms = require('ol-mapbox-style')
|
|
||||||
const styleFunc = olms.getStyleFunction(newMapStyle, newSource.id, resolutions)
|
|
||||||
layer.setStyle(styleFunc)
|
|
||||||
//NOTE: We need to mark the source as changed in order
|
|
||||||
//to trigger a rerender
|
|
||||||
layer.getSource().changed()
|
|
||||||
map.render()
|
|
||||||
}
|
|
||||||
|
|
||||||
if(newSource) {
|
|
||||||
if(this.layer && !isEqual(oldSource, newSource)) {
|
|
||||||
this.map.removeLayer(this.layer)
|
|
||||||
this.layer = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!this.layer) {
|
|
||||||
var self = this
|
|
||||||
toVectorLayer(newSource.source, this.tilegrid, vectorLayer => {
|
|
||||||
self.layer = vectorLayer
|
|
||||||
self.map.addLayer(self.layer)
|
|
||||||
setStyleFunc(self.map, self.layer)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
setStyleFunc(this.map, this.layer)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
require.ensure(["openlayers", "ol-mapbox-style"], () => {
|
require.ensure(["ol", "ol-mapbox-style"], () => {
|
||||||
if(!this.map || !this.resolutions) return
|
if(!this.map) return
|
||||||
this.updateStyle(nextProps.mapStyle)
|
this.updateStyle(nextProps.mapStyle)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -129,24 +39,22 @@ class OpenLayers3Map extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
//Load OpenLayers dynamically once we need it
|
//Load OpenLayers dynamically once we need it
|
||||||
//TODO: Make this more convenient
|
//TODO: Make this more convenient
|
||||||
require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
|
require.ensure(["ol", "ol/map", "ol/view", "ol/control/zoom", "ol-mapbox-style"], ()=> {
|
||||||
console.log('Loaded OpenLayers3 renderer')
|
console.log('Loaded OpenLayers3 renderer')
|
||||||
|
|
||||||
const ol = require('openlayers')
|
const olMap = require('ol/map').default
|
||||||
const olms = require('ol-mapbox-style')
|
const olView = require('ol/view').default
|
||||||
|
const olZoom = require('ol/control/zoom').default
|
||||||
|
|
||||||
this.tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
|
const map = new olMap({
|
||||||
this.resolutions = this.tilegrid.getResolutions()
|
|
||||||
|
|
||||||
const map = new ol.Map({
|
|
||||||
target: this.container,
|
target: this.container,
|
||||||
layers: [],
|
layers: [],
|
||||||
view: new ol.View({
|
view: new olView({
|
||||||
zoom: 2,
|
zoom: 2,
|
||||||
center: [52.5, -78.4]
|
center: [52.5, -78.4]
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
map.addControl(new ol.control.Zoom())
|
map.addControl(new olZoom())
|
||||||
this.map = map
|
this.map = map
|
||||||
this.updateStyle(this.props.mapStyle)
|
this.updateStyle(this.props.mapStyle)
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue