ArcGIS JS API 4.x (一)多条线段切割

---

前言

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]);
			...
		}
	}

总结

通过处理切割线段和数组线段的下标整合为新的切割数组。