AILabel.js之实例1：显示一张图像

最新推荐文章于 2024-09-17 13:42:29 发布

*Major*

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量431

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41375318/article/details/132145639

版权

本文介绍了如何在HTML中使用AILabel.js库创建地图实例，并展示了一张图片。首先定义了DOM元素，然后实例化了一个地图对象，设置了中心点和缩放级别。接着，通过Layer.Image类加载并添加了一张图片到地图上。

摘要由CSDN通过智能技术生成

AILabel.js之实例1：显示一张图像

定义dom元素

元素必须赋值id属性
<div id="testMap"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>

</html>

根据定义的dom元素，生成map实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>

<script>

    // 声明容器
const gMap =new AILabel.Map('testMap', {
    center: {x: 250, y: 177},
    zoom: 800,
    mode: 'PAN' // 绘制线段
});
</script>
</html>

显示一张图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>
<script src="./js/AILabel.pkg.min.js"></script>
<script>

// 声明容器
const gMap =new AILabel.Map('testMap', {
    center: {x: 250, y: 177},
    zoom: 800,
    mode: 'PAN' // 绘制线段
});

// 显示一张图片
let gImageLayer = new AILabel.Layer.Image('img', './images/9.jpg', {w: 1080, h: 720}, {zIndex: 1});



// 添加图层
gMap.addLayer(gImageLayer);
</script>
</html>