Skip to content

Commit

Permalink
学习mapbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyChenAn
andyChenAn committed Apr 6, 2022
1 parent 5427d5a commit 4c53de1
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 161 deletions.
203 changes: 49 additions & 154 deletions src/components/map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,163 +16,58 @@ export default {
center: [116.390619, 39.924317],
});
const map = myMap.getMapbox();
const layer = new Layer(map);
map.on("load", async () => {
const urls = ['https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF' , 'https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF'];
const url = 'https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF';
const url2 = 'https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF';
const res = await myMap.loadImage(url , {width:200,height:100});
map.addImage('aa' , res);
map.addLayer({
id : 'bb',
source : {
type : 'geojson',
data : {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [116.390629, 39.924317],
},
},
],
}
},
type : 'symbol',
layout : {
'icon-image' : 'aa'
}
})
setTimeout(() => {
myMap.loadImage(url2 , {width:200,height:100}).then(res => {
myMap.updateImage('aa' , res);
map.removeLayer('bb');
map.addLayer({
id : 'cc',
source : {
type : 'geojson',
data : {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [116.390629, 39.924317],
},
},
],
}
},
type : 'symbol',
layout : {
'icon-image' : 'aa'
}
})
})
} , 3000)
// const urls = [
// "https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF",
// "https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF",
// ];
// const url =
// "https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF";
// const url2 =
// "https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF";
const urls = [require('@/assets/car1.png') , require('@/assets/car2.png')];
const res = await myMap.loadImage(urls);
// res.map(item => {
// map.addImage("andy", res);
// });
// const geojson = {
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [116.390629, 39.924317],
// },
// properties: {
// iconName: "andy",
// rotate : 0
// },
// },
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [116.390629, 39.924317],
// },
// properties: {
// iconName: "andy",
// rotate : 0
// },
// },
// ],
// };
// layer.addPointLayer({
// name: "aa",
// data: geojson,
// field: "iconName",
// shape(name) {
// return name;
// },
// });
});
},
// mounted() {
// const map = new Map(
// {
// container: "map",
// center: [116.390619, 39.924317],
// },
// icons
// );
// map.map.on("load", () => {
// const layer = new Layer(map.map);
// layer.addPointLayer({
// name: "andy",
// data: {
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [116.390629, 39.924317],
// },
// },
// ],
// },
// });
// });
// },
//methods: {
// addIcon() {
// this.layer.addPointLayer({
// name: "bb",
// data: {
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [116.390629, 39.924317],
// },
// properties : {
// image: require("@/assets/car.png"),
// rotate : 40,
// type : 'white'
// }
// },
// ],
// },
// rotate: 90,
// opacity: 1,
// size : [64 , 30],
// scale : 0.5
// });
// },
//},
// mounted() {
// const map = createMap({
// container: "map",
// center: [116.390619, 39.924317],
// });
// this.layer = new Layer(map);
// this.layer.addPointLayer({
// name: "aa",
// data: {
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [116.390619, 39.924317],
// },
// properties : {
// type : 'car',
// image: require("@/assets/car.png"),
// rotate : 90
// }
// },
// // {
// // type: "Feature",
// // geometry: {
// // type: "Point",
// // coordinates: [116.390639, 39.925537],
// // },
// // properties : {
// // type : 'blue',
// // image: require("@/assets/blue.png"),
// // rotate : 45
// // }
// // }
// ],
// },
// rotate: 90,
// opacity: 1,
// size : [64 , 30],
// scale : 0.5
// });
// },
};
</script>
<style>
Expand Down
14 changes: 9 additions & 5 deletions src/utils/map/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ class Map {
const map = new mapboxgl.Map(options);
this.instance = map;
}
/**
* 返回mapbox实例
* @returns mapbox实例
*/
// 返回mapbox实例
getMapbox () {
return this.instance;
}
Expand Down Expand Up @@ -73,6 +70,13 @@ class Map {
removeImage (name) {
this.instance.removeLayer(name);
}

/**
* 更新图标
* @param {string} name 图标名称
* @param {HTMLElement} image img标签元素
*/
updateImage (name , image) {
this.instance.updateImage(name , image)
}
}
export default Map;
9 changes: 7 additions & 2 deletions src/utils/map/layer/point/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ class PointLayer {
constructor (mapbox) {
this.map = mapbox;
}
addLayer (options) {
async addLayer (options) {
const {
name,
data,
Expand All @@ -16,9 +16,10 @@ class PointLayer {
if (item.properties && typeof item.properties === 'object') {
if (field && typeof shape === 'function') {
const shapeValue = item.properties[field];
shape(shapeValue);
item.properties._fieldValue = shape(shapeValue);
}
}
return item;
})
}
this.map.addLayer({
Expand All @@ -27,6 +28,10 @@ class PointLayer {
source : {
type : 'geojson',
data : data
},
layout : {
'icon-image' : ['get' , '_fieldValue'],
'icon-rotate' : ['get' , 'rotate']
}
});
return this.map.getLayer(options.name)
Expand Down

0 comments on commit 4c53de1

Please sign in to comment.