mapbox-gl使⽤geojson实现三维建筑物效果
1 引⼊mapbox-gl.js、mapbox-gl.css
2 vue中初始化地图
import{getJson}from"./geojson/json"
async initMap(){
// let baurl = icOperat.url; //我这⾥配置的是supermap iServer 9D发布的地图
let baurl ='iclient.supermap.io/irver/rvices/map-china400/rest/maps/China';//这⾥使⽤iclient官⽹上的地图let map =new mapboxgl.Map({
container:'map',//div容器的id
style:{
"version":8,
"sources":{
"raster-tiles":{
//"attribution": 'supermap',
"type":"raster",
"tiles":[baurl +'/zxyTileImage.png?z={z}&x={x}&y={y}'],
"tileSize":256,
},
},
"layers":[{
"id":"simple-tiles",
"type":"raster",
"source":"raster-tiles",
"minzoom":3,
"maxzoom":18,父亲的散文诗的歌词
}]
},
center:[112.7872,28.2131],//中⼼点配置
zoom:12//当前缩放等级
//默认倾斜⾓度-三维效果
pitch:45,
//默认偏移⾓度
bearing:30
});
/
/底图倾斜⾓度；可以通过eaTo或flyTo 飞向⽬标点
/* map.eaTo({
center:[112.7872, 28.2131],
pitch: 45,
bearing: 30,
//飞⾏速度
speed:0.8
});*/
window.BoxMap = map;
//初始化底图完毕
//待地图加载完毕执⾏建筑物⾯拉起效果
tTimeout(this.addLayer,100);
}
3 加载geojson⾯数据，通过图层叠加拉起⾯数据
async addLayer(){
let that =this;
//获取本地geojson数据，效率快
let geojson =getJson();
that.addBoxLayer(geojson);
}
getJson() 是获取geojson⾥的数据⽅法,bm11.json在我的下载⾥核桃仁粥
import geojson from'./bm11'
var getJson=function(){
return geojson;
}
export{
getJson
}
async addBoxLayer(feature){
let that =this;
Layer('entity_layer')){
};
Layer('entity_borders')){
};
feature.features.forEach(item =>{
let he ='';//默认建筑物⾼度
if(item.properties.height ==""){
he ="5";
}el{
he = item.properties.height;
}
//模拟数据
item.properties.pkid =parInt(item.properties.xh);
item.properties.height =parInt(he);
item.properties.ba_height =parInt(0);
});
Source("states")){
}el{
BoxMap.addSource("states",{
"type":"geojson",
"data": feature
});
}
BoxMap.addLayer({
'id':'entity_layer',
'type':'fill',
'source':'states',
'type':'fill-extrusion',
'layout':{},
'minzoom':14,
'paint':{
'fill-extrusion-color':'#123984',
// u an 'interpolate' expression to add a smooth transition effect to the // buildings as the ur zooms in
// 'fill-extrusion-height': ['get', 'height'],
// 'fill-extrusion-ba': ['get', 'ba_height'],
英语必背单词'fill-extrusion-height':[
"interpolate",["linear"],["zoom"],
14,0,
14.05,["get","height"]
],
'fill-extrusion-ba':[
"interpolate",["linear"],["zoom"],
14,0,
14.05,["get","ba_height"]
]
,
'fill-extrusion-opacity':1
}
});
BoxMap.addLayer({
'id':'entity_borders',
漂亮女孩图片
'type':'fill',
'source':'states',
'type':'fill-extrusion',
'layout':{},
'minzoom':14,
'paint':{
各种动物图片大全'fill-extrusion-color':'#b8c9dd',
// u an 'interpolate' expression to add a smooth transition effect to the
// buildings as the ur zooms in
'fill-extrusion-height':['get','height'],
'fill-extrusion-ba':['get','ba_height'],
'fill-extrusion-opacity':1
},
"filter":["in","pkid",""]
});
肉皮冻的熬制方法
属相虎let popups =new mapboxgl.Popup({
cloButton:fal,
cloOnClick:fal
});
<("moumove","entity_layer",function(e){
let feature = e.features[0];
let relatedFeatures = BoxMap.querySourceFeatures('states',{
filter:['in','pkid', feature.properties.pkid]
王者图片
});
let filter = duce(function(memo, feature){
memo.push(feature.properties.pkid);
return memo;
},['in','pkid']);
BoxMap.tFilter("entity_borders", filter);
//建筑物弹窗信息
let xmmc ="";
if(feature.properties.XMMC.length >35){
let a1 = feature.properties.XMMC.substring(0,35);
let a2 = feature.properties.XMMC.substring(35,feature.properties.XMMC.length);
xmmc ="<h1 style='color: white'><a style='color: orange'>"+ a1 +"<br>"+ a2+" ("+ feature.properties.JZWMC+")</a></h1>";
}el{
xmmc ="<h1 style='color: white'><a style='color: orange'>"+ feature.properties.XMMC+" ("+ feature.properties.JZWMC+")</a></h1>";
}
//建筑物弹窗信息
let html = xmmc +
"<h2 style='color: white'> 建筑物⽤途：<a style='color: orange'>"+feature.properties.JZWJBYT+"</a> </h2>"+
"<h2 style='color: white'> 建筑物⾼度：<a style='color: orange'>"+ feature.properties.JZWGD+" ⽶</a></h2>"+
"<h2 style='color: white'> 维修单位：<a style='color: orange'>"+feature.properties.WXDW+"</a> </h2>"+
"<h2 style='color: white'> 物业公司：<a style='color: orange'>"+ feature.properties.WYGSMC+"</a></h2>"+
"<h2 style='color: white'> 坐落：<a style='color: orange'>"+feature.properties.ZL+"</a> </h2>";
popups.tLngLat([feature.properties.X, feature.properties.Y])
.tHTML(html)
.addTo(BoxMap);
});
<("mouleave","entity_layer",function(){ Canvas().style.cursor ='';
BoxMap.tFilter('entity_borders',['in','pkid','']); ve();
});
},
4 效果图
