<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轨迹移动</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css"/>
<script src="https://js.arcgis.com/4.17/"></script>
</head>
<style>
html, body, #mapContainer {
margin: 0px auto;
padding: 0px;
width: 100%;
height: 100%;
}
.btn {
position: absolute;
top: 5%;
right: 2%;
}
</style>
<body>
<div id="mapContainer"></div>
<div class="btn">
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="continue">继续</button>
<button id="back">返回</button>
</div>
</body>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer',
'esri/layers/GraphicsLayer',
"esri/Graphic",
"dojo/domReady!"
], function (Map, MapView, FeatureLayer, GraphicsLayer, Graphic) {
var map = new Map({
basemap: 'satellite'
});
var view = new MapView({
container: 'mapContainer',
center: [115.22908458010747, 32.636000827586614],
zoom: 11,
map: map
});
view.when(function () {
view.on('click', function (evt) {
console.log(evt)
console.log(view)
})
})
const polyline = {
type: 'polyline',
paths: [
[115.21947154300005,32.735979284000052],
[115.22809709000001, 32.746389426000064],
[115.24980967100009, 32.749958617000061],
[115.26616846600007, 32.749363752000079],
[115.29739889100006, 32.74876888700004],
[115.3241678280001, 32.746686858000032],
[115.33398310400003, 32.737763880000045],
[115.33130621100008, 32.713374404000035],
[115.32089606900001, 32.699395071000026],
[115.28279788700002, 32.69116676200008],
[115.22660992600004, 32.703856560000077],
[115.20162558600009, 32.705046291000031],
[115.18913341600012, 32.69047209200005],
[115.19567693300007, 32.66994924100004],
[115.20251788400003, 32.66459545400005],
[115.25516345900007, 32.657457071000067],
[115.35809497600007, 32.659182180000073],
[115.36332979000008, 32.647760767000079],
[115.34572177900009, 32.639670600000045],
[115.29622899000003, 32.63015275600003],
[115.22056213000008, 32.633959893000053],
[115.18344253800001, 32.62682151000007],
[115.17154523300007, 32.603502792000029],
[115.18058718500004, 32.583991212000058],
[115.20628536400011, 32.575425152000037],
[115.26719956500006, 32.575425152000037],
[115.30669861800004, 32.574473368000042],
[115.36095032900005, 32.584942997000041],
[115.38807618500005, 32.611117068000055],
[115.39664224400008, 32.630628648000027],
[115.39664224400008, 32.673934838000037],
[115.3885520770001, 32.702488370000026],
[115.38093780200006, 32.755788297000038],
[115.38046190900002, 32.77625166100006],
[115.36190211400003, 32.794811457000037],
[115.30527094200011, 32.808612331000063],
[115.22436926700004, 32.809564115000057],
[115.14489527000001, 32.793383781000045],
[115.10254086400005, 32.760547219000046],
[115.0863605290001, 32.727710657000046],
[115.08160160700004, 32.694398203000048],
[115.09207123500005, 32.64918844400006],
[115.1030167560001, 32.631104540000024],
[115.14584705400011, 32.64490541400005],
[115.16250328100011, 32.635863462000032],
[115.14203991700003, 32.610165283000072],
[115.11538995300009, 32.588750134000065],
[115.11824530700005, 32.558293033000041],
[115.14299170100003, 32.537353776000032],
[115.19533984300006, 32.530691286000035],
[115.27433794900003, 32.530691286000035],
[115.31526467800006, 32.544492159000072],
[115.32716198300011, 32.579708182000047],
[115.32145127600006, 32.61206885200005],
[115.27528973300002, 32.623490265000044],
[115.24340495500007, 32.632532217000062],
[115.19914698100001, 32.657754503000035],
[115.17154523300007, 32.674886623000077],
[115.16821398800005, 32.684880359000033],
[115.17344880200005, 32.701536586000032],
[115.20485768700007, 32.714385675000074],
[115.15393722200008, 32.741035639000074],
[115.12395601300011, 32.727710657000046],
[115.12205244400002, 32.71057853800005],
[115.13918456300007, 32.711054430000047],
[115.15917203600009, 32.722951735000038],
[115.17297291000011, 32.739132070000039],
[115.18820146000007, 32.74341510000005],
[115.21947154300005, 32.735979284000052]
],
// spatialReference: view.spatialReference
}
//初始化路线符号
var lineSymbol = {
type: 'cim',
data: {
type: 'CIMSymbolReference',
symbol: {
type: 'CIMLineSymbol',
symbolLayers: [{
//箭头符号
type: 'CIMVectorMarker',
enable: true,
size: 4,
markerPlacement: {
type: 'CIMMarkerPlacementAlongLineSameSize',
endings: 'WithMarkers',
placementTemplate: [100] //箭头距离
},
frame: {
xmin: -5,
ymin: -5,
xmax: 5,
ymax: 5
},
//箭头图形
markerGraphics: [{
type: "CIMMarkerGraphic",
geometry: {
rings: [
[
[-8, -5.47],
[-8, 5.6],
[1.96, -0.03],
[-8, -5.47]
]
]
},
symbol: {
//箭头的颜色填充
type: 'CIMPolygonSymbol',
symbolLayers: [{
type: 'CIMSolidFill',
enable: true,
color: [238, 238, 238, 255]
}]
}
}]
}, {
//线符号
type: 'CIMSolidStroke',
enable: true,
width: 3,
color: [103, 165, 245, 255]
}]
- 1
- 2
- 3
- 4
- 5
- 6
前往页