使用turf.js和mapbox测量绘制的线长度
我正在尝试使用turp.js的“length”特性构建功能,以测量用户在Mapbox地图上绘制的线 这就是说,我是一个编码新手——我知道的仅仅够危险 最终,我希望能够绘制面积和线,并返回它们各自的度量值(多边形的面积、线串的长度) 有人能解释为什么这段代码不起作用吗使用turf.js和mapbox测量绘制的线长度,mapbox,Mapbox,我正在尝试使用turp.js的“length”特性构建功能,以测量用户在Mapbox地图上绘制的线 这就是说,我是一个编码新手——我知道的仅仅够危险 最终,我希望能够绘制面积和线,并返回它们各自的度量值(多边形的面积、线串的长度) 有人能解释为什么这段代码不起作用吗 线路测试 正文{margin:0;padding:0;} #映射{位置:绝对;顶部:0;底部:0;宽度:100%;} .计算箱长度{ 高度:75px; 宽度:100px; 位置:绝对位置; 底部:40px; 左:10px; 背景
线路测试
正文{margin:0;padding:0;}
#映射{位置:绝对;顶部:0;底部:0;宽度:100%;}
.计算箱长度{
高度:75px;
宽度:100px;
位置:绝对位置;
底部:40px;
左:10px;
背景色:rgba(255、255、255、.9);
填充:15px;
文本对齐:居中;
}
长度:
mapboxgl.accessToken='pk.eyj1ijoibwjsywnrbgluiiwiysi6imnqawmxcgk2mzawd3yzbg1ew4yohppdnyifq.xdb-2slu5lapzpumcikqq';
//*********-----------------------------------------------------------------------------------------------------------------**********
//创建新地图对象
var map=new mapboxgl.map({
容器:'映射',//容器id
风格:'mapbox://styles/mblacklin/cjii8o7w91g9o2stcktaeixai“,//样式表位置
中心:[-117.572737,51.746916],//起始位置[lng,纬度]
缩放:16//开始缩放
});
//*********-----------------------------------------------------------------------------------------------------------------**********
//将导航控件添加到地图
addControl(新的mapboxgl.NavigationControl());
//*********-----------------------------------------------------------------------------------------------------------------**********
//添加绘制几何图形和显示其测量值的功能
//
var draw=new MapboxDraw({
displayControlsDefault:false,
控制:{
行字符串:true,
多边形:是的,
垃圾:没错
}
});
map.addControl(draw);
map.on('draw.create',updateLength);
map.on('draw.delete',updateLength);
map.on('draw.update',updateLength);
函数更新长度(e){
var data=draw.getAll();
var answer=document.getElementById(“计算长度”);
如果(data.features.length>0){
变量长度=草皮长度(数据);
//将面积限制为2个小数点
answer.innerHTML=''+length+'米;
}否则{
answer.innerHTML='';
如果(e.type!=“draw.delete”)警报(“使用右上角的绘制工具计算距离”);
}
};
//
//*********-----------------------------------------------------------------------------------------------------------------**********
我发现您的代码中有两个小问题:
<html>
<head>
<meta charset=utf-8 />
<title>Line Test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.calculation-box-length {
height: 75px;
width: 100px;
position: absolute;
bottom: 40px;
left: 10px;
background-color: rgba(255, 255, 255, .9);
padding: 15px;
text-align: center;
}
</style>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'>
</script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<div class='calculation-box-length'>
<p>Length:</p>
<div id='calculated-length'></div>
</div>
<nav id="menu"></nav>
<script>mapboxgl.accessToken = 'pk.eyJ1IjoibWJsYWNrbGluIiwiYSI6ImNqaWMxcGk2MzAwd3YzbG1oeW4yOHppdnYifQ.xdb-2slu5LapzpuMCiKzQQ';
//*********-----------------------------------------------------------------------------------------------------------------**********
//Create new map object
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mblacklin/cjii8o7w91g9o2stcktaeixai', // stylesheet location
center: [-117.572737, 51.746916], // starting position [lng, lat]
zoom: 16 // starting zoom
});
//*********-----------------------------------------------------------------------------------------------------------------**********
// Add navigation controls to the map
map.addControl(new mapboxgl.NavigationControl());
//*********-----------------------------------------------------------------------------------------------------------------**********
// Add the ability to draw geometries and display their measurements
//
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon: true,
trash: true
}
});
map.addControl(draw);
map.on('draw.create.', updateLength);
map.on('draw.delete', updateLength);
map.on('draw.update', updateLength);
function updateLength(e) {
var data = draw.getAll();
var answer = document.getElementById('calculated-length');
if (data.features.length > 0) {
var length = turf.length(data);
// restrict to area to 2 decimal points
answer.innerHTML = '<p><strong>' + length + '</strong></p><p> meters</p>';
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete') alert("Use the draw tools in the upper right to calculate a distance");
}
};
//
//*********-----------------------------------------------------------------------------------------------------------------**********
</script>
</body>
</html>