addImage
addSource(id, source)
向地图样式中添加一个新的数据源。
GeoJson 是常用的地理数据规范,Mapbox 将它作为 Source(索尔是),而 Source 可以与 Layer 进行绑定,从而实现地图绘制
source提供地图数据,Mapbox GL JS 可以将这些数据与样式文档一起使用,以呈现该数据的可视化表示形式。通过此委托,可以以不同的方式设置同一源的样式,就像区分高速公路图层中不同类型道路的外观一样。
一个标准的GeoJson如下所示
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
最外层:
- type:“Feature”(非缺儿)表示一个特征要素,“FeatureCollection”(康来可行)表示为特征要素的集合
- geometry(急偶莫吹):存储该特征要素的实际形状描述 properties:存储该要素的属性
geometry:
type:存储要素类型(Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线)和MultiPolygon(多面))
coordinates:坐标(存储图形坐标)
properties(泊盆特死):特性
获取中心坐标
//获取地图中心坐标
getcenter(){
var center=this.Vmap.getCenter()
console.log('中心坐标是',center);
},
设置地图中心坐标
//设置地图中心坐标
setcenter(){
this.Vmap.setCenter([104.05768272082054,30.595256362472213])
},
动态跳转到地图的指定位置
flyto() {
this.Vmap.flyTo({
center: [104.05768272082054, 30.595256362472213],
zoom: 9,//缩放
duration: 900,//过度时间
offset: [2, 5],
easing(t) {
return t;
}
});
},
楼层切换组件使用
<!-- 楼层切换组件 -->
<div id="map-floor"></div>
const SelectFloor = new creeper.FloorSelector(this.Vmap, {
id: "map-floor", // 必传, 楼层组件存放的容器id ,div标签的id名称
currentFloor: 0, //楼层 0是1楼 非必传默认是1楼
displaySize: 8, //展示的数量 非必传默认是5个楼层信息
displayZoom: 18, //显示的最小地图放大等级 非必传默认是18
// displayZoom: 20,
onChange: (level) => {
console.log(level); // 更改的楼层 1楼为0,-1楼为-1
// this.SET_CURRENTFLOOR(level);
}, // 变化的回调
});
#map-floor {
position: fixed;
// right: 100px; // 已经调整好的值,不需要修改值
// 侧栏默认展开展开的话,可以直接固定设置楼层切换组件位置. 否则需要更具侧栏展开状态设置楼层组件位置
right: 54vh;
bottom: 200px;
transition: all 1s;
.creeper-level-list {
background-color: rgb(12, 30, 53);
border: 1px solid rgb(11, 74, 94);
}
.creeper-level-item {
color: rgb(98, 162, 235);
}
.creeper-current-level {
background-color: rgb(4, 206, 220);
color: #fff;
}
}
Popup地图弹窗组件
this.Vmap.on('click', function (e) {
console.log('点击事件的经纬度', e.lngLat);
// var markerHeight = 50, markerRadius = 10, linearOffset = 25;
// var popupOffsets = {
// 'top': [0, 0],
// 'top-left': [0, 0],
// 'top-right': [0, 0],
// 'bottom': [0, -markerHeight],
// 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// 'left': [markerRadius, (markerHeight - markerRadius) * -1],
// 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
// };
//弹窗
new creeper.Popup()
.setLngLat(e.lngLat)
.setHTML("<h1>Hello World!</h1>")
.addTo(that.Vmap);
})
marker
setstart() {
if (this.markerlist !== "") {
for (let i = 0; i < this.markerlist.length; i++) {
this.markerlist[i].remove()
}
this.markerlist = []
}
let div = document.createElement("div");
div.className = "studystatus-marker-wrap";
div.innerHTML = `
<div>起点</div>
`;
this.start = new creeper.Marker({ element: div })
.setLngLat(this.zuobiao)
.addTo(this.Vmap);
}