问用turf.js和mapbox测量绘制线长
EN

Stack Overflow用户

提问于 2018-07-15 04:52:58

回答 1查看 1.1K关注 0票数 2

我正在尝试构建一个功能，使用turf.js 'length‘功能来度量用户在Mapbox地图上绘制的一条线。

话虽如此，我是个编码新手-我知道的还不够危险。

最终，我希望能够同时绘制区域和线，并返回它们各自的度量(多边形区域，线字符串长度)。

有人能深入了解为什么这段代码不能工作吗？

https://jsfiddle.net/knxwu342

<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>

mapbox

回答 1

Stack Overflow用户

发布于 2018-07-17 14:30:24

我在您的代码中看到了两个小问题：

您的“draw.create”侦听器中有一个错误。只需在创建后移除点： Map.on(‘map.on.map.on’，updateLength)；
您使用的Turf版本太旧了，似乎没有length函数。尝试使用最近的一个：https://npmcdn.com/@turf/turf/turf.min.js

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51345375

复制

相似问题

问用turf.js和mapbox测量绘制线长
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用turf.js和mapbox测量绘制线长EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用turf.js和mapbox测量绘制线长
EN