ArcGIS API for JavaScript(最新版) 军标绘制

近来闲着无聊,参考网上的一些论文资料,结合ArcGIS API for JavaScript 4.23最新版做了一个军事标绘系统,里面扩展了将近30多种军标符号,包括二维和三维下面的点、线、面、箭头、旗帜等。

其大致原理就是使用“esri/views/draw/Draw”这个api模块来扩展,结合相应图标的算法来绘制,然后指定各自的symbol渲染即可。

例如我们绘制一个文字标绘,首先初始化Draw这个绘制工具,然后指定draw的绘制类型为“text”,最后指定绘制出来的要素的渲染符号,具体代码如下:

const [Draw] = await loadModules(["esri/views/draw/Draw"], gconfig.arcgis_options);
const draw = new Draw({
    view,
});


//....
let pointGeometry1 = {
    type: "point",
    x: this.x,
    y: this.y,
    spatialReference: this.view.spatialReference
};

let screenPoint = this.view.toScreen(pointGeometry1);
screenPoint.x += (this.text.length * (fontSize - 6));
screenPoint.y += 50;

let toMapPoint = this.view.toMap(screenPoint);

let pointGeometry2 = {
    type: "point",
    x: toMapPoint.x,
    y: toMapPoint.y,
    spatialReference: this.view.spatialReference
};

const pointGeometry = GeoRectangle().getRectangle([pointGeometry1, pointGeometry2]);

const [Graphic] = await loadModules(['esri/Graphic'], gconfig.arcgis_options);
let graphic = new Graphic({
    geometry: pointGeometry,
    symbol: symbol,
    attributes: "Text:" + this.text
});

this.graphicsLayer.add(graphic);

//....
currentObj.simpleMarker = {
    type: "simple-marker", 
    color: "red",
    size: "8px"  
};

军标库的使用结合主流的前端模块化方案,直接通过import的方式导入即可使用,不需要dojo等其他过时的框架库,不需要额外离线部署其他的东西。军标库在二三维下的绘制演示结果如下:

欢迎有需要的同学付费购买,拒绝白嫖(QQ:2250685378)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X北辰北

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值