export default class mapBoxVectorLayer {
//添加circle
static addGeojsonCircle(layerId, geojson) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'circle',
source: layerId,
paint: {
'circle-color': ['get', 'fillcolor'],
'circle-radius': 10,
},
});
}
}
//添加circle有标注
static addGeojsonCircleWithLabel(layerId, geojson, minzoom) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addSource(layerId + '_label', {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'circle',
source: layerId,
paint: {
'circle-color': ['get', 'fillcolor'],
'circle-radius': 10,
},
});
newfiberMapbox.map.addLayer({
id: layerId + '_label',
type: 'symbol',
minzoom: minzoom ? minzoom : 0,
source: layerId + '_label',
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-halo-color': 'rgba(36, 94, 122, 1)',
'text-halo-width': 2,
},
layout: {
'text-field': '{name}',
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 3,
'text-anchor': 'bottom',
'text-max-width': 50,
},
});
}
}
//添加geojson label
static addGeojsonLabel(layerId, geojson) {
if (!newfiberMapbox.map.getLayer(layerId)) {
// Add a data source containing one point feature.
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'symbol',
source: layerId,
paint: {
'text-color': ['get', 'fillcolor'],
'text-halo-color': 'rgba(250, 247, 227, 1)',
'text-halo-width': 1,
},
layout: {
'text-allow-overlap': true,
'text-field': '{name}',
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 1,
'text-max-width': 50,
//'text-offset': [0, 3],
},
});
}
}
//添加geojson Symbol
static addGeojsonSymbol(layerId, geojson, icon) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.loadImage(icon, (error, image) => {
if (error) throw error;
// Add the image to the map style.
newfiberMapbox.map.addImage(layerId, image);
// Add a data source containing one point feature.
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'symbol',
source: layerId,
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-halo-color': 'rgba(14, 139, 90, 1)',
'text-halo-width': 2,
},
layout: {
'icon-image': layerId,
'text-allow-overlap': true,
'icon-allow-overlap': true,
'icon-anchor': 'center',
'icon-size': 0.8,
'text-field': '{name}',
'text-font': ['KlokanTech Noto Sans Regular'],
'icon-rotate': ['get', 'bearing'],
'text-size': 16,
'text-line-height': 3,
'text-max-width': 50,
'text-offset': [0, -3],
},
});
});
}
}
//添加geojson线
static addGeojsonLine(layerId, geojson, lineWidth, lineOpacity, lineBlur) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'line',
source: layerId,
paint: {
'line-color': ['get', 'color'],
'line-width': lineWidth ? lineWidth : 3,
'line-opacity': lineOpacity ? lineOpacity : 1,
'line-blur': lineBlur ? lineBlur : 0,
},
});
}
}
//添加有标注的geojson线
static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
let labelGeojson = this.getGeojsonCenterPoint(geojson);
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addSource(layerId + '_label', {
type: 'geojson',
data: labelGeojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'line',
source: layerId,
paint: {
'line-color': ['get', 'fillcolor'],
'line-width': lineWidth ? lineWidth : 3,
},
});
newfiberMapbox.map.addLayer({
id: layerId + '_label',
type: 'symbol',
minzoom: minzoom ? minzoom : 0,
source: layerId + '_label',
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-halo-color': 'rgba(36, 94, 122, 1)',
'text-halo-width': 2,
},
layout: {
'text-field': '{name}',
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 3,
'text-anchor': 'bottom',
'text-max-width': 50,
},
});
}
}
//添加geojson面
static addGeojsonPolygon(layerId, geojson) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'fill',
source: layerId,
paint: {
'fill-color': ['get', 'fillcolor'] || 'rgba(154,104,171,0.8)',
},
});
}
}
//添加有标注的geojson面
static addGeojsonPolygonWithLabel(layerId, geojson, minzoom, text_max_width) {
let labelGeojson = this.getGeojsonCenterPoint(geojson);
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addSource(layerId + '_label', {
type: 'geojson',
data: labelGeojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'fill',
source: layerId,
paint: {
'fill-color': ['get', 'fillcolor'],
},
});
newfiberMapbox.map.addLayer({
id: layerId + '_label',
type: 'symbol',
source: layerId + '_label',
minzoom: minzoom ? minzoom : 0,
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-halo-color': 'rgba(36, 94, 122, 1)',
'text-halo-width': 2,
},
layout: {
'text-field': '{name}',
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 1,
'text-max-width': !!text_max_width ? text_max_width : 50,
},
});
}
}
//获取geojson中心点
static getGeojsonCenterPoint(geojson) {
let features = [];
geojson.features.forEach(element => {
let feature = turf.center(element, element);
features.push(feature);
});
return {
type: 'FeatureCollection',
features: features,
};
}
//添加image图层
static addImageToMap(layerId, coordinates, imageUrl) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'image',
url: imageUrl,
coordinates: coordinates,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'raster',
source: layerId,
paint: {},
});
}
}
//添加geoserver图层
static addWMSLayer(layerName) {
if (!newfiberMapbox.map.getLayer(layerName)) {
newfiberMapbox.map.addSource(layerName, {
type: 'raster',
// use the tiles option to specify a WMS tile source URL
// https://docs.mapbox.comhttps://docs.mapbox.com/style-spec/reference/sources/
tiles: [
'/geoserver/demo/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&' +
`layers=${layerName}`,
],
tileSize: 256,
});
newfiberMapbox.map.addLayer({
id: layerName,
type: 'raster',
source: layerName,
paint: {},
});
}
}
//添加沿线标注
static addLabelAlongLine(layerId, geojson) {
if (!newfiberMapbox.map.getLayer(layerId)) {
newfiberMapbox.map.addSource(layerId, {
type: 'geojson',
data: geojson,
});
newfiberMapbox.map.addLayer({
id: layerId,
type: 'symbol',
source: layerId,
layout: {
'text-field': ['get', 'name'],
'symbol-placement': 'line-center',
'text-offset': [0, -0.5],
//'text-anchor': 'top',
'text-size': 20,
'text-allow-overlap': true,
'text-letter-spacing': 1.1,
},
paint: {
'text-color': ['get', 'fillcolor'],
'text-halo-color': 'rgba(250, 247, 227, 1)',
'text-halo-width': 1,
},
});
}
}
//添加轨迹动态线
static addDynamicRoute = (layerId, geojson, icon) => {
window.routeTimer = null;
this.addGeojsonLine(layerId, geojson, 10);
let symbolGeojson = turf.featureCollection([
turf.point(geojson.features[0].geometry.coordinates[0], {
bearing: turf.bearing(
turf.point(geojson.features[0].geometry.coordinates[0]),
turf.point(geojson.features[0].geometry.coordinates[1])
),
}),
]);
this.addGeojsonSymbol(layerId + '_Symbol', symbolGeojson, icon);
const lineDistance = turf.length(geojson.features[0]);
const arc = [];
const steps = 100;
for (let i = 0; i < lineDistance; i += lineDistance / steps) {
const segment = turf.along(geojson.features[0], i);
arc.push(segment.geometry.coordinates);
}
geojson.features[0].geometry.coordinates = arc;
let counter = 0;
setTimeout(() => {
window.routeTimer = setInterval(() => {
const start = geojson.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];
const end = geojson.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];
if (!start || !end) {
return;
}
symbolGeojson.features[0].geometry.coordinates = geojson.features[0].geometry.coordinates[counter];
symbolGeojson.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));
newfiberMapbox.map.setLayoutProperty(layerId + '_Symbol', 'icon-rotation-alignment', 'map');
newfiberMapbox.map.getSource(layerId + '_Symbol').setData(symbolGeojson);
counter = counter + 1;
if (counter > steps) {
clearInterval(window.routeTimer);
}
}, 500);
}, 1000);
// if (!start || !end || !start_1 || !end_1) {
// return;
// }
// symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
// symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
};
//移除图层
static removeByIds(layernameList) {
layernameList.forEach(layerName => {
if (newfiberMapbox.map.getLayer(layerName)) {
newfiberMapbox.map.removeLayer(layerName);
newfiberMapbox.map.removeSource(layerName);
}
});
}
}
