您现在的位置是:首页 > 正文

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

2024-02-29 11:58:24阅读 1

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>

在这里插入图片描述

网站文章

  • 机床计算机数控技术论文,数控技术机床机械加工论文

    1数控技术在制造行业应用1.1在机床设备中应用数控机床是现代机电的重要组成,能够有效的提高制造业的工作效率。数控机床的应用改变了原来的零件加工方式,能够使用数字化技术处理零件的加工工艺,使用编程发布指...

    2024-02-29 11:58:16
  • C++ MFC中如何根据不同文件编码格式读取和显示文件内容

    这里假设VC++的字符集编码格式是Unicode,要显示的文本内容是strResult。上一篇,介绍了写文件,这一篇我要介绍的如何读取文件内容并显示出来。3、读取unicode-le编码格式的文本文件。4、读取unicode-be编码格式的文本文件。2、读取utf-8编码格式的文本文件。1、读取ANSI编码格式的文本文件。

    2024-02-29 11:58:11
  • 谷歌大脑提出gMLP:请多多关注MLP

    谷歌大脑提出gMLP:请多多关注MLP

    研究表明:自注意力对于视觉Transformer并不重要,因为gMLP可以达到相同的精度,性能优于ResMLP、MLP-Mixer等网络,可比肩DeiT等,在视觉和语言任务中通吃!可媲美Transfo...

    2024-02-29 11:57:43
  • 移动端点击a链接出现蓝色背景问题解决

    移动端点击a链接出现蓝色背景问题解决

    2024-02-29 11:57:36
  • 电脑Win11安装Autocad出现错误要如何处理

    电脑Win11安装Autocad出现错误要如何处理

    Autocad是一款十分出名的图纸设计软件之一,有不少用户都在使用,但有些用户在将电脑系统升级到Win11之后再去安装autocad的时候就出现安装错误,这时候我们要如何解决这个问题呢?Autocad...

    2024-02-29 11:57:29
  • MyBatis-5 多表查询

    多表查询​ 实际中,以账户和用户为例:​ 一个学生可以学多门课​ 一门课可以有多个学生学一对一​ 主表实体类中,包含从表的引用​ 例子:(假设一个学生只学一门课)在学生实体类中,添加 "c...

    2024-02-29 11:56:59
  • 1、验证1101序列(Moore)

    1、验证1101序列(Moore)

    注意:如果状态转移方程不显然,则需严格按照设计状态-状态化简-状态转移真值表-状态转移方程过程进行来得出转移方程,相关内容在数电-同步时序电路。用使用状态机验证1101序列,注意:允许重复子序列。触发器(很好理解,最多的情况就是储存全部信息,每位一个。用Moore型状态机验证1101序列。: D触发器灵活得出状态转移方程。位序列进行检测,则最多需要。以四位为例,于是有D触发器。

    2024-02-29 11:56:52
  • Python常用模块

    Python常用模块

    random 模块https://www.cnblogs.com/liangmingshen/p/8909376.html

    2024-02-29 11:56:44
  • java基础10题

    java基础10题

    2024-02-29 11:56:15
  • 资源限制类题目技巧大全

    即使有些碰撞,一个文件中的数据多于1千万条,但没有关系。因为在前面我们算过,一个文件真正可以存的数据条数是1亿两千500条。1千万条只是比较保守的一个数,因此一个文件超了1千万条数据也不会有什么,也不...

    2024-02-29 11:56:09