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 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',
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],
}]
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>