Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
背景:在前端开发过程中难免遇到针对图片的缩放平移;以及在图片上进行矢量数据、文本、标注的展示;如果你有上面的任何需求,恭喜你,找到组织了....
在此背景下,AILabel.js出生了
npm下载地址:https://www.npmjs.com/package/ailabel
github地址: https://github.com/dingyang9642/AILabel
api文档(待补充): https://dingyang9642.github.io/AILabel/#/
- 解决图片浏览(无极缩放、平移)
- 矢量数据、文本、标注展示
- 矢量数据绘制、编辑
- 标注形式:矩形、多边形、涂抹、折线、打点、文本text、标注marker
- 要素
- 注记
- 文本
- 绘制编辑
- 矩形编辑
- 要素hover
- 图像&缩略图&比例尺
html\css\js部分
// 样式声明
<style>
#hello-map {
width: 500px; // 必须
height: 400px; // 必须
position: relative; // 必须
border: 1px solid red;
cursor: pointer;
}
</style>
// 容器声明
<div id="hello-map"></div>
// js声明-容器声明(参数:zoom: 缩放比; {cx: cy:}:初始中心点位置;zoomMax、zoomMin:缩放的比例限制)
const gMap = new AILabel.Map('hello-map', {zoom: 1080, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10, autoPan: true, drawZoom: true});
// 图片层实例\添加
const gImageLayer = new AILabel.Layer.Image('img', '../../imgs/demo.jpeg', {w: 1080, h: 720}, {zIndex: 1});
gMap.addLayer(gImageLayer);
***至此、已完成首个简单的hello-map的使用***
// 常用样式声明
const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});
// 矢量层实例\添加
let gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: true});
gMap.addLayer(gFeatureLayer);
// 矢量要素实例\添加
const fea = new AILabel.Feature.Polygon('id', [
{x: 10, y: 10},
{x: 50, y: 10},
{x: 40, y: 50},
{x: 20, y: 60},
{x: 10, y: 10}
], {name: '中国'}, gFetureStyle);
gFeatureLayer.addFeature(fea);
// 常用样式声明
const gTextStyle = new AILabel.Style({strokeColor: '#0000FF'});
// 文本层实例\添加
let gTextLayer = new AILabel.Layer.Text('textLayer', {zIndex: 2});
gMap.addLayer(gTextLayer);
// 文本要素实例\添加
const text = new AILabel.Text('id', {
pos: {x: 100, y: 100},
offset: {x: 0, y: 0},
width: 100,
text: '中国'
}, gTextStyle);
gTextLayer.addText(text);
// 不需要声明markerLayer标注图层,有且只有一个markerLayer,可通过gMap.mLayer来获取
// marker对象实例\添加
const marker = new AILabel.Marker('name-中国', {
src: './marker.png',
x: 0,
y: 0,
offset: {x: -32, y: -32}
});
// 注册监听事件删除标注
marker.regEvent('click', function () {
gMap.mLayer.removeMarker(this);
});
gMap.mLayer.addMarker(marker);
// mouseDown:wxy => {}
// mouseMove:wxy => {}
// geometryEditing:(type, feature, newPoints) => {}
// geometryEditDone:(type, feature, newPoints) => {}
// geometryDrawDone:(type, points) => {}
// geometryRemove: (type, feature) => {} 【目前只针对点数据】
// featureHover:feature => {}
// featureSelected:feature => {}
// featureStatusReset:() => {}
// boundsChanged() => {}
// resize() => {}
gMap.events.on('mouseDown', xy => {console.log('xy');});
gMap.events.on('boundsChanged', () => {console.log('boundsChanged');});
gMap.events.on('featureHover', feature => {console.log(feature);});
...
// 常用样式声明
const gFetureStyle = new AILabel.Style({strokeColor: '#0000FF'});
// 设置当前操作模式为‘drawRect’, 浏览状态对应mode为'pan'
gMap.setMode('drawRect', gFetureStyle);
// 矢量层实例\添加
let gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: true});
gMap.addLayer(gFeatureLayer);
// 绘制完成事件监听
gMap.events.on('geometryDrawDone', function (type, points) {
// 生成元素唯一标志(时间戳)
const timestamp = new Date().getTime();
// 元素添加展示
let fea = new AILabel.Feature.Polygon(`feature-${timestamp}`, points, {
name: '中国'
}, gFetureStyle);
gFeatureLayer.addFeature(fea);
});
// 因为自带编辑功能,故需要以下代码
gMap.events.on('geometryEditDone', (type, activeFeature, points) => {
activeFeature.update({points});
activeFeature.show();
});
如有其他需要,加入qq群:378301400
FAQs
We found that ailabel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.