如何使⽤mapbox选择拾取地图要素
如何使⽤mapbox选择拾取地图要素
前⾔
你好！ 最近在研究地图元素和客户端交互的⽅法，我将项⽬中的应⽤技能分享给⼤家！这是关于使⽤mapbox（点、线、多边形）选择或者称作拾取地图界⾯要素信息的⼀篇⽂章！
需要引⼊的js、css
我们除了最基本的jquery和mapbox之外，还需要引⼊turf.min.js，这是⼀个mapbox多边形和点、线选的插件。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="mapbox-gl-draw.js"></script>
<script type="text/javascript" src="mapbox-gl.min.js"></script>
<script src='turf.min.js'></script>
<link type="text/css" rel="stylesheet" href="mapbox-gl.min.css"/>
<link type="text/css" rel="stylesheet" href="mapbox-gl-draw.css"/>
如何加载地图
页⾯内容如下，需要三个div；⼀个存放地图需要的展⽰信息、⼀个存放地图控件、⼀个存放地图。
<body>
<div id="draw_area" ></div>
<div id="draws"></div>
<div id='map'></div>
</body>
我们需要定义⼀个demo.js；⽤来编写如何加载地图和如何拾取要素，页⾯上引⽤它，并在demo.js⾥先加载地图和地图控件，我们⽤iclient官⽹上的地图和要素数据。
var host = window.isLocal ? window.rver :"irver.supermap.io";
var drawHandleModel;
var attribution ="我的mapbox要素拾取demo";
var map =new mapboxgl.Map({
container:'map',// container id
style:{
"version":8,
"sources":{
"vector-tiles":{
"attribution": attribution,
"type":"vector",
"tiles":[host +"/irver/rvices/map-beijing/rest/maps/beijingMap/tileFeature.mvt?"+
"returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}"+
"&expands=0:0_2,132_128,138_64,141_32,143_16,145_8,147_4"
]
},
},
"sprite":"iclient.supermap.io/web/styles/street/sprite",
"glyphs": host +"/irver/rvices/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf", "layers":[]
提升执行力的9个方法},
center:[116.4,39.9],
minZoom:10,
zoom:11
});
map.addControl(new mapboxgl.NavigationControl(),'top-left');
var map =getMap();
var draw =new MapboxDraw({
displayControlsDefault:fal,
controls:{
point:true,
line_string:true,
polygon:true,
trash:true
}
});
window.Draw = draw;
map.addControl(draw,"top-right");
<("ate",this.updateArea);
<("draw.update",this.updateArea);
<("draw.delete",this.delArea);
然后加载地图要素
<('load',function(){
map.addLayer({
"id":"background",
"type":"background",
"layout":{},
"paint":{
"background-color":"#75CFF0"
}
});
map.addLayer({
"id":"⾯区界R@北京",
"type":"fill",
"source":"vector-tiles",
"source-layer":"⾯区界R@北京",
"paint":{
"fill-color":"#EFE9E1",
}
});
map.addLayer({
"id":"界线@北京",
"type":"line",
"source":"vector-tiles",
"source-layer":"界线@北京",
"paint":{
"line-color":"hsl(240, 8%, 51%)",
"line-width":0.5
}
});
map.addLayer({
"id":"⽴交桥绿地R@北京",
"type":"fill",
"source":"vector-tiles",
"source-layer":"⽴交桥绿地R@北京",
"paint":{
"fill-color":"hsl(100, 58%, 76%)",
"fill-opacity":{
"ba":1,
"stops":[
[
5,
],
[
6,
0.5
牛郎织女读后感]
]
}
},
});
map.addLayer({
海平面气压"id":"绿地R@北京",
"type":"fill",
"source":"vector-tiles",
"source-layer":"绿地R@北京",
"paint":{
"fill-color":"hsl(100, 58%, 76%)",
"fill-opacity":{
"ba":1,
"stops":[
[
5,
],
等待英文[
6,
0.5
]
]
包皮红肿怎么回事}
},
});
map.addLayer({
"id":" 双线河R@北京",
"type":"fill",
"source":"vector-tiles",
"source-layer":"双线河R@北京",
"paint":{
"fill-color":"hsl(196, 80%, 70%)"
}
});
map.addLayer({
"id":"湖泊、⽔库R@北京",
"type":"fill",
"source":"vector-tiles",
"source-layer":"湖泊、⽔库R@北京",
"paint":{
"fill-color":"hsl(196, 80%, 70%)"
}
});
map.addLayer({
"id":" 四级道路L@北京",
"type":"line",勤工助学申请理由
"source":"vector-tiles",
"source-layer":"四级道路L@北京",
"paint":{
安心的近义词"line-width":{
"ba":1.5,
"stops":[
[
11,
1
],
[
18,
英语写信作文10
]
]
},
"line-color":"hsl(0, 0%, 100%)",
}
});
});
地图上就是这样的效果
如何使⽤地图空间选择要素先做地图点击事件
