AILabel.js之实例3：绘制标注_ailabel 标注标签-CSDN博客

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

AILabel.js之实例3：绘制标注

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script src='../../AILabel.pkg.min.js'></script>
	<style>
        #map {
        	width: 500px;
        	height: 400px;
        	border: 1px solid red;
        	position: relative;
        	cursor: pointer;
        }
	</style>
</head>
<body>
	<div id="map"></div>
    <script>
        // 常用样式声明
        const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});

        // 容器对象声明
        let gMap = new AILabel.Map('map', {zoom: 1080, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10});

        // 图片层实例\添加
        let gImageLayer = new AILabel.Layer.Image('img', './images/18.jpg', {w: 1080, h: 720}, {zIndex: 1});
        gMap.addLayer(gImageLayer);

        // 矢量层实例\添加
        let gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: true});
        gMap.addLayer(gFeatureLayer);

        // 矢量要素实例\添加
        const fea = new AILabel.Feature.Polygon('id-name', [
            {x: 10, y: 10},
            {x: 50, y: 10},
            {x: 40, y: 50},
            {x: 20, y: 60},
            {x: 10, y: 10}
        ], {name: 'rect222'}, gFetureStyle);
        gFeatureLayer.addFeature(fea);
    </script>
</body>
</html>