前言
arcgis js api目前已经更新到了4.2x,但针对线段切割一直只有组件无法灵活利用切割后的线段,利用ArcGIS JS API 4.x做多条多段线同时切割。
一、引入库arcgis js api 4.x
<link
rel="stylesheet"
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.19/"></script>
二、引入esri组件并分割线段
代码如下(示例):
require([
"esri/views/draw/Draw",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/Map",
"esri/layers/TileLayer",
"esri/layers/GraphicsLayer",
"esri/views/MapView",
"esri/symbols/TextSymbol"
], (Draw,Graphic,Polyline,Polygon,Map,TileLayer, GraphicsLayer, MapView, TextSymbol) => {
})
2.创建绘制图层并加入Map
// 绘制图层
const graphicsLayer = new GraphicsLayer({
id: 'drawLayer'
});
// 原始数据图层
const polyLineLayer = new GraphicsLayer({
id: 'polyLayer'
});
// 拼接数据图层
const newPolyLineLayer = new GraphicsLayer({
id: 'newPolyLayer'
})
// 多段线标注
const polylineSymbol = {
type: "simple-line",
color: outlineColor,
width: "2",
style: "solid",
cap: "round",
join: "round"
};
// 绘制多段线标注
const drawPolylineSymbol = {
type: "simple-line",
color: drawColor,
width: "2",
style: "solid",
cap: "round",
join: "round"
}
const map = new Map({
basemap: "topo-vector",
layers: [graphicsLayer,polyLineLayer,newPolyLineLayer]
})
3. 创建多段线
const = paths: [
[12599686.199154101, 2649743.756126822],
[12599901.17829616, 2649893.0471976954],
[12600122.129081052, 2649899.0188405304],
[12600420.7112228, 2649821.387483676],
[12600504.314222489, 2649749.727769657],
[12600540.144079497, 2649630.294912958],
[12600540.144079497, 2649439.20234224],
[12600516.257508159, 2649254.0814143573],
[12600366.966437284, 2649098.818700649],
[12600187.817152236, 2649039.1022722996],
[12599883.263367655, 2649074.932129309],
[12599781.74543946, 2649110.7619863185],
[12599686.199154101, 2649188.393343173],
[12599518.993154723, 2649391.4291995605],
[12599524.964797558, 2649528.7769847643],
[12599530.936440393, 2649624.3232701235],
[12599602.596154412, 2649684.0396984727]
]
const shpPolyLine = {
type: 'polyline',
paths: paths
}
4. 开始绘制
let type = drawType;
switch(drawType) {
case 'singleline':
type = 'polyline';
singlelineFirstPoint = null;
case 'polyline':
type = 'polyline';
singlelineFirstPoint = null;
action = draw.create(type,{mode:"click"});
view.focus();
action.on(["vertex-add"], (evt)=>{
if(_updateLabel){
changeLabel(_updateLabel);
}
drawUpdate(evt);
});
action.on(["cursor-update"], (evt)=>{
drawUpdate(evt);
});
break;
case 'polygon':
action = this.draw.create(type, {mode: "click"});
view.focus();
let _this = this;
action.on(["vertex-add"], (evt) =>{
if(_updateLabel) {
changeLabel(_updateLabel);
}
drawUpdate(evt);
});
action.on(["cursor-update"], (evt)=>{
drawUpdate(evt);
});
break;
}
5. 绘制完成分段
// 割断线
let cutLine = graphicsLayer.graphics.items[0].geometry.paths[0];
// 多段线数组
let polyLinesArr = polyLineLayer.graphics.items[0].geometry.paths;
for(let i=0;i< polyLinesArr.length;i++) {
let res = polyLinesIntersection(cutLine,polyLinesArr[i]);
// 成功切割后执行的代码
if(res) {
ALine = group(localArr,res[0].index+1)[0];
BLine = group(localArr,res[0].index+1)[1];
if(res.length == 1) {
// 线段数组长度为1时
ALine.push(res[0].pointDa[0]);
BLine.unshift(res[0].pointDa[0]);
...
}
}else {
// 线段数组长度不为1时
ALine.push(res[0].pointDa[0]);
...
}
}
总结
通过处理切割线段和数组线段的下标整合为新的切割数组。