SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="never">
  <title>曲线</title>
  <script src="https://cdns.jsrun.top/res/roshomon/simplegis-umd.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>
  <script>
    // 地图参数
    const mapOptions = {
      "center": [105.080, 36.042],// 地图中心点
      "zoom": 5
    }
    // 初始化地图
    let map = new simplegis.MapX("map", mapOptions)
    // 底图参数
    const baseLayerOptions = {
      "urlTemplate": "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    }
    // 初始化底图
    let baseLayer = new simplegis.TileLayerX("gaodemap", baseLayerOptions)
    // 加载底图
    map.setBaseLayer(baseLayer)

    //// 数据

    // let pointsLayer = new simplegis.VLayer("points", pointsOfCurve, {
    //   style: {
    //     symbol: {
    //       'markerType': 'ellipse',
    //       'markerFill': '#0e595e',
    //       'markerFillOpacity': 0.4,
    //       'markerLineWidth': 2,
    //       'markerLineColor': 'white',
    //     }
    //   }
    // }).addTo(map)


    let symbol = {
      lineColor: 'red',
      lineWidth: 3,
    }



    let arcSymbol = [{
      lineColor: 'green',
      lineWidth: 3,
    },
    {
      textFaceName: 'microsoft yahei',
      textName: '两点弧线(弧度方向依据点连线方向判断)',
      textSize: 12,
      textFill: 'green',
      textOpacity: 1,
      textHaloFill: 'white',
      textHaloRadius: 1,
      textWrapCharacter: '\n',
      textLineSpacing: 0,
      textAlign: 'center', //left | right | center | auto
      textHorizontalAlignment: 'center',
      textDy: -20
    }]
    let arc = new simplegis.ArcCurve([
      [
        111.70898437499999,
        34.59704151614417
      ],
      [
        105.64453124999999,
        34.95799531086792
      ],
    ], { "symbol": arcSymbol });


    let circleSymbol = [{
      "polygonFill": "yellow",
      "polygonOpacity": 0.5,
      "lineColor": 'pink',
      "lineWidth": 3,
      "lineDasharray": [5, 5],// 一对长度值[a,b],其中(a)是划线长度,(b)是间隙长度。对于更复杂的模式,支持两个以上的值。
    }]

    let circle = new simplegis.Circle([109.3359375, 36.03133177633187], 100000, { "symbol": circleSymbol });

    let arcLayer = new simplegis.VectorLayer("curve", null, {
      zIndex: 99
    }).addTo(map)

    arcLayer.addGeometry([arc, circle])




  </script>
</body>

</html>