mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-13 02:16:19 +01:00
chore(lib): update mapbox-gl 1.10.1 -> 2.8.2
This commit is contained in:
parent
c5bed70e04
commit
a19e0ed1ac
9 changed files with 93 additions and 178 deletions
|
@ -47,9 +47,9 @@ libFiles:
|
|||
mermaidJS: mermaid@9.0.1/dist/mermaid.min.js
|
||||
# echarts@5.3.2 https://echarts.apache.org/
|
||||
echartsJS: echarts@5.3.2/dist/echarts.min.js
|
||||
# mapbox-gl@1.10.1 https://docs.mapbox.com/mapbox-gl-js
|
||||
mapboxGLCSS: mapbox-gl@1.10.1/dist/mapbox-gl.min.css
|
||||
mapboxGLJS: mapbox-gl@1.10.1/dist/mapbox-gl.min.js
|
||||
# mapbox-gl@2.8.2 https://docs.mapbox.com/mapbox-gl-js
|
||||
mapboxGLCSS: mapbox-gl@2.8.2/dist/mapbox-gl.min.css
|
||||
mapboxGLJS: mapbox-gl@2.8.2/dist/mapbox-gl.min.js
|
||||
# aplayer@1.10.1 https://github.com/MoePlayer/APlayer
|
||||
aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
|
||||
aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
|
||||
|
|
|
@ -19,7 +19,7 @@ typeit@7.0.4 https://github.com/alexmacarthur/typeit
|
|||
katex@0.15.3 https://katex.org/
|
||||
mermaid@9.0.1 https://github.com/mermaid-js/mermaid
|
||||
echarts@5.3.2 https://echarts.apache.org/
|
||||
mapbox-gl@1.10.1 https://github.com/mapbox/mapbox-gl-js
|
||||
mapbox-gl@2.8.2 https://github.com/mapbox/mapbox-gl-js
|
||||
aplayer@1.10.1 https://github.com/MoePlayer/APlayer
|
||||
meting@2.0.1 https://github.com/metowolf/MetingJS
|
||||
gitalk@1.7.2 https://github.com/gitalk/gitalk
|
||||
|
|
|
@ -1,17 +1,32 @@
|
|||
/**
|
||||
* Create a new [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) that
|
||||
* modifies the layers of the map style to use the 'text-field' that matches the browser language.
|
||||
* modifies the layers of the map style to use the `text-field` that matches the browser language.
|
||||
* As of Mapbox GL Language v1.0.0, this plugin no longer supports token values (e.g. `{name}`). v1.0+ expects the `text-field`
|
||||
* property of a style to use an [expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/) of the form `['get', 'name_en']` or `['get', 'name']`; these expressions can be nested. Note that `get` expressions used as inputs to other expressions may not be handled by this plugin. For example:
|
||||
* ```
|
||||
* ["match",
|
||||
* ["get", "name"],
|
||||
* "California",
|
||||
* "Golden State",
|
||||
* ["coalesce",
|
||||
* ["get", "name_en"],
|
||||
* ["get", "name"]
|
||||
* ]
|
||||
* ]
|
||||
* ```
|
||||
* Only styles based on [Mapbox v8 styles](https://docs.mapbox.com/help/troubleshooting/streets-v8-migration-guide/) are supported.
|
||||
*
|
||||
* @constructor
|
||||
* @param {object} options - Options to configure the plugin.
|
||||
* @param {string[]} [options.supportedLanguages] - List of supported languages
|
||||
* @param {Function} [options.languageTransform] - Custom style transformation to apply
|
||||
* @param {RegExp} [options.languageField=/^\{name/] - RegExp to match if a text-field is a language field
|
||||
* @param {RegExp} [options.languageField=/^name_/] - RegExp to match if a text-field is a language field
|
||||
* @param {Function} [options.getLanguageField] - Given a language choose the field in the vector tiles
|
||||
* @param {string} [options.languageSource] - Name of the source that contains the different languages.
|
||||
* @param {string} [options.defaultLanguage] - Name of the default language to initialize style after loading.
|
||||
* @param {string[]} [options.excludedLayerIds] - Name of the layers that should be excluded from translation.
|
||||
*/
|
||||
function MapboxLanguage(options) {
|
||||
function MapboxLanguage(options) {
|
||||
options = Object.assign({}, options);
|
||||
if (!(this instanceof MapboxLanguage)) {
|
||||
throw new Error('MapboxLanguage needs to be called with the new keyword');
|
||||
|
@ -21,121 +36,53 @@ function MapboxLanguage(options) {
|
|||
this._initialStyleUpdate = this._initialStyleUpdate.bind(this);
|
||||
|
||||
this._defaultLanguage = options.defaultLanguage;
|
||||
this._isLanguageField = options.languageField || /^\{name/;
|
||||
this._isLanguageField = options.languageField || /^name_/;
|
||||
this._getLanguageField = options.getLanguageField || function nameField(language) {
|
||||
return language === 'mul' ? '{name}' : '{name_' + language + '}';
|
||||
return language === 'mul' ? 'name' : `name_${language}`;
|
||||
};
|
||||
this._languageSource = options.languageSource || null;
|
||||
this._languageTransform = options.languageTransform || function (style, language) {
|
||||
if (language === 'ar') {
|
||||
return noSpacing(style);
|
||||
} else {
|
||||
return standardSpacing(style);
|
||||
}
|
||||
};
|
||||
this._languageTransform = options.languageTransform;
|
||||
this._excludedLayerIds = options.excludedLayerIds || [];
|
||||
this.supportedLanguages = options.supportedLanguages || ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'mul', 'pt', 'ru', 'zh'];
|
||||
this.supportedLanguages = options.supportedLanguages || ['ar', 'de', 'en', 'es', 'fr', 'it', 'ja', 'ko', 'mul', 'pt', 'ru', 'vi', 'zh-Hans', 'zh-Hant'];
|
||||
}
|
||||
|
||||
function standardSpacing(style) {
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
if (!(layer.layout || {})['text-field']) return layer;
|
||||
var spacing = 0;
|
||||
if (layer['source-layer'] === 'state_label') {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (layer['source-layer'] === 'marine_label') {
|
||||
if (/-lg/.test(layer.id)) {
|
||||
spacing = 0.25;
|
||||
}
|
||||
if (/-md/.test(layer.id)) {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (/-sm/.test(layer.id)) {
|
||||
spacing = 0.1;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'place_label') {
|
||||
if (/-suburb/.test(layer.id)) {
|
||||
spacing = 0.15;
|
||||
}
|
||||
if (/-neighbour/.test(layer.id)) {
|
||||
spacing = 0.1;
|
||||
}
|
||||
if (/-islet/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'airport_label') {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (layer['source-layer'] === 'rail_station_label') {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (layer['source-layer'] === 'poi_label') {
|
||||
if (/-scalerank/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
}
|
||||
if (layer['source-layer'] === 'road_label') {
|
||||
if (/-label-/.test(layer.id)) {
|
||||
spacing = 0.01;
|
||||
}
|
||||
if (/-shields/.test(layer.id)) {
|
||||
spacing = 0.05;
|
||||
}
|
||||
}
|
||||
return Object.assign({}, layer, {
|
||||
layout: Object.assign({}, layer.layout, {
|
||||
'text-letter-spacing': spacing
|
||||
})
|
||||
});
|
||||
});
|
||||
const isTokenField = /^\{name/;
|
||||
function isFlatExpressionField(isLangField, property) {
|
||||
const isGetExpression = Array.isArray(property) && property[0] === 'get';
|
||||
if (isGetExpression && isTokenField.test(property[1])) {
|
||||
console.warn('This plugin no longer supports the use of token syntax (e.g. {name}). Please use a get expression. See https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/ for more details.');
|
||||
}
|
||||
|
||||
return Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
return isGetExpression && isLangField.test(property[1]);
|
||||
}
|
||||
|
||||
function noSpacing(style) {
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
if (!(layer.layout || {})['text-field']) return layer;
|
||||
var spacing = 0;
|
||||
return Object.assign({}, layer, {
|
||||
layout: Object.assign({}, layer.layout, {
|
||||
'text-letter-spacing': spacing
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
return Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
}
|
||||
|
||||
function isNameStringField(isLangField, property) {
|
||||
return typeof property === 'string' && isLangField.test(property);
|
||||
}
|
||||
|
||||
function isNameFunctionField(isLangField, property) {
|
||||
return property.stops && property.stops.filter(function (stop) {
|
||||
return isLangField.test(stop[1]);
|
||||
}).length > 0;
|
||||
function adaptNestedExpressionField(isLangField, property, languageFieldName) {
|
||||
if (Array.isArray(property)) {
|
||||
for (let i = 1; i < property.length; i++) {
|
||||
if (Array.isArray(property[i])) {
|
||||
if (isFlatExpressionField(isLangField, property[i])) {
|
||||
property[i][1] = languageFieldName;
|
||||
}
|
||||
adaptNestedExpressionField(isLangField, property[i], languageFieldName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function adaptPropertyLanguage(isLangField, property, languageFieldName) {
|
||||
if (isNameStringField(isLangField, property)) return languageFieldName;
|
||||
if (isNameFunctionField(isLangField, property)) {
|
||||
var newStops = property.stops.map(function (stop) {
|
||||
if (isLangField.test(stop[1])) {
|
||||
return [stop[0], languageFieldName];
|
||||
}
|
||||
return stop;
|
||||
});
|
||||
return Object.assign({}, property, {
|
||||
stops: newStops
|
||||
});
|
||||
if (isFlatExpressionField(isLangField, property)) {
|
||||
property[1] = languageFieldName;
|
||||
}
|
||||
|
||||
adaptNestedExpressionField(isLangField, property, languageFieldName);
|
||||
|
||||
// handle special case of bare ['get', 'name'] expression by wrapping it in a coalesce statement
|
||||
if (property[0] === 'get' && property[1] === 'name') {
|
||||
const defaultProp = property.slice();
|
||||
const adaptedProp = ['get', languageFieldName];
|
||||
property = ['coalesce', adaptedProp, defaultProp];
|
||||
}
|
||||
|
||||
return property;
|
||||
}
|
||||
|
||||
|
@ -151,10 +98,13 @@ function changeLayerTextProperty(isLangField, layer, languageFieldName, excluded
|
|||
}
|
||||
|
||||
function findStreetsSource(style) {
|
||||
var sources = Object.keys(style.sources).filter(function (sourceName) {
|
||||
var source = style.sources[sourceName];
|
||||
return /mapbox-streets-v\d/.test(source.url);
|
||||
const sources = Object.keys(style.sources).filter((sourceName) => {
|
||||
const url = style.sources[sourceName].url;
|
||||
// the source URL can reference the source version or the style version
|
||||
// this check and the error forces users to migrate to styles using source version 8
|
||||
return url && url.indexOf('mapbox.mapbox-streets-v8') > -1 || /mapbox-streets-v[1-9][1-9]/.test(url);
|
||||
});
|
||||
if (!sources.length) throw new Error('If using MapboxLanguage with a Mapbox style, the style must be based on vector tile version 8, e.g. "streets-v11"');
|
||||
return sources[0];
|
||||
}
|
||||
|
||||
|
@ -165,38 +115,36 @@ function findStreetsSource(style) {
|
|||
* @returns {object} the modified style
|
||||
*/
|
||||
MapboxLanguage.prototype.setLanguage = function (style, language) {
|
||||
if (this.supportedLanguages.indexOf(language) < 0) throw new Error('Language ' + language + ' is not supported');
|
||||
var streetsSource = this._languageSource || findStreetsSource(style);
|
||||
if (this.supportedLanguages.indexOf(language) < 0) throw new Error(`Language ${ language } is not supported`);
|
||||
const streetsSource = this._languageSource || findStreetsSource(style);
|
||||
if (!streetsSource) return style;
|
||||
|
||||
var field = this._getLanguageField(language);
|
||||
var isLangField = this._isLanguageField;
|
||||
var excludedLayerIds = this._excludedLayerIds;
|
||||
var changedLayers = style.layers.map(function (layer) {
|
||||
const field = this._getLanguageField(language);
|
||||
const isLangField = this._isLanguageField;
|
||||
const excludedLayerIds = this._excludedLayerIds;
|
||||
const changedLayers = style.layers.map((layer) => {
|
||||
if (layer.source === streetsSource) return changeLayerTextProperty(isLangField, layer, field, excludedLayerIds);
|
||||
return layer;
|
||||
});
|
||||
|
||||
var languageStyle = Object.assign({}, style, {
|
||||
const languageStyle = Object.assign({}, style, {
|
||||
layers: changedLayers
|
||||
});
|
||||
|
||||
return this._languageTransform(languageStyle, language);
|
||||
return this._languageTransform ? this._languageTransform(languageStyle, language) : languageStyle;
|
||||
};
|
||||
|
||||
MapboxLanguage.prototype._initialStyleUpdate = function () {
|
||||
var style = this._map.getStyle();
|
||||
var language = this._defaultLanguage || browserLanguage(this.supportedLanguages);
|
||||
const style = this._map.getStyle();
|
||||
const language = this._defaultLanguage || browserLanguage(this.supportedLanguages);
|
||||
|
||||
// We only update the style once
|
||||
this._map.off('styledata', this._initialStyleUpdate);
|
||||
this._map.setStyle(this.setLanguage(style, language));
|
||||
};
|
||||
|
||||
function browserLanguage(supportedLanguages) {
|
||||
var language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
|
||||
var parts = language.split('-');
|
||||
var languageCode = language;
|
||||
const language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
|
||||
const parts = language && language.split('-');
|
||||
let languageCode = language;
|
||||
if (parts.length > 1) {
|
||||
languageCode = parts[0];
|
||||
}
|
||||
|
@ -208,53 +156,18 @@ function browserLanguage(supportedLanguages) {
|
|||
|
||||
MapboxLanguage.prototype.onAdd = function (map) {
|
||||
this._map = map;
|
||||
this._map.on('styledata', this._initialStyleUpdate);
|
||||
this._map.on('style.load', this._initialStyleUpdate);
|
||||
this._container = document.createElement('div');
|
||||
return this._container;
|
||||
};
|
||||
|
||||
MapboxLanguage.prototype.onRemove = function () {
|
||||
this._map.off('styledata', this._initialStyleUpdate);
|
||||
this._map.off('style.load', this._initialStyleUpdate);
|
||||
this._map = undefined;
|
||||
};
|
||||
|
||||
function ie11Polyfill() {
|
||||
if (typeof Object.assign != 'function') {
|
||||
// Must be writable: true, enumerable: false, configurable: true
|
||||
Object.defineProperty(Object, 'assign', {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
value: function assign(target, varArgs) { // .length of function is 2
|
||||
// eslint-disable-next-line strict
|
||||
'use strict';
|
||||
if (target === null) { // TypeError if undefined or null
|
||||
throw new TypeError('Cannot convert undefined or null to object');
|
||||
}
|
||||
|
||||
var to = Object(target);
|
||||
|
||||
for (var index = 1; index < arguments.length; index++) {
|
||||
var nextSource = arguments[index];
|
||||
|
||||
if (nextSource !== null) { // Skip over if undefined or null
|
||||
for (var nextKey in nextSource) {
|
||||
// Avoid bugs when hasOwnProperty is shadowed
|
||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||
to[nextKey] = nextSource[nextKey];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return to;
|
||||
},
|
||||
writable: true,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = MapboxLanguage;
|
||||
} else {
|
||||
ie11Polyfill();
|
||||
window.MapboxLanguage = MapboxLanguage;
|
||||
}
|
||||
|
|
4
assets/lib/mapbox-gl/mapbox-gl.min.css
vendored
4
assets/lib/mapbox-gl/mapbox-gl.min.css
vendored
File diff suppressed because one or more lines are too long
8
assets/lib/mapbox-gl/mapbox-gl.min.js
vendored
8
assets/lib/mapbox-gl/mapbox-gl.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -448,9 +448,9 @@ Please open the code block below to view the complete sample configuration :(far
|
|||
# access token of Mapbox GL JS
|
||||
accessToken = ""
|
||||
# style for the light theme
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
|
||||
# style for the dark theme
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
|
||||
|
|
|
@ -455,9 +455,9 @@ hugo
|
|||
# Mapbox GL JS 的 access token
|
||||
accessToken = ""
|
||||
# 浅色主题的地图样式
|
||||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||||
lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
|
||||
# 深色主题的地图样式
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||||
darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
|
||||
navigation = true
|
||||
# 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}
|
||||
|
|
|
@ -21,9 +21,6 @@ lightgallery: true
|
|||
|
||||
math:
|
||||
enable: true
|
||||
mapbox:
|
||||
lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
|
||||
darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
|
||||
---
|
||||
|
||||
**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
|
||||
|
|
|
@ -19,6 +19,9 @@ hiddenFromHomePage: true
|
|||
|
||||
toc:
|
||||
enable: false
|
||||
mapbox:
|
||||
lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
|
||||
darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
|
||||
---
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
@ -94,9 +97,9 @@ toc:
|
|||
一个带有自定义样式的 `mapbox` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
|
||||
或者
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
|
Loading…
Reference in a new issue