-
Notifications
You must be signed in to change notification settings - Fork 288
Expand file tree
/
Copy pathObjectDetection.html
More file actions
54 lines (50 loc) · 1.99 KB
/
ObjectDetection.html
File metadata and controls
54 lines (50 loc) · 1.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* tensorflow (https://github.com/tensorflow/tensorflow)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n='resources.title_object_detection'></title>
<style>
#predict {
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<img style="display: none;" class="building" id="tileImg16" src="../img/plane600x600.png" alt="">
<canvas id="data-canvas1" width="600" height="600"></canvas>
<input type='button' id='predict' class='btn btn-primary' data-i18n="[value]resources.text_analyse"/>
<script type="text/javascript" include="bootstrap,vue" src="../js/include-web.js"></script>
<script include="tensorflow" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script>
var modelUrl = 'https://iclient.supermap.io/web/data/machine_learning/object_detection/model.json';
var img = document.querySelector('#tileImg16');
var canvas = document.querySelector('#data-canvas1');
var ctx = canvas.getContext('2d');
var predictBtn = document.querySelector('#predict');
ctx.drawImage(img, 0, 0, 600, 600);
var webMachineLearning = new mapboxgl.supermap.WebMachineLearning();
var objectDetection = new mapboxgl.supermap.ObjectDetection({ modelUrl, image: img });
predictBtn.addEventListener('click', function() {
webMachineLearning.execute(objectDetection).then((bboxList) => {
bboxList.forEach(bbox => {
drawBbox(ctx, bbox);
});
});
});
function drawBbox(ctx, bbox) {
const {x, y, w, h} = bbox;
ctx.strokeStyle = '#00FFFF';
ctx.lineWidth = 3;
ctx.strokeRect(x, y, w, h);
}
</script>
</body>
</html>