Skip to content

Commit

Permalink
学习mapbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyChenAn
andyChenAn committed May 20, 2022
1 parent dcfd2ed commit 9fdf584
Show file tree
Hide file tree
Showing 8 changed files with 17,637 additions and 85 deletions.
17,479 changes: 17,464 additions & 15 deletions package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions src/M8/icons/circle.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {

}
3 changes: 0 additions & 3 deletions src/M8/icons/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
export const circle = {

}
26 changes: 26 additions & 0 deletions src/M8/layers/baseLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,31 @@ import AttributesService from '../services/attributes';
export default class BaseLayer {
constructor () {
this.attributesService = new AttributesService();
this.geojson = {};
}
source (data , options = {}) {
if (data.type === 'FeatureCollection') {
this.geojson = data;
return this;
}
const geojson = {
type : 'FeatureCollection',
features : []
};
data.map(item => {
geojson.features.push({
type : 'Feature',
geometry : {
type : 'Point',
coordinates : options.parser ? [item[options.parser.x] , item[options.parser.y]] : [item.longitude , item.latitude]
},
properties : {
...item
}
})
})
this.geojson = geojson;
return this;
}
/**
* 设置图层的shape类型
Expand Down Expand Up @@ -45,4 +70,5 @@ export default class BaseLayer {
attributeValue : value
})
}

}
21 changes: 0 additions & 21 deletions src/M8/layers/point/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,8 @@ import BaseLayer from "../baseLayer";
export default class PointLayer extends BaseLayer {
constructor (options = {}) {
super();
this.geojson = {};
for (let key in options) {
this[key] = options[key];
}
}
source (data , options = {}) {
const geojson = {
type : 'FeatureCollection',
features : []
};
data.map(item => {
geojson.features.push({
type : 'Feature',
geometry : {
type : 'Point',
coordinates : options.parser ? [item[options.parser.x] , item[options.parser.y]] : [item.longitude , item.latitude]
},
properties : {
...item
}
})
})
this.geojson = geojson;
return this;
}
}
89 changes: 65 additions & 24 deletions src/M8/map/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,15 +113,30 @@ export default class Map {
this.iconService.updateImage(name , image);
}
addLayer (layer) {
this.layerService.addLayer(layer);
this.render(layer);
if (!this.layerService.hasLayer(layer)) {
this.layerService.addLayer(layer);
this.render(layer);
}
}
removeLayer (layer) {
this.layerService.removeLayer(layer);
}
removeAllLayer () {
this.layerService.removeAllLayer();
}
getLayerByName (layerName) {
return this.layerService.getLayerByName(layerName)
}
formatTextOffset (offset , size) {
return [(offset[0] / size) * 1.5 , (offset[1] / size) * 1.5];
}
/**
* 初始化图层形状类型
* @param {object} attribute 属性对象
* @param {object} layer 图层对象
*/
initShapeType (attribute , layer) {
layer.shapeInited = true;
const res = {};
if (!attribute.attributeValue) {
// 如果不存在，那么表示shape方法中只存在一个参数，这个参数表示的就是图层的形状类型
Expand All @@ -137,11 +152,11 @@ export default class Map {
} else {
// 如果attributeValue是一个函数
layer.geojson.features.map(item => {
item.properties['_' + attribute.attributeField] = attribute.attributeValue(item.properties[attribute.attributeField]);
item.properties['_' + attribute.attributeName + '_' + attribute.attributeField] = attribute.attributeValue(item.properties[attribute.attributeField]);
return item;
});
res.layout = {
'icon-image' : ['get' , '_' + attribute.attributeField]
'icon-image' : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
}
}
Expand All @@ -153,35 +168,39 @@ export default class Map {
* @param {object} layer 图层对象
*/
initColor (attribute , layer , layerOptions) {
layer.colorInited = true;
const res = {};
// 如果形状类型还没有初始化，那么就先初始化形状类型
if (!layerOptions.type) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0]);
if (!layer.shapeInited) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0] , layer);
}
if (!attribute.attributeValue) {
// 如果attributeValue不存在
res.paint = {
[layerOptions.type === 'symbol' && layerOptions.layout['text-field'] ? 'text-color' : layerOptions.type === 'symbol' && !layerOptions.layout['text-field'] ? 'icon-color' : layerOptions.type + '-color'] : attribute.attributeField
}
layer.color = attribute.attributeField;
} else {
// 如果attributeValue是一个函数
if (typeof attribute.attributeValue === 'function') {
layer.geojson.features.map(item => {
item.properties['_' + attribute.attributeField] = attribute.attributeValue(item.properties[attribute.attributeField]);
item.properties['_' + attribute.attributeName + '_' + attribute.attributeField] = attribute.attributeValue(item.properties[attribute.attributeField]);
return item;
})
res.paint = {
[layerOptions.type === 'symbol' && layerOptions.layout['text-field'] ? 'text-color' : layerOptions.type === 'symbol' && !layerOptions.layout['text-field'] ? 'icon-color' : layerOptions.type + '-color'] : ['get' , '_' + attribute.attributeField]
[layerOptions.type === 'symbol' && layerOptions.layout['text-field'] ? 'text-color' : layerOptions.type === 'symbol' && !layerOptions.layout['text-field'] ? 'icon-color' : layerOptions.type + '-color'] : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
layer.color = ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField];
}
};
return res;
return extend(true , layerOptions , res);
}
initSize (attribute , layer , layerOptions) {
layer.sizeInited = true;
const res = {};
// 如果形状类型还没有初始化，那么就先初始化形状类型
if (!layerOptions.type) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0]);
if (!layer.shapeInited) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0] , layer);
}
if (!attribute.attributeValue) {
if (layerOptions.type === 'symbol' && layerOptions.layout['text-field']) {
Expand All @@ -203,56 +222,70 @@ export default class Map {
'circle-radius' : attribute.attributeField
}
}
layer.size = attribute.attributeField;
} else {
// 如果attributeValue是一个函数
if (typeof attribute.attributeValue === 'function') {
layer.geojson.features.map(item => {
item.properties['_' + attribute.attributeField] = attribute.attributeValue(item[attribute.attributeField]);
item.properties['_' + attribute.attributeName + '_' + attribute.attributeField] = attribute.attributeValue(item.properties[attribute.attributeField]);
return item;
});
if (layerOptions.type === 'symbol' && layerOptions.layout['text-field']) {
// 类型是text（文本）
res.layout = {
'text-size' : ['get' , '_' + attribute.attributeField]
'text-size' : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
} else if (layerOptions.type === 'symbol' && !layerOptions.layout['text-field']) {
// 类型是图标
res.layout = {
'icon-size' : ['get' , '_' + attribute.attributeField]
'icon-size' : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
} else if (layerOptions.type === 'line') {
res.paint = {
'line-width' : ['get' , '_' + attribute.attributeField]
'line-width' : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
} else if (layerOptions.type === 'circle') {
res.paint = {
'circle-radius' : ['get' , '_' + attribute.attributeField]
'circle-radius' : ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField]
}
}
layer.size = ['get' , '_' + attribute.attributeName + '_' + attribute.attributeField];
}
}
return res;
return extend(true , layerOptions , res);;
}
/**
* 初始化样式
*/
initStyle (attribute , layer , layerOptions) {
const res = {};
// 如果形状类型还没有初始化，那么就先初始化形状类型
if (!layerOptions.type) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0]);
if (!layer.shapeInited) {
layerOptions = this.initShapeType(layer.attributesService.attributes.filter(item => item.attributeName === 'shape')[0] , layer);
};
if (!layer.sizeInited) {
layerOptions = extend(true , layerOptions , this.initSize(layer.attributesService.attributes.filter(item => item.attributeName === 'size')[0] , layer , layerOptions))
};
if (!layer.colorInited) {
layerOptions = extend(true , layerOptions , this.initColor(layer.attributesService.attributes.filter(item => item.attributeName === 'color')[0] , layer , layerOptions))
}
if (layerOptions.type === 'circle') {
// 如果是cirlce类型，style样式包括opacity，stroke-width , stroke-color , stroke-opacity
res.paint = (res.paint || (res.paint = {}))
res.paint['circle-stroke-color'] = layer.color;
for (let key in attribute.attributeValue) {
res.paint = (res.paint || (res.paint = {}))
res.paint['circle-' + key] = attribute.attributeValue[key];
}
} else if (layerOptions.type === 'symbol') {
// 如果是symbol类型，style样式包括opacity , offset
for (let key in attribute.attributeValue) {
res.paint = (res.paint || (res.paint = {}))
res.paint[`${layerOptions.layout['text-field'] ? 'text' : 'icon'}-${key}`] = attribute.attributeValue[key]
if (key === 'offset') {
res.layout = (res.layout || (res.layout = {}))
res.layout[`${layerOptions.layout['text-field'] ? 'text' : 'icon'}-${key}`] = this.formatTextOffset(attribute.attributeValue[key] , layer.size)
} else {
res.paint = (res.paint || (res.paint = {}))
res.paint[`${layerOptions.layout['text-field'] ? 'text' : 'icon'}-${key}`] = attribute.attributeValue[key]
}
}
} else if (layerOptions.type === 'line') {
// 如果是line类型，style样式包括opacity , offset
Expand All @@ -261,7 +294,7 @@ export default class Map {
res.paint['line-' + key] = attribute.attributeValue[key]
}
}
return res;
return extend(true , layerOptions , res);
}
render (layer) {
let layerOptions = {} , shape = {} , color = {} , size = {} , style = {};
Expand All @@ -283,6 +316,14 @@ export default class Map {
layerOptions = extend(true , layerOptions , style);
}
});
if (layerOptions.type === 'symbol') {
layerOptions = extend(true , layerOptions , {
layout : {
'icon-allow-overlap' : true,
'text-allow-overlap' : true
}
})
};
this.mapbox.addLayer({
id : layer.name,
type : layerOptions.type,
Expand All @@ -296,6 +337,6 @@ export default class Map {
paint : {
...layerOptions.paint
}
})
});
}
}
39 changes: 35 additions & 4 deletions src/M8/services/layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,45 @@ export default class LayerService {
return this.layerList;
}
getLayerByName (name) {
return this.layerList.find(layer => layer.id === name);
return this.layerList.find(layer => layer.name === name);
}
removeLayer (layer) {
for (let i = 0 ; i < this.layerList.length ; i++) {
if (typeof layer === 'string') {
if (this.layerList[i].name === layer) {
this.mapbox.removeLayer(layer);
this.mapbox.removeSource(layer);
this.layerList.splice(i , 1);
break;
}
} else {
if (this.layerList[i].name === layer.name) {
this.mapbox.removeLayer(layer.name);
this.mapbox.removeSource(layer.name);
this.layerList.splice(i , 1);
break;
}
}
}
}
removeAllLayer () {
this.layerList.map(layer => {
this.mapbox.removeLayer(layer.name);
this.mapbox.removeSource(layer.name);
})
this.layerList = [];
}
removeLayer () {}
removeAllLayer () {}
addLayer (layer) {
this.layerList.push(layer);
}
hasLayer (layer) {

let res = false;
for (let i = 0 ; i < this.layerList.length ; i++) {
if (this.layerList[i].name === layer.name) {
res = true;
break;
}
}
return res;
}
}
Loading

0 comments on commit 9fdf584

Please sign in to comment.