├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── babel.config.js
├── circle.yml
├── demo
    ├── base.html
    ├── brige.html
    ├── coordinate-stop.html
    ├── data
    │   ├── 1.gltf
    │   ├── arrow.png
    │   ├── brige.json
    │   ├── bus-big.json
    │   ├── bus.json
    │   ├── data.js
    │   ├── dayata-road.json
    │   ├── drive.json
    │   ├── drone1.glb
    │   ├── file.glb
    │   ├── grid.png
    │   ├── line.js
    │   ├── poi.png
    │   ├── road.jpg
    │   ├── road.json
    │   ├── route.js
    │   └── siguniang.geojson
    ├── drive.html
    ├── gltf
    │   └── suv.gltf
    ├── gltflayer.html
    ├── identity.html
    ├── index-bak.html
    ├── leaflet.html
    ├── lib
    │   ├── GLTFLoader.js
    │   ├── maptalks.three.min.js
    │   ├── three.min.js
    │   └── tilebelt.js
    ├── map-animation.html
    ├── marker-rotate.html
    ├── old.html
    ├── perf-3d.html
    ├── perf-base.html
    ├── perf-big.html
    ├── real-line.html
    ├── road.html
    ├── route.js
    ├── spring.html
    ├── style.css
    ├── threelayer.html
    ├── traffic.html
    ├── uimarker.html
    ├── update-data.html
    └── util.js
├── index-bak.js
├── index.ts
├── karma.conf.js
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── rollup.config.js
├── test
    └── test.js
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 4
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [{package,bower}.json]
15 | indent_style = space
16 | indent_size = 2
17 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/
2 | demo
3 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "env": {
 4 |     "browser": true,
 5 |     "es6": true
 6 |   },
 7 |   "extends": "eslint:recommended",
 8 |   "parserOptions": {
 9 |     "sourceType": "module"
10 |   },
11 |   "globals": {
12 |   },
13 |   "rules": {
14 |     "no-undef": "off"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .tmp/
 2 | *.gz
 3 | .idea/
 4 | *.iml
 5 | .tern-port
 6 | doc/
 7 | 
 8 | dist/
 9 | 
10 | ### *tags
11 | GPATH
12 | GRTAGS
13 | GTAGS
14 | TAGS
15 | 
16 | ### OSX template
17 | .DS_Store
18 | 
19 | # Created by .ignore support plugin (hsz.mobi)
20 | ### Node template
21 | # Logs
22 | logs
23 | *.log
24 | 
25 | # Runtime data
26 | pids
27 | *.pid
28 | *.seed
29 | 
30 | # Directory for instrumented libs generated by jscoverage/JSCover
31 | lib-cov
32 | 
33 | # Coverage directory used by tools like istanbul
34 | coverage
35 | 
36 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
37 | .grunt
38 | 
39 | # node-waf configuration
40 | .lock-wscript
41 | 
42 | # Compiled binary addons (http://nodejs.org/api/addons.html)
43 | build/Release
44 | 
45 | # Dependency directory
46 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
47 | node_modules
48 | 
49 | #example deploy config
50 | examples/replace.json
51 | *.config
52 | dist
53 | .npmrc
54 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /**/*
2 | dist/*.gz
3 | !dist/*.js
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016-2017 MapTalks
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     'presets': [
 3 |         ['@babel/env', {
 4 |             'loose': true,
 5 |             'modules': false
 6 |         }]
 7 |     ],
 8 |     'plugins': [
 9 |     ],
10 |     'ignore': [
11 |         'dist/*.js'
12 |     ],
13 |     'comments': false
14 | };
15 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | machine:
2 |   node:
3 |     version: 6.9.0
4 | 


--------------------------------------------------------------------------------
/demo/base.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         const map = new maptalks.Map("map", {
 37 |             "center": [120.61158328, 31.36078557], "zoom": 13.867916986432306, "pitch": 74.6, "bearing": 1.5,
 38 |             baseLayer: new maptalks.TileLayer('base', {
 39 |                 urlTemplate:
 40 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 41 |                 subdomains: ['a', 'b', 'c', 'd'],
 42 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 43 |             })
 44 |         });
 45 | 
 46 |         const debugLayer = createDebugLayer(map);
 47 |         let autoUpdateMapCenter = false;
 48 | 
 49 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 50 |         console.log(data);
 51 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 52 |         console.log(player);
 53 | 
 54 |         player.on('playstart playing playend vertex pause time', e => {
 55 |             console.log(e.type);
 56 |         })
 57 | 
 58 |         player.on('playing', e => {
 59 |             if (autoUpdateMapCenter) {
 60 |                 map.setCenter(e.coordinate);
 61 |             }
 62 |             point.setCoordinates(e.coordinate);
 63 |         });
 64 |         let vertexs = [];
 65 |         player.on('vertex', e => {
 66 |             showVertex(e, vertexs, debugLayer);
 67 |         });
 68 | 
 69 |         const line = new maptalks.LineString(player.getCoordinates(), {
 70 |             symbol: {
 71 |                 lineColor: 'red'
 72 |             }
 73 |         }).addTo(debugLayer);
 74 | 
 75 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
 76 |             zIndex: 1
 77 |         }).addTo(debugLayer);
 78 | 
 79 |         function start() {
 80 |             player.play();
 81 |         }
 82 |         function pause() {
 83 |             player.pause();
 84 |         }
 85 | 
 86 |         function finish() {
 87 |             player.finish();
 88 |         }
 89 | 
 90 |         function reset() {
 91 |             player.reset();
 92 |             debugLayer.removeGeometry(vertexs);
 93 |             point.setCoordinates(player.getStartCoordinate());
 94 |             if (autoUpdateMapCenter) {
 95 |                 map.setCenter(player.getStartCoordinate());
 96 |             }
 97 |         }
 98 | 
 99 |         function replay() {
100 |             reset();
101 |             player.replay();
102 |         }
103 | 
104 |         function setIndex() {
105 |             const index = 20;
106 |             player.setIndex(index);
107 |         }
108 | 
109 |         function setTime() {
110 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
111 |             player.setTime(t);
112 |         }
113 | 
114 |         function setPercent() {
115 |             player.setPercent(0.4);
116 |         }
117 | 
118 |         document.querySelector('#speed').addEventListener('change', e => {
119 |             player.setSpeed(parseFloat(e.target.value));
120 |         })
121 |         document.querySelector('#automapcenter').addEventListener('change', e => {
122 |             autoUpdateMapCenter = (e.target.checked);
123 |         })
124 | 
125 |     </script>
126 | </body>
127 | 
128 | </html>


--------------------------------------------------------------------------------
/demo/brige.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script src="https://cdn.jsdelivr.net/npm/gcoord@1.0.5/dist/gcoord.global.min.js"></script>
 12 | <script type='text/javascript' src='./util.js'></script>
 13 | 
 14 | <body>
 15 |     <div class="tools">
 16 |         <div class="item"> <button onclick="start()">play</button></div>
 17 |         <div class="item"> <button onclick="pause()">pause</button></div>
 18 |         <div class="item"> <button onclick="finish()">finish</button></div>
 19 |         <div class="item"> <button onclick="reset()">reset</button></div>
 20 |         <div class="item">
 21 |             <label for="speed">speed</label>
 22 |             <input type="range" id="speed" name="volume" min="1" max="100" value="1" />
 23 |         </div>
 24 |     </div>
 25 |     <div id="map" class="container"></div>
 26 | 
 27 |     <script>
 28 |         const modelOffsetAngle = 90;
 29 |         let autoUpdateMapCenter = false;
 30 |         const map = new maptalks.Map("map", {
 31 |             "center": [120.59008264, 31.27596115], "zoom": 16.754070740314983, "pitch": 60.95000000000009, "bearing": -0.20583227677184368,
 32 |             baseLayer: new maptalks.TileLayer('base', {
 33 |                 urlTemplate:
 34 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 35 |                 subdomains: ['a', 'b', 'c', 'd'],
 36 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 37 |             })
 38 |         });
 39 | 
 40 | 
 41 |         const lineLayer = new maptalks.VectorLayer("line", {
 42 |             enableAltitude: true,
 43 |             geometryEvents: false,
 44 |             forceRenderOnMoving: true,
 45 |             forceRenderOnZooming: true,
 46 |             forceRenderOnRotating: true,
 47 |             // progressiveRender: true,
 48 |             // progressiveRenderCount: 100
 49 |         }).addTo(map);
 50 |         const pointLayer = new maptalks.VectorLayer('point', {
 51 |             enableAltitude: true,
 52 |             // collision: true
 53 |         }).addTo(map);
 54 | 
 55 |         const debugLayer = createDebugLayer(map);
 56 | 
 57 |         const playerList = [];
 58 |         function addLine() {
 59 |             fetch('./data/brige.json').then(res => res.json()).then(geojson => {
 60 | 
 61 |                 geojson.features = geojson.features.filter(f => {
 62 |                     return f.geometry.type === 'LineString';
 63 |                 });
 64 |                 geojson.features.forEach(f => {
 65 |                     f.geometry.coordinates = f.geometry.coordinates.map(c => {
 66 |                         const coord = gcoord.transform(c, gcoord.AMap, gcoord.WGS84);
 67 |                         coord[2] = c[2];
 68 |                         return coord;
 69 |                     })
 70 |                 })
 71 |                 const features = geojson.features;
 72 |                 const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
 73 |                     line.setSymbol({
 74 |                         lineColor: '#fff',
 75 |                         lineWidth: 4
 76 |                     })
 77 |                 }));
 78 |                 lineLayer.addGeometry(lines);
 79 |                 const players = features.map(f => {
 80 |                     const coordinates = f.geometry.coordinates;
 81 |                     const pathLength = geolib.getPathLength(coordinates);
 82 |                     const duration = pathLength * 200;
 83 |                     // console.log(duration);
 84 |                     const data = maptalks.formatRouteData(coordinates, { duration });
 85 |                     return new maptalks.RoutePlayer(data, { speed: 1, debug: true, autoPlay: false });
 86 |                 });
 87 | 
 88 |                 players.forEach(player => {
 89 |                     const info = player.getStartInfo();
 90 |                     const model = new maptalks.Marker(info.coordinate, {
 91 |                         symbol: {
 92 |                             // markerType: 'ellipse',
 93 |                             markerWidth: 30,
 94 |                             markerHeight: 30,
 95 |                             markerFile: './data/poi.png'
 96 |                         }
 97 |                     });
 98 |                     pointLayer.addGeometry(model);
 99 |                     playerList.push({
100 |                         player,
101 |                         model
102 |                     })
103 |                     updateModelPosition(info, model);
104 |                 })
105 |                 listenEvents();
106 |             })
107 | 
108 | 
109 | 
110 |         }
111 |         addLine();
112 | 
113 |         function updateModelPosition(e, model) {
114 |             const { coordinate, rotationZ, rotationX } = e;
115 |             if (!model) {
116 |                 return;
117 |             }
118 |             model.setCoordinates(coordinate);
119 |             // model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
120 |         }
121 | 
122 |         function listenEvents() {
123 |             playerList.forEach(d => {
124 |                 const { player, model } = d;
125 |                 player.on('playstart playing playend vertex pause', e => {
126 |                     // console.log(e.type);
127 |                 })
128 | 
129 |                 player.on('playing', e => {
130 |                     updateModelPosition(e, model);
131 |                     // point.setCoordinates(e.coordinate);
132 |                 });
133 |                 // let vertexs = [];
134 |                 // player.on('vertex', e => {
135 |                 //     showVertex(e, vertexs, debugLayer);
136 |                 // });
137 |             });
138 |         }
139 | 
140 | 
141 |         function start() {
142 |             playerList.forEach(d => {
143 |                 const { player, model } = d;
144 |                 player.play();
145 |             });
146 |         }
147 |         function pause() {
148 |             playerList.forEach(d => {
149 |                 const { player, model } = d;
150 |                 player.pause();
151 |             });
152 |         }
153 | 
154 |         function finish() {
155 |             playerList.forEach(d => {
156 |                 const { player, model } = d;
157 |                 player.finish();
158 |             });
159 |         }
160 | 
161 |         function reset() {
162 | 
163 |             playerList.forEach(d => {
164 |                 const { player, model } = d;
165 |                 player.reset();
166 |                 updateModelPosition(player.getStartInfo(), model);
167 |             });
168 | 
169 | 
170 |         }
171 | 
172 | 
173 |         document.querySelector('#speed').addEventListener('change', e => {
174 |             playerList.forEach(d => {
175 |                 const { player, model } = d;
176 |                 player.setSpeed(parseFloat(e.target.value));
177 |             });
178 | 
179 |         })
180 |     </script>
181 | </body>
182 | 
183 | </html>


--------------------------------------------------------------------------------
/demo/coordinate-stop.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/gcoord@1.0.5/dist/gcoord.global.min.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="1" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         //time unit is second
 37 |         const coordinates = [
 38 |             { "coordinate": [121.62405324867802, 31.15815265075375, 0], "time": 1 },
 39 |             //stop 5s
 40 |             { "coordinate": [121.62405324867802, 31.15815265075375, 0], "time": 6 },
 41 |             { "coordinate": [121.62485215369634, 31.1583001060458, 0], "time": 22 },
 42 |             //stop 10s
 43 |             { "coordinate": [121.62485215369634, 31.1583001060458, 0], "time": 32 },
 44 |             { "coordinate": [121.62598524120608, 31.158516820225344, 0], "time": 50 },
 45 |             { "coordinate": [121.62614450004958, 31.15855033268312, 0], "time": 60 },
 46 |             { "coordinate": [121.6261732188575, 31.15833808691721, 0], "time": 100 },
 47 |             { "coordinate": [121.62623587807457, 31.15799402434996, 0], "time": 130 },
 48 |             { "coordinate": [121.6263585857082, 31.157538251233603, 0], "time": 150 },
 49 |             { "coordinate": [121.62645779613536, 31.157120457284492, 0], "time": 170 },
 50 |             { "coordinate": [121.626478682541, 31.157024386757683, 0], "time": 210 },
 51 |             { "coordinate": [121.62720187433865, 31.15716514121729, 0], "time": 245 },
 52 |             { "coordinate": [121.62738201958791, 31.15721429351899, 0], "time": 280 },
 53 |             { "coordinate": [121.62751778122504, 31.156765219269317, 0], "time": 320 },
 54 |             { "coordinate": [121.62671104380456, 31.156602122124497, 0], "time": 365 },
 55 |             { "coordinate": [121.62578159875045, 31.156430087845678, 0], "time": 400 },
 56 |             { "coordinate": [121.62527249261132, 31.156334016618956, 0], "time": 456 },
 57 |             { "coordinate": [121.62515500657923, 31.156304971810385, 0], "time": 500 },
 58 |             { "coordinate": [121.62518372538705, 31.15654626687339, 0], "time": 567 },
 59 |             { "coordinate": [121.62518633618777, 31.156604356333872, 0], "time": 612 }
 60 |         ].map(d => {
 61 |             return {
 62 |                 time: d.time,
 63 |                 coordinate: gcoord.transform(d.coordinate, gcoord.AMap, gcoord.WGS84)
 64 |             }
 65 |         })
 66 | 
 67 |         const map = new maptalks.Map("map", {
 68 |             "center": [121.62113589, 31.15943104], "zoom": 18.83296421092538, "pitch": 47.849999999999994, "bearing": -5.249999999999318,
 69 |             baseLayer: new maptalks.TileLayer('base', {
 70 |                 urlTemplate:
 71 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 72 |                 subdomains: ['a', 'b', 'c', 'd'],
 73 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 74 |             })
 75 |         });
 76 | 
 77 |         const debugLayer = createDebugLayer(map);
 78 |         let autoUpdateMapCenter = false;
 79 | 
 80 |         const data = maptalks.formatRouteData(coordinates, { unitTime: 1000 });
 81 |         console.log(data);
 82 |         const player = new maptalks.RoutePlayer(data, { speed: 1, debug: true });
 83 |         console.log(player);
 84 | 
 85 |         player.on('playstart playing playend vertex pause time', e => {
 86 |             console.log(e.type);
 87 |         })
 88 | 
 89 |         player.on('playing', e => {
 90 |             if (autoUpdateMapCenter) {
 91 |                 map.setCenter(e.coordinate);
 92 |             }
 93 |             point.setCoordinates(e.coordinate);
 94 |         });
 95 |         let vertexs = [];
 96 |         player.on('vertex', e => {
 97 |             showVertex(e, vertexs, debugLayer);
 98 |         });
 99 | 
100 |         const line = new maptalks.LineString(player.getCoordinates(), {
101 |             symbol: {
102 |                 lineColor: 'red'
103 |             }
104 |         }).addTo(debugLayer);
105 | 
106 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
107 |             zIndex: 1
108 |         }).addTo(debugLayer);
109 | 
110 |         function start() {
111 |             player.play();
112 |         }
113 |         function pause() {
114 |             player.pause();
115 |         }
116 | 
117 |         function finish() {
118 |             player.finish();
119 |         }
120 | 
121 |         function reset() {
122 |             player.reset();
123 |             debugLayer.removeGeometry(vertexs);
124 |             point.setCoordinates(player.getStartCoordinate());
125 |             if (autoUpdateMapCenter) {
126 |                 map.setCenter(player.getStartCoordinate());
127 |             }
128 |         }
129 | 
130 |         function replay() {
131 |             reset();
132 |             player.replay();
133 |         }
134 | 
135 |         function setIndex() {
136 |             const index = 20;
137 |             player.setIndex(index);
138 |         }
139 | 
140 |         function setTime() {
141 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
142 |             player.setTime(t);
143 |         }
144 | 
145 |         function setPercent() {
146 |             player.setPercent(0.4);
147 |         }
148 | 
149 |         document.querySelector('#speed').addEventListener('change', e => {
150 |             player.setSpeed(parseFloat(e.target.value));
151 |         })
152 |         document.querySelector('#automapcenter').addEventListener('change', e => {
153 |             autoUpdateMapCenter = (e.target.checked);
154 |         })
155 | 
156 |     </script>
157 | </body>
158 | 
159 | </html>


--------------------------------------------------------------------------------
/demo/data/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/arrow.png


--------------------------------------------------------------------------------
/demo/data/data.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-var */
  2 | var coordinates = [
  3 |     [120.543189862389, 31.35322014824814],
  4 |     [120.54391551057267, 31.35371261270089],
  5 |     [120.54506885867931, 31.354451304544426],
  6 |     [120.54587139673674, 31.35501763102789],
  7 |     [120.54707760663155, 31.355752208849054],
  8 |     [120.54825017720657, 31.356441639795918],
  9 |     [120.54965341740296, 31.357237762100084],
 10 |     [120.55118160364418, 31.35791076744991],
 11 |     [120.55261854668379, 31.358306813092582],
 12 |     [120.55456885954129, 31.35892438695859],
 13 |     [120.55632947631534, 31.359855802165697],
 14 |     [120.55739651678448, 31.360529047629626],
 15 |     [120.5583272131937, 31.361237721856668],
 16 |     [120.55895558146995, 31.36169835723942],
 17 |     [120.55950095770982, 31.361779347842656],
 18 |     [120.55989220588185, 31.36172872872382],
 19 |     [120.56026567004596, 31.361506004277174],
 20 |     [120.56086439830915, 31.36083276580959],
 21 |     [120.56180695072362, 31.359830492091845],
 22 |     [120.56218041488785, 31.359309103054073],
 23 |     [120.56241753499216, 31.3585295451185],
 24 |     [120.56237028513135, 31.357949524158727],
 25 |     [120.5621203930416, 31.357165719008975],
 26 |     [120.56187530656894, 31.35647218963217],
 27 |     [120.56165424818187, 31.355721202348974],
 28 |     [120.56164944256477, 31.355355965928624],
 29 |     [120.56182244478077, 31.35513436111691],
 30 |     [120.56208675372181, 31.354957897652554],
 31 |     [120.56249523117617, 31.354933274817228],
 32 |     [120.56287968054517, 31.355052285128153],
 33 |     [120.56336024225618, 31.355191814266362],
 34 |     [120.56383599835021, 31.355323135619102],
 35 |     [120.56411823174483, 31.35531370115811],
 36 |     [120.56451108319175, 31.355280752400773],
 37 |     [120.56493901066062, 31.355160938640353],
 38 |     [120.56587203284698, 31.35481347787183],
 39 |     [120.56675594860246, 31.354516937062584],
 40 |     [120.56843258245613, 31.353986755709315],
 41 |     [120.5700145110502, 31.35345956676693],
 42 |     [120.57178585016345, 31.352935370285905],
 43 |     [120.57333270273546, 31.352519006427343],
 44 |     [120.57448319625848, 31.35221646750327],
 45 |     [120.57551793890877, 31.351985818362692],
 46 |     [120.57763653064012, 31.351494563762202],
 47 |     [120.57919390601887, 31.351198012486947],
 48 |     [120.5809512147232, 31.350868509973196],
 49 |     [120.58295054797964, 31.35057195672377],
 50 |     [120.58502354088239, 31.350356281045975],
 51 |     [120.58627224726706, 31.350224478999365],
 52 |     [120.5874823700276, 31.350122631836854],
 53 |     [120.59152584231651, 31.349856304834162],
 54 |     [120.59430413211135, 31.349902525810847],
 55 |     [120.59755148381964, 31.349917932798093],
 56 |     [120.60048312077856, 31.3501798511941],
 57 |     [120.60473173926357, 31.350534210215955],
 58 |     [120.60818656066442, 31.350811533736504],
 59 |     [120.61173158627935, 31.350981008818707],
 60 |     [120.6170265736481, 31.35100411903349],
 61 |     [120.62201486668891, 31.350826940574763],
 62 |     [120.62405348192806, 31.35069598236899],
 63 |     [120.62905561628952, 31.350032419603707],
 64 |     [120.62990839532642, 31.34993531589643],
 65 |     [120.63024516959456, 31.34983613848371],
 66 |     [120.63079647383688, 31.349739949917847],
 67 |     [120.63147819413666, 31.349577947900315],
 68 |     [120.63169753023317, 31.349400757874122],
 69 |     [120.63182201828783, 31.349142566095594],
 70 |     [120.63175088225648, 31.34888943621283],
 71 |     [120.6315908261862, 31.348656556118982],
 72 |     [120.63120550601684, 31.34852999060874],
 73 |     [120.63087946587348, 31.34858061683329],
 74 |     [120.63070755379783, 31.348707182275376],
 75 |     [120.6305178577145, 31.348975500449427],
 76 |     [120.63038744165715, 31.349532384782577],
 77 |     [120.63034594563885, 31.350043702948568],
 78 |     [120.63042300967277, 31.350641081047087],
 79 |     [120.63066012977697, 31.351096705859646],
 80 |     [120.63095060190471, 31.351552328464862],
 81 |     [120.63118772200892, 31.351921887401176],
 82 |     [120.63168515539405, 31.35219880544568],
 83 |     [120.63248920420028, 31.352608017684105],
 84 |     [120.63305772355818, 31.35296867784163],
 85 |     [120.63374806849276, 31.353377886729987],
 86 |     [120.63403232817177, 31.35341950109344],
 87 |     [120.63426785761999, 31.35342643681892],
 88 |     [120.63443841342746, 31.353502729765154],
 89 |     [120.63498256767002, 31.35356515122058],
 90 |     [120.63552415947902, 31.353532455415092],
 91 |     [120.63596182529568, 31.35347320158391],
 92 |     [120.63661298663283, 31.35320883788225],
 93 |     [120.63707733938963, 31.3529216833642],
 94 |     [120.6373708957301, 31.352620853881007],
 95 |     [120.63744561916224, 31.35236104582563],
 96 |     [120.63738157050614, 31.352114911216376],
 97 |     [120.63717341237384, 31.351914356613946],
 98 |     [120.63692255513729, 31.35184598562907],
 99 |     [120.63660764924475, 31.351841427561652],
100 |     [120.63636746678435, 31.35201463396865],
101 |     [120.63623403208419, 31.352383836034647],
102 |     [120.63633544245636, 31.352689224302623],
103 |     [120.63650090148462, 31.3529216833642],
104 |     [120.63683181954116, 31.353199721879236],
105 |     [120.63742426961016, 31.35367375286191],
106 |     [120.63899989912761, 31.35481832702638],
107 |     [120.64019378977923, 31.355581242410636],
108 |     [120.64162320987919, 31.3566631845234],
109 |     [120.64244421131548, 31.357355036087455],
110 |     [120.64279521271169, 31.357767168817503],
111 |     [120.64328515216039, 31.35848527456139],
112 |     [120.64376046655104, 31.359652965234176],
113 |     [120.64456769613616, 31.363272225986208],
114 |     [120.64494602107004, 31.36555252186676],
115 |     [120.64581813599784, 31.36849036625327],
116 |     [120.6465155185075, 31.370868523138512]
117 | ];
118 | function randomAltitude() {
119 |     coordinates.forEach(c => {
120 |         c[2] = 10 + Math.random() * 10;
121 |     });
122 | }
123 | randomAltitude();
124 | 


--------------------------------------------------------------------------------
/demo/data/dayata-road.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "coordinate": [
  4 |             108.95938654017978,
  5 |             34.222197204782304,
  6 |             0
  7 |         ],
  8 |         "name": "西安机场",
  9 |         "altitude": 0,
 10 |         "first": false,
 11 |         "index": 0
 12 |     },
 13 |     {
 14 |         "coordinate": [
 15 |             108.95824204111014,
 16 |             34.221454115365695,
 17 |             15.7006644674145
 18 |         ],
 19 |         "name": "光明堂",
 20 |         "first": true,
 21 |         "altitude": 15.7006644674145,
 22 |         "index": 1
 23 |     },
 24 |     {
 25 |         "coordinate": [
 26 |             108.95807385711807,
 27 |             34.22081071166679,
 28 |             14.562745606454795
 29 |         ],
 30 |         "name": "般若堂",
 31 |         "first": false,
 32 |         "altitude": 14.562745606454795,
 33 |         "index": 2
 34 |     },
 35 |     {
 36 |         "coordinate": [
 37 |             108.9591178892684,
 38 |             34.22070794811486,
 39 |             12.76635404764393
 40 |         ],
 41 |         "name": "慈恩图书馆",
 42 |         "first": false,
 43 |         "altitude": 12.76635404764393,
 44 |         "index": 3
 45 |     },
 46 |     {
 47 |         "coordinate": [
 48 |             108.95947311299972,
 49 |             34.22072939087228,
 50 |             14.153507224617044
 51 |         ],
 52 |         "name": "玄奘三藏院",
 53 |         "first": false,
 54 |         "altitude": 14.153507224617044,
 55 |         "index": 4
 56 |     },
 57 |     {
 58 |         "coordinate": [
 59 |             108.95996507244237,
 60 |             34.22048702107569,
 61 |             12.014150261451913
 62 |         ],
 63 |         "name": "观音殿",
 64 |         "first": false,
 65 |         "altitude": 12.014150261451913,
 66 |         "index": 5
 67 |     },
 68 |     {
 69 |         "coordinate": [
 70 |             108.9596742678301,
 71 |             34.21939635314675,
 72 |             12.113523624485916
 73 |         ],
 74 |         "name": "示现堂",
 75 |         "first": false,
 76 |         "altitude": 12.113523624485916,
 77 |         "index": 6
 78 |     },
 79 |     {
 80 |         "coordinate": [
 81 |             108.95870847743834,
 82 |             34.21943018227864,
 83 |             16.2594208168398
 84 |         ],
 85 |         "name": "财神殿",
 86 |         "first": false,
 87 |         "altitude": 16.2594208168398,
 88 |         "index": 7
 89 |     },
 90 |     {
 91 |         "coordinate": [
 92 |             108.95875732269155,
 93 |             34.21980134414525,
 94 |             15.601194393625194
 95 |         ],
 96 |         "name": "龙爪槐",
 97 |         "first": false,
 98 |         "altitude": 15.601194393625194,
 99 |         "index": 8
100 |     },
101 |     {
102 |         "coordinate": [
103 |             108.95939895814725,
104 |             34.219789170204514,
105 |             64.51090142433875
106 |         ],
107 |         "name": "大雁塔塔顶",
108 |         "first": false,
109 |         "altitude": 64.51090142433875,
110 |         "index": 9
111 |     }
112 | ]


--------------------------------------------------------------------------------
/demo/data/drone1.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/drone1.glb


--------------------------------------------------------------------------------
/demo/data/file.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/file.glb


--------------------------------------------------------------------------------
/demo/data/grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/grid.png


--------------------------------------------------------------------------------
/demo/data/line.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-unused-vars */
  2 | /* eslint-disable no-var */
  3 | var linedata = [
  4 |     [120.09457550602224, 30.17548961580289, 11.862500190734863],
  5 |     [120.0942206093921, 30.175942347662925, 11.375],
  6 |     [120.09342459930065, 30.17639713259686, 12.381250381469727],
  7 |     [120.09243534626148, 30.17689997120911, 12.368749618530273],
  8 |     [120.09211574670212, 30.177181401634897, 25.03125],
  9 |     [120.09189390354663, 30.177671190803295, 21.5],
 10 |     [120.09173278347794, 30.178212067571366, 19.631250381469727],
 11 |     [120.09160697727248, 30.178602953886156, 17.293750762939453],
 12 |     [120.09143648080817, 30.17925539384467, 18.25],
 13 |     [120.09124608441903, 30.17972901817265, 18.581249237060547],
 14 |     [120.09086677072787, 30.180279286735043, 16.78125],
 15 |     [120.09030528186054, 30.18098289290677, 15.731249809265137],
 16 |     [120.08985877045268, 30.181557523685427, 17.162500381469727],
 17 |     [120.08937551343524, 30.182196264600208, 21.6875],
 18 |     [120.08905239392845, 30.182631804120632, 19.637500762939453],
 19 |     [120.08856256846639, 30.183289236860873, 21.318750381469727],
 20 |     [120.08812213297142, 30.183819368522308, 18.193750381469727],
 21 |     [120.08784286947514, 30.18403213526605, 23.793750762939453],
 22 |     [120.08733185630479, 30.184318453665895, 20.78125],
 23 |     [120.08646057542376, 30.18477259779624, 22.912500381469727],
 24 |     [120.08627211756357, 30.18488973112315, 22.912500381469727],
 25 |     [120.08544790519181, 30.185773597069243, 22.34375],
 26 |     [120.08514348297354, 30.186159727086277, 25.174999237060547],
 27 |     [120.08503366422599, 30.186539451322318, 25.174999237060547],
 28 |     [120.08484945465796, 30.18703715817864, 23.225000381469727],
 29 |     [120.08436550260274, 30.188050263650922, 25.862499237060547],
 30 |     [120.08429397058899, 30.188149063653185, 25.862499237060547],
 31 |     [120.08397017805964, 30.1884459290483, 25.46875],
 32 |     [120.08272967302605, 30.189621736667362, 28.950000762939453],
 33 |     [120.08260243906182, 30.18976443131166, 31.600000381469727],
 34 |     [120.08254661792898, 30.189966168956772, 31.600000381469727],
 35 |     [120.08250676354214, 30.190520670919938, 33.181251525878906],
 36 |     [120.08249345466857, 30.19094328458081, 33.11249923706055],
 37 |     [120.08231506462721, 30.191451465901054, 33.16875076293945],
 38 |     [120.08189581812746, 30.192492949062938, 31.487499237060547],
 39 |     [120.08158554734518, 30.193142619649706, 32.54375076293945],
 40 |     [120.08127691897562, 30.193792625560405, 31.881250381469727],
 41 |     [120.08112872402808, 30.194316401318048, 33.98125076293945],
 42 |     [120.08096230120827, 30.194896667200936, 34.868751525878906],
 43 |     [120.08082432990432, 30.195514701284566, 35.087501525878906],
 44 |     [120.08069713063833, 30.196157376987657, 37.537498474121094],
 45 |     [120.08054051312286, 30.196686076641157, 43.17499923706055],
 46 |     [120.08012504899148, 30.19738998419055, 46.26250076293945],
 47 |     [120.07987052281362, 30.197759405400433, 53.33124923706055],
 48 |     [120.07982629660137, 30.197926411861744, 53.33124923706055],
 49 |     [120.0798900872353, 30.19809108192979, 43.525001525878906],
 50 |     [120.08003239996151, 30.19845087008875, 43.525001525878906],
 51 |     [120.08050130989716, 30.19920950426487, 47.5625],
 52 |     [120.08073514132502, 30.19958593368537, 45.849998474121094],
 53 |     [120.08088439119365, 30.199819030432167, 47.693748474121094],
 54 |     [120.08094612684192, 30.200076344892494, 47.693748474121094],
 55 |     [120.08093428163488, 30.20032513974226, 47.693748474121094],
 56 |     [120.08076828079015, 30.2010620860178, 52.5],
 57 |     [120.08066999787502, 30.201473790944277, 52.5],
 58 |     [120.08066782064134, 30.201796235440355, 51.98749923706055],
 59 |     [120.08065084299551, 30.20237280361559, 52.23749923706055],
 60 |     [120.08072584439117, 30.202693342976573, 52.23749923706055],
 61 |     [120.08082983704753, 30.2029408171027, 53.381248474121094],
 62 |     [120.08100060874472, 30.203159477771948, 53.381248474121094],
 63 |     [120.08142906330181, 30.20366799665689, 52.243751525878906],
 64 |     [120.08170830706388, 30.204001281408893, 56.381248474121094],
 65 |     [120.08210447309307, 30.204498464977092, 58.9375],
 66 |     [120.08262019413701, 30.205206879253154, 62.318748474121094],
 67 |     [120.08302582420436, 30.205809270864364, 61.45000076293945],
 68 |     [120.08324618862446, 30.206181958731776, 61.45000076293945],
 69 |     [120.08359879472096, 30.20671648757113, 62.493751525878906],
 70 |     [120.08377756080893, 30.207080433472328, 62.443748474121094],
 71 |     [120.08385543670693, 30.207366035649642, 62.443748474121094],
 72 |     [120.08383410492081, 30.207637066073488, 66.6500015258789],
 73 |     [120.08372450185982, 30.20791267460274, 66.6500015258789],
 74 |     [120.08343897187387, 30.208397076471414, 71.2125015258789],
 75 |     [120.08322228726558, 30.208847079338994, 70.45625305175781],
 76 |     [120.08292611996637, 30.209286938374845, 71.9437484741211],
 77 |     [120.08261921971302, 30.2096515367123, 72.69999694824219],
 78 |     [120.08223915485792, 30.21001949528724, 73.0562515258789],
 79 |     [120.08200392254969, 30.210243351899038, 73.0562515258789],
 80 |     [120.08178686726933, 30.210613332683266, 76.13749694824219],
 81 |     [120.08167747912694, 30.210904185800104, 76.13749694824219],
 82 |     [120.08155678009246, 30.211249137155477, 80.23750305175781],
 83 |     [120.08161702050188, 30.211549270278994, 80.23750305175781],
 84 |     [120.08154416209698, 30.21179358273966, 89.07499694824219],
 85 |     [120.08134089531677, 30.212069651423604, 89.07499694824219],
 86 |     [120.08115101057933, 30.21232434549691, 85.6500015258789],
 87 |     [120.08097709510275, 30.21258922297423, 85.6500015258789],
 88 |     [120.08088803736848, 30.21278561755483, 85.6500015258789],
 89 |     [120.0808506497126, 30.213066061169428, 87.9437484741211],
 90 |     [120.08086340032025, 30.213358360497153, 87.9437484741211],
 91 |     [120.08098404063776, 30.213922056629514, 87.5625],
 92 |     [120.08113847566062, 30.21444581191443, 92.33125305175781],
 93 |     [120.08113519759968, 30.214815232609368, 104.5250015258789],
 94 |     [120.0810914502647, 30.215131560543597, 104.5250015258789],
 95 |     [120.0810208617329, 30.215486292132, 110.4437484741211],
 96 |     [120.08072652786564, 30.21591862813122, 101.41874694824219],
 97 |     [120.08045878694566, 30.21619530532675, 114.26249694824219],
 98 |     [120.08025741015308, 30.216485028355265, 103.1312484741211],
 99 |     [120.08022732410382, 30.216717960797013, 103.1312484741211],
100 |     [120.08029507391211, 30.217037158488296, 104.51249694824219],
101 |     [120.08029714695908, 30.217439908865316, 104.51249694824219],
102 |     [120.08018749759151, 30.217698114111812, 99.25],
103 |     [120.07981548212774, 30.21810678961097, 112.23124694824219],
104 |     [120.07965251486212, 30.218326911813136, 111.8687515258789],
105 |     [120.07958532866166, 30.218667830677674, 111.8687515258789],
106 |     [120.07965241459488, 30.21899894936368, 108.58125305175781],
107 |     [120.07979633524587, 30.219314929430624, 108.58125305175781],
108 |     [120.08001484647752, 30.21958362620009, 110.75],
109 |     [120.08042179928316, 30.220130647441778, 112.69999694824219],
110 |     [120.08070234038973, 30.22054291320572, 124.09375],
111 |     [120.0810004709424, 30.22101248179999, 124.09375],
112 |     [120.08123576033381, 30.22136317346454, 126.3687515258789],
113 |     [120.08146463378773, 30.221527143180282, 132.25625610351562],
114 |     [120.08181453018233, 30.22169276540373, 132.25625610351562],
115 |     [120.08220286450432, 30.2218638515063, 156.0500030517578],
116 |     [120.08248382424767, 30.221952451870806, 156.0500030517578],
117 |     [120.08293143101241, 30.22209885429632, 169.5625],
118 |     [120.08335001604769, 30.222239124315507, 195.36874389648438],
119 |     [120.08366370455906, 30.222347928098117, 204.64999389648438],
120 |     [120.08410495452927, 30.22226984942003, 243.3000030517578],
121 |     [120.08445048468207, 30.222196882882344, 243.3000030517578],
122 |     [120.08490283814024, 30.222067885224618, 287.73126220703125],
123 |     [120.08521965626824, 30.22190351180248, 287.73126220703125],
124 |     [120.08532763517667, 30.22173318938215, 287.73126220703125]
125 | ];
126 | 


--------------------------------------------------------------------------------
/demo/data/poi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/poi.png


--------------------------------------------------------------------------------
/demo/data/road.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptalks/maptalks.routeplayer/24910fc4fb6c8be4761b921aa728add6fee06313/demo/data/road.jpg


--------------------------------------------------------------------------------
/demo/data/route.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-var */
 2 | var route = {
 3 |     path1: [
 4 |         [121.475031060928, 31.2611187865471, 301000, { info: 'test1' }],
 5 |         [121.47940842604, 31.263466566376, 541000, { info: 'test2' }],
 6 |         [121.481768769973, 31.2649338991092, 781000, { info: 'test3' }],
 7 |         [121.483871621841, 31.2638700851521, 901000, { info: 'test4' }],
 8 |         [121.483742875808, 31.2617424212607, 1021000, { info: 'test5' }],
 9 |         [121.486532373184, 31.261925842451, 1201000, { info: 'test6' }],
10 |         [121.48760525679, 31.2623660518534, 1441000, { info: 'test7' }],
11 |         [121.488763971084, 31.2639067685916, 1681000, { info: 'test8' }],
12 |         [121.489665193313, 31.2648238499456, 1981000, { info: 'test9' }],
13 |         [121.491939706557, 31.2642736022027, 2281000, { info: 'test10' }],
14 |         [121.492454690688, 31.2639067685916, 2461000, { info: 'test11' }],
15 |         [121.495458764785, 31.2624761038832, 2641000, { info: 'test12' }],
16 |         [121.49854866957, 31.2622193156141, 2881000, { info: 'test13' }],
17 |         [121.504985971205, 31.2647138006537, 3181000, { info: 'test14' }],
18 |         [121.50696007704, 31.2647504837653, 3481000, { info: 'test15' }],
19 |         [121.514599008314, 31.2629896783252, 3781000, { info: 'test16' }],
20 |         [121.515843553297, 31.2631730970915, 4081000, { info: 'test17' }],
21 |         [121.518976373426, 31.2600916145062, 4321000, { info: 'test18' }],
22 |         [121.520950479261, 31.2580739225948, 4501000, { info: 'test19' }],
23 |         [121.519663018934, 31.2545153426586, 4621000, { info: 'test20' }],
24 |         [121.517216844313, 31.2514702656954, 4801000, { info: 'test21' }],
25 |         [121.515113992445, 31.2515436421988, 5041000, { info: 'test22' }],
26 |         [121.512238664381, 31.2508098745995, 5341000, { info: 'test23' }],
27 |         [121.509921235793, 31.2520205880802, 5521000, { info: 'test24' }],
28 |         [121.504685563796, 31.2512501358434, 5821000, { info: 'test25' }],
29 |         [121.50472847914, 31.2548822127716, 6061000, { info: 'test26' }],
30 |         [121.505329293959, 31.2573768917291, 6361000, { info: 'test27' }],
31 |         [121.505329293959, 31.2595046540352, 6541000, { info: 'test28' }],
32 |         [121.500265283339, 31.2583674077352, 6661000, { info: 'test29' }],
33 |         [121.497990770095, 31.2563863653288, 6901000, { info: 'test30' }],
34 |         [121.494042558425, 31.2556159487204, 7201000, { info: 'test31' }],
35 |         [121.495115442031, 31.2587342628775, 7381000, { info: 'test32' }],
36 |         [121.491639299148, 31.2592478576813, 7501000, { info: 'test33' }],
37 |         [121.488506479018, 31.2584774644276, 7741000, { info: 'test34' }],
38 |         [121.483184976333, 31.2568632867449, 8041000, { info: 'test35' }],
39 |         [121.480695886367, 31.2551390210024, 8281000, { info: 'test36' }],
40 |         [121.482326669448, 31.2515436421988, 8401000, { info: 'test37' }],
41 |         [121.480481309646, 31.2480215057159, 8701000, { info: 'test38' }],
42 |         [121.48112503981, 31.2468474310257, 8881000, { info: 'test39' }],
43 |         [121.482369584793, 31.2454165077606, 9061000, { info: 'test40' }],
44 |         [121.485030336135, 31.2466272903962, 9301000, { info: 'test41' }],
45 |         [121.488978547805, 31.245930175017, 9481000, { info: 'test42' }],
46 |         [121.490866822952, 31.2455265795508, 9721000, { info: 'test43' }]
47 |     ]
48 | };
49 | 
50 | const path0 = route.path1.map(d => {
51 |     const [x, y, t] = d;
52 |     return [x, y, t];
53 | });
54 | 
55 | const path2 = route.path1.map(d => {
56 |     const [x, y, t] = d;
57 |     return [x, y, 20 + Math.random() * 20, t];
58 | });
59 | 
60 | const path3 = route.path1.map(d => {
61 |     const [x, y, t, p] = d;
62 |     return [x, y, 20 + Math.random() * 20, t, p];
63 | });
64 | route.path0 = path0;
65 | route.path2 = path2;
66 | route.path3 = path3;
67 | 


--------------------------------------------------------------------------------
/demo/data/siguniang.geojson:
--------------------------------------------------------------------------------
1 | {
2 | "type": "FeatureCollection",
3 | "name": "siguniang",
4 | "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
5 | "features": [
6 | { "type": "Feature", "properties": { "Name": "Path", "description": null, "timestamp": null, "begin": null, "end": null, "altitudeMode": "clampToGround", "tessellate": -1, "extrude": 0, "visibility": 1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 102.8527267, 31.0061667, 3255.400146 ], [ 102.8530967, 31.00604, 3254.899902000000111 ], [ 102.8537967, 31.0060883, 3256.899902000000111 ], [ 102.8547817, 31.0064133, 3270.100097999999889 ], [ 102.8558183, 31.0071067, 3271.100097999999889 ], [ 102.8575333, 31.00785, 3271.699951 ], [ 102.8588867, 31.0093867, 3278.899902000000111 ], [ 102.8599, 31.0099067, 3281.5 ], [ 102.8605217, 31.01093, 3289.899902000000111 ], [ 102.8613217, 31.0128967, 3298.899902000000111 ], [ 102.863045, 31.014905, 3307.199951 ], [ 102.8638983, 31.016515, 3313.100097999999889 ], [ 102.8639067, 31.01642, 3306.699951 ], [ 102.86423, 31.0168667, 3317.199951 ], [ 102.8645867, 31.017765, 3330.000243999999839 ], [ 102.8655283, 31.0190083, 3314.100342000000182 ], [ 102.86643, 31.0211683, 3324.100097999999889 ], [ 102.8665367, 31.0217183, 3321.300049 ], [ 102.86754, 31.0228467, 3328.399902000000111 ], [ 102.8682333, 31.023345, 3331.699951 ], [ 102.868495, 31.02422, 3338.399902000000111 ], [ 102.86873, 31.0245367, 3336.199951 ], [ 102.8697533, 31.0251667, 3343.100097999999889 ], [ 102.870035, 31.0256033, 3345.800049 ], [ 102.86997, 31.02594, 3350.099854 ], [ 102.870195, 31.0265117, 3357.800049 ], [ 102.8706917, 31.0273617, 3360.300049 ], [ 102.8717183, 31.0284717, 3374.0 ], [ 102.8735067, 31.0298317, 3377.699951 ], [ 102.8744233, 31.0310767, 3382.300049 ], [ 102.8748283, 31.0321567, 3378.699951 ], [ 102.8747833, 31.0328433, 3391.800049 ], [ 102.8756183, 31.0336933, 3406.399902000000111 ], [ 102.875455, 31.034915, 3408.0 ], [ 102.8754967, 31.0361467, 3406.399902000000111 ], [ 102.8759333, 31.037405, 3412.0 ], [ 102.8763117, 31.0379283, 3415.999756000000161 ], [ 102.87597, 31.0385567, 3416.199951 ], [ 102.8757067, 31.0415767, 3399.100097999999889 ], [ 102.87552, 31.0419067, 3415.999756000000161 ], [ 102.8758433, 31.0423217, 3424.100097999999889 ], [ 102.8762517, 31.0425117, 3439.200194999999894 ], [ 102.8762617, 31.04284, 3444.0 ], [ 102.8764567, 31.0430117, 3450.199951 ], [ 102.8766917, 31.0436783, 3461.399902000000111 ], [ 102.8771717, 31.0439417, 3481.399902000000111 ], [ 102.876935, 31.04407, 3486.899902000000111 ], [ 102.8771133, 31.04414, 3494.399902000000111 ], [ 102.8772133, 31.0444317, 3502.300049 ], [ 102.8782383, 31.0450583, 3541.100097999999889 ], [ 102.878835, 31.045955, 3559.100097999999889 ], [ 102.8790667, 31.0470883, 3574.699951 ], [ 102.8792533, 31.0472867, 3574.5 ], [ 102.8790733, 31.04746, 3574.199951 ], [ 102.8791133, 31.0475933, 3575.300049 ], [ 102.879595, 31.0479917, 3586.0 ], [ 102.8803283, 31.0490267, 3626.399902000000111 ], [ 102.8804683, 31.0489483, 3627.600097999999889 ], [ 102.880595, 31.049135, 3626.800049 ], [ 102.8807983, 31.0491317, 3629.199951 ], [ 102.8807333, 31.0493933, 3629.800049 ], [ 102.88088, 31.04944, 3629.100097999999889 ], [ 102.880855, 31.049585, 3628.699951 ], [ 102.8811167, 31.0496783, 3629.0 ], [ 102.8812417, 31.049575, 3629.600097999999889 ], [ 102.8814083, 31.049755, 3632.600097999999889 ], [ 102.881335, 31.0500367, 3634.5 ], [ 102.8811333, 31.0499417, 3638.800049 ], [ 102.88138, 31.05021, 3638.699951 ], [ 102.8812683, 31.0501417, 3639.0 ], [ 102.8813417, 31.0499933, 3637.499756000000161 ], [ 102.8813383, 31.0501217, 3642.600097999999889 ], [ 102.8822067, 31.050155, 3652.599854 ], [ 102.8823317, 31.050305, 3655.699951 ], [ 102.8827433, 31.0501883, 3663.399902000000111 ], [ 102.882945, 31.0503983, 3691.0 ], [ 102.8835383, 31.0504067, 3708.600097999999889 ], [ 102.883635, 31.0504717, 3713.199707000000217 ], [ 102.88357, 31.0509167, 3720.699951 ], [ 102.8834217, 31.0509483, 3723.000243999999839 ], [ 102.8837983, 31.0511317, 3728.600342000000182 ], [ 102.8841217, 31.0509617, 3733.0 ], [ 102.8840783, 31.0516483, 3760.400146 ], [ 102.8844567, 31.0517517, 3780.399902000000111 ], [ 102.8844183, 31.0518767, 3795.699951 ], [ 102.884775, 31.0518117, 3818.499756000000161 ], [ 102.8848583, 31.0522, 3863.0 ], [ 102.885575, 31.051965, 3896.800049 ], [ 102.88583, 31.05217, 3908.600097999999889 ], [ 102.885545, 31.0519417, 3948.100097999999889 ], [ 102.88575, 31.0519467, 3951.500243999999839 ], [ 102.8857867, 31.0521417, 3960.899902000000111 ], [ 102.8861367, 31.0522567, 3973.300292999999783 ], [ 102.8862617, 31.052715, 3985.5 ], [ 102.8865033, 31.0528033, 3996.699707000000217 ], [ 102.8865233, 31.0531233, 4007.399902000000111 ], [ 102.886855, 31.053565, 4025.600097999999889 ], [ 102.8878733, 31.0542133, 4081.300049 ], [ 102.888465, 31.0543383, 4096.399902000000111 ], [ 102.8887633, 31.05476, 4105.5 ], [ 102.8889883, 31.0546883, 4115.200195000000349 ], [ 102.8891233, 31.0549117, 4131.0 ], [ 102.8893483, 31.0548067, 4143.200195000000349 ], [ 102.8900367, 31.055275, 4164.200195000000349 ], [ 102.8902983, 31.0563283, 4190.399902000000111 ], [ 102.8902633, 31.0578033, 4191.899902000000111 ], [ 102.890535, 31.05789, 4203.200195000000349 ], [ 102.89051, 31.058235, 4225.799804999999651 ], [ 102.8909267, 31.0584983, 4262.799804999999651 ], [ 102.8911817, 31.05891, 4273.899902000000111 ], [ 102.8913883, 31.05877, 4285.0 ], [ 102.8913233, 31.0584617, 4289.399902000000111 ], [ 102.89199, 31.0583817, 4299.0 ], [ 102.8919, 31.058545, 4308.200195000000349 ], [ 102.8920433, 31.05873, 4319.299804999999651 ], [ 102.8924917, 31.05891, 4352.0 ], [ 102.8927133, 31.0588033, 4365.200195000000349 ], [ 102.8930267, 31.059215, 4373.200195000000349 ], [ 102.89327, 31.0590433, 4388.899902000000111 ], [ 102.8934967, 31.0592717, 4391.299804999999651 ], [ 102.8934583, 31.0594417, 4395.899902000000111 ], [ 102.8937567, 31.0595283, 4406.299804999999651 ], [ 102.8940683, 31.0601267, 4421.0 ], [ 102.8943233, 31.06027, 4429.5 ], [ 102.8943667, 31.0605067, 4435.600097999999889 ], [ 102.8941, 31.0606483, 4444.0 ], [ 102.89444, 31.0607917, 4452.799804999999651 ], [ 102.89331, 31.0618433, 4485.899902000000111 ], [ 102.893345, 31.061985, 4489.799804999999651 ], [ 102.8938833, 31.0621483, 4498.399902000000111 ], [ 102.8937483, 31.0619783, 4499.0 ], [ 102.89363, 31.0620033, 4499.399902000000111 ], [ 102.8937967, 31.062175, 4499.799804999999651 ], [ 102.8943467, 31.0621867, 4503.899902000000111 ], [ 102.8943433, 31.062095, 4504.700195000000349 ], [ 102.8943767, 31.0622417, 4504.5 ], [ 102.8948533, 31.062295, 4503.600097999999889 ], [ 102.8957933, 31.0629667, 4506.299804999999651 ], [ 102.8959517, 31.0628633, 4506.399902000000111 ], [ 102.89649, 31.0635683, 4509.799804999999651 ], [ 102.8966483, 31.063565, 4509.399902000000111 ], [ 102.8967717, 31.0639033, 4511.600097999999889 ], [ 102.8974033, 31.0641033, 4518.100097999999889 ], [ 102.8982783, 31.0652517, 4530.399902000000111 ], [ 102.8985533, 31.0661067, 4556.299804999999651 ], [ 102.899115, 31.0666583, 4589.600097999999889 ], [ 102.8990783, 31.0670983, 4620.700195000000349 ], [ 102.8994317, 31.0674483, 4636.0 ], [ 102.8997217, 31.068335, 4650.799804999999651 ], [ 102.9004533, 31.0686783, 4657.799804999999651 ], [ 102.90056, 31.0690317, 4672.100097999999889 ], [ 102.9008217, 31.069215, 4664.5 ], [ 102.9005883, 31.0696883, 4677.399902000000111 ], [ 102.9007033, 31.0700017, 4692.100097999999889 ], [ 102.9013133, 31.070325, 4701.100097999999889 ], [ 102.9020567, 31.0710117, 4716.899902000000111 ], [ 102.902175, 31.0713983, 4738.899902000000111 ], [ 102.9026167, 31.0719533, 4748.0 ], [ 102.903125, 31.0721467, 4758.299804999999651 ], [ 102.9036383, 31.0726467, 4757.299804999999651 ], [ 102.9035233, 31.072715, 4757.399902000000111 ], [ 102.9036517, 31.0728533, 4759.5 ], [ 102.9047917, 31.0735717, 4823.5 ], [ 102.905155, 31.07431, 4862.299804999999651 ], [ 102.9062583, 31.0745867, 4891.799804999999651 ], [ 102.9065483, 31.07534, 4962.100097999999889 ], [ 102.906415, 31.075375, 4966.0 ], [ 102.906495, 31.0755583, 4993.700195000000349 ], [ 102.9062583, 31.0755983, 4994.899902000000111 ], [ 102.9066633, 31.0755817, 4990.700195000000349 ], [ 102.9064633, 31.0757367, 5003.000487999999677 ], [ 102.9069417, 31.0759117, 5031.500487999999677 ], [ 102.9069833, 31.0760817, 5034.899902000000111 ], [ 102.9068167, 31.076175, 5040.100097999999889 ], [ 102.9069583, 31.0762483, 5041.700195000000349 ], [ 102.9070367, 31.0766883, 5058.5 ], [ 102.906675, 31.0769033, 5078.899902000000111 ], [ 102.906895, 31.0768783, 5081.200195000000349 ], [ 102.90672, 31.0772267, 5096.200195000000349 ], [ 102.9071467, 31.0774933, 5137.5 ], [ 102.9072017, 31.07771, 5142.200195000000349 ], [ 102.90558, 31.0791683, 5322.200195000000349 ], [ 102.905505, 31.0793567, 5341.899902000000111 ], [ 102.905815, 31.0797233, 5358.100097999999889 ], [ 102.9054383, 31.07938, 5345.500487999999677 ], [ 102.9055167, 31.07932, 5349.5 ], [ 102.90543, 31.0794, 5349.100097999999889 ] ] } }
7 | ]
8 | }
9 | 


--------------------------------------------------------------------------------
/demo/drive.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <style>
 12 |     .container {
 13 |         width: 100%;
 14 |         height: 100%;
 15 |     }
 16 | 
 17 |     .content {
 18 |         display: none;
 19 |         width: 400px;
 20 |         height: 400px;
 21 |         position: fixed;
 22 |         z-index: 10;
 23 |         top: 0px;
 24 |         right: 0px;
 25 |         overflow: scroll;
 26 |         background-color: white;
 27 |         overflow-x: hidden;
 28 |     }
 29 | 
 30 |     .detail {
 31 |         padding-left: 15px;
 32 |     }
 33 | 
 34 |     .detail>dl {
 35 |         color: '#56565';
 36 |         font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 37 |         font-size: 12px;
 38 |         line-height: 1.5;
 39 | 
 40 | 
 41 |     }
 42 | 
 43 |     .detail>dl>dt {
 44 |         position: relative;
 45 |         margin-left: 5px;
 46 |         line-height: 25px;
 47 |         border-bottom: 1px solid #f0f0f0;
 48 |         cursor: pointer;
 49 |     }
 50 | 
 51 |     .detail>dl>dt:hover {
 52 |         background-color: whitesmoke;
 53 |     }
 54 | 
 55 |     .roadStr {
 56 |         color: '#56565';
 57 |         font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 58 |         font-size: 12px;
 59 |     }
 60 | 
 61 |     .overview {
 62 |         background-color: whitesmoke;
 63 |         padding: 15px;
 64 |     }
 65 | 
 66 |     .icon {
 67 |         height: 30px;
 68 |         width: 30px;
 69 |     }
 70 | 
 71 | 
 72 |     .content::-webkit-scrollbar {
 73 |         width: 5px;
 74 |     }
 75 | 
 76 |     .content::-webkit-scrollbar-thumb {
 77 |         background-color: gray;
 78 |         -webkit-border-radius: 2em;
 79 |         -moz-border-radius: 2em;
 80 |         border-radius: 2em;
 81 |     }
 82 | 
 83 |     .content::-webkit-scrollbar-track {
 84 |         background-color: white;
 85 |         -webkit-border-radius: 2em;
 86 |         -moz-border-radius: 2em;
 87 |         border-radius: 2em;
 88 |     }
 89 | </style>
 90 | 
 91 | <body>
 92 |     <div class="tools">
 93 |         <div class="item"> <button onclick="start()">play</button></div>
 94 |         <div class="item"> <button onclick="pause()">pause</button></div>
 95 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 96 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 97 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 98 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 99 |         <div class="item"> <button onclick="finish()">finish</button></div>
100 |         <div class="item"> <button onclick="reset()">reset</button></div>
101 |         <div class="item">
102 |             <label for="speed">speed</label>
103 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
104 |         </div>
105 |         <div class="item">
106 |             <label for="speed">auto set map center</label>
107 |             <input id="automapcenter" type="checkbox" />
108 |         </div>
109 |     </div>
110 |     <div class="content" id="content">
111 | 
112 | 
113 |         <div class="detail">
114 |             <dl id="roadinfo">
115 |                 <!-- <dt><img src="assets/icons/start.png" class="icon" /> </dt> -->
116 |                 <!-- {pathStr} -->
117 |                 <!-- <dt><img src="assets/icons/end.png"  class="icon"/> </dt> -->
118 |             </dl>
119 |         </div>
120 |     </div>
121 |     <div id="map" class="container"></div>
122 | 
123 |     <script>
124 |         const modelOffsetAngle = 90;
125 |         let autoUpdateMapCenter = false;
126 | 
127 |         const contentDom = document.querySelector('#content');
128 |         const roadinfoDom = document.querySelector('#roadinfo');
129 | 
130 |         const map = new maptalks.Map("map", {
131 |             "center": [116.37986454, 39.86526108], "zoom": 18.640097560172663, "pitch": 67.20000000000061, "bearing": 10.050000000000978,
132 |             baseLayer: new maptalks.TileLayer('base', {
133 |                 urlTemplate: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
134 |                 subdomains: ['a', 'b', 'c', 'd'],
135 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>',
136 |                 maxAvailableZoom: 18,
137 |             })
138 |         });
139 | 
140 | 
141 |         const gltfLayer = new maptalks.GLTFLayer("gltf");
142 |         const lineLayer = new maptalks.LineStringLayer('line');
143 |         // 添加到GroupGLLayer中
144 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
145 |         const sceneConfig = {
146 |             postProcess: {
147 |                 enable: true,
148 |                 antialias: { enable: false }
149 |             }
150 |         };
151 |         const groupLayer = new maptalks.GroupGLLayer('group', [lineLayer, gltfLayer], { sceneConfig });
152 |         groupLayer.addTo(map);
153 | 
154 |         const debugLayer = createDebugLayer(map);
155 | 
156 |         const symbol = {
157 |             url: "./data/1.gltf",
158 |             modelHeight: 20,
159 |             // rotationZ: -45
160 |         };
161 |         const debugStyle = {
162 |             // markerType: 'ellipse',
163 |             // markerWidth: 5,
164 |             // markerHeight: 5,
165 |             textSize: 14,
166 |             textFill: 'blue'
167 |         }
168 | 
169 |         function formatPolyline(polyline) {
170 |             return polyline.split(';').map(c => {
171 |                 return c.split(',').map(v => {
172 |                     return parseFloat(v);
173 |                 })
174 |             })
175 |         }
176 | 
177 |         function mergeLines(steps) {
178 |             const route = [];
179 |             steps.forEach((step, sIndex) => {
180 |                 const { instruction, polyline } = step;
181 |                 let coordinates = formatPolyline(polyline);
182 |                 if (sIndex !== steps.length - 1) {
183 |                     coordinates = coordinates.slice(0, coordinates.length - 1);
184 |                 }
185 |                 coordinates.forEach((c, index) => {
186 |                     if (index === 0) {
187 |                         route.push({
188 |                             coordinate: c,
189 |                             ...step
190 |                         })
191 |                     } else {
192 |                         route.push({
193 |                             coordinate: c,
194 |                         })
195 |                     }
196 |                 });
197 |             });
198 |             return route;
199 |         }
200 | 
201 |         let currentModel, player;
202 |         function addLine() {
203 |             fetch('./data/drive.json').then(res => res.json()).then(json => {
204 |                 const route = mergeLines(json.steps);
205 |                 const data = maptalks.formatRouteData(route, { duration: 1000 * 60 * 100 });
206 |                 console.log(data);
207 |                 player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
208 |                 console.log(player);
209 | 
210 |                 const line = new maptalks.LineString(player.getCoordinates(), {
211 |                     symbol: {
212 |                         lineWidth: 5,
213 |                         lineColor: 'red'
214 |                     }
215 |                 });
216 |                 lineLayer.addGeometry(line);
217 |                 const info = player.getStartInfo();
218 |                 currentModel = new maptalks.GLTFMarker(info.coordinate, {
219 |                     symbol,
220 |                 });
221 |                 gltfLayer.addGeometry(currentModel);
222 |                 updateModelPosition(info)
223 |                 listenEvents();
224 |             })
225 | 
226 |         }
227 |         addLine();
228 | 
229 |         function updateModelPosition(e) {
230 |             const { coordinate, rotationZ, rotationX } = e;
231 |             if (!currentModel) {
232 |                 return;
233 |             }
234 |             currentModel.setCoordinates(coordinate);
235 |             currentModel.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
236 |         }
237 | 
238 |         let vertexs = [];
239 |         let roadData = [];
240 |         function listenEvents() {
241 |             player.on('playstart playing playend vertex pause', e => {
242 |                 console.log(e.type);
243 |             })
244 | 
245 |             player.on('playing', e => {
246 |                 if (autoUpdateMapCenter) {
247 |                     map.setCenter(e.coordinate);
248 |                 }
249 |                 updateModelPosition(e);
250 |             });
251 |             player.on('vertex', e => {
252 |                 showVertex(e, vertexs, debugLayer, debugStyle);
253 |                 showRoadLineInfo(e, roadData)
254 |             });
255 |         }
256 | 
257 |         function showRoadLineInfo(e, roadData) {
258 |             const data = e.data;
259 |             const index = e.index;
260 |             if (!roadData[index]) {
261 |                 roadData[index] = data;
262 |             }
263 |             const infos = roadData.slice(0, index + 1).filter(d => {
264 |                 return !!d.instruction;
265 |             }).map((d, index) => {
266 |                 const { instruction, road } = d;
267 |                 return `<dt >${index}.${instruction}-(${road || ''})</dt>`;
268 |             });
269 |             if (infos.length === 0) {
270 |                 contentDom.style.display = 'none';
271 |                 return;
272 |             }
273 |             contentDom.style.display = 'block';
274 |             roadinfoDom.innerHTML = infos.reverse().join('').toString();
275 |         }
276 | 
277 | 
278 |         function start() {
279 |             player.play();
280 |         }
281 |         function pause() {
282 |             player.pause();
283 |         }
284 | 
285 |         function finish() {
286 |             player.finish();
287 |         }
288 | 
289 |         function reset() {
290 |             player.reset();
291 |             debugLayer.removeGeometry(vertexs);
292 |             roadinfoDom.innerHTML = '';
293 |             contentDom.style.display = 'none';
294 |             if (autoUpdateMapCenter) {
295 |                 map.setCenter(player.getStartCoordinate());
296 |             }
297 |             updateModelPosition(player.getStartInfo());
298 |         }
299 | 
300 |         function replay() {
301 |             reset();
302 |             player.replay();
303 |         }
304 | 
305 |         function setIndex() {
306 |             const index = 20;
307 |             player.setIndex(index);
308 |         }
309 | 
310 |         function setTime() {
311 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
312 |             player.setTime(t);
313 |         }
314 | 
315 |         function setPercent() {
316 |             player.setPercent(0.4);
317 |         }
318 | 
319 |         document.querySelector('#speed').addEventListener('change', e => {
320 |             player.setSpeed(parseFloat(e.target.value));
321 |         })
322 |         document.querySelector('#automapcenter').addEventListener('change', e => {
323 |             autoUpdateMapCenter = (e.target.checked);
324 |         })
325 | 
326 |     </script>
327 | </body>
328 | 
329 | </html>


--------------------------------------------------------------------------------
/demo/gltflayer.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 |         const modelOffsetAngle = 180;
 36 |         let autoUpdateMapCenter = false;
 37 |         const map = new maptalks.Map("map", {
 38 |             "center": [120.54328966, 31.35464419], "zoom": 18.53771555142229, "pitch": 72.0000000000002, "bearing": -15.299999999999274,
 39 |             baseLayer: new maptalks.TileLayer('base', {
 40 |                 urlTemplate:
 41 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 42 |                 subdomains: ['a', 'b', 'c', 'd'],
 43 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 44 |             })
 45 |         });
 46 | 
 47 | 
 48 |         const gltfLayer = new maptalks.GLTFLayer("gltf");
 49 |         const lineLayer = new maptalks.LineStringLayer('line');
 50 |         // 添加到GroupGLLayer中
 51 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 52 |         const sceneConfig = {
 53 |             postProcess: {
 54 |                 enable: true,
 55 |                 antialias: { enable: false }
 56 |             }
 57 |         };
 58 |         const groupLayer = new maptalks.GroupGLLayer('group', [lineLayer, gltfLayer], { sceneConfig });
 59 |         groupLayer.addTo(map);
 60 | 
 61 |         const debugLayer = createDebugLayer(map);
 62 | 
 63 |         /**start**/
 64 |         const symbol = {
 65 |             url: "./data/file.glb",
 66 |             modelHeight: 20,
 67 |             // rotationZ: -45
 68 |         };
 69 | 
 70 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 71 |         console.log(data);
 72 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 73 |         console.log(player);
 74 | 
 75 |         let currentModel;
 76 |         function addLine() {
 77 |             const line = new maptalks.LineString(player.getCoordinates(), {
 78 |                 symbol: {
 79 |                     lineWidth: 5
 80 |                 }
 81 |             });
 82 |             lineLayer.addGeometry(line);
 83 |             const info = player.getStartInfo();
 84 |             currentModel = new maptalks.GLTFMarker(info.coordinate, {
 85 |                 symbol,
 86 |             });
 87 |             gltfLayer.addGeometry(currentModel);
 88 |             updateModelPosition(info)
 89 | 
 90 |         }
 91 |         addLine();
 92 | 
 93 |         function updateModelPosition(e) {
 94 |             const { coordinate, rotationZ, rotationX } = e;
 95 |             if (!currentModel) {
 96 |                 return;
 97 |             }
 98 |             // if (Math.abs(rotationX) > 40) {
 99 |             //     console.log(rotationX);
100 |             // }
101 |             currentModel.setCoordinates(coordinate);
102 |             currentModel.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
103 |         }
104 | 
105 |         player.on('playstart playing playend vertex pause', e => {
106 |             console.log(e.type);
107 |         })
108 | 
109 |         player.on('playing', e => {
110 |             if (autoUpdateMapCenter) {
111 |                 map.setCenter(e.coordinate);
112 |             }
113 |             updateModelPosition(e);
114 |             // point.setCoordinates(e.coordinate);
115 |         });
116 |         let vertexs = [];
117 |         player.on('vertex', e => {
118 |             showVertex(e, vertexs, debugLayer);
119 |         });
120 | 
121 |         function start() {
122 |             player.play();
123 |         }
124 |         function pause() {
125 |             player.pause();
126 |         }
127 | 
128 |         function finish() {
129 |             player.finish();
130 |         }
131 | 
132 |         function reset() {
133 |             player.reset();
134 |             debugLayer.removeGeometry(vertexs);
135 |             if (autoUpdateMapCenter) {
136 |                 map.setCenter(player.getStartCoordinate());
137 |             }
138 |             updateModelPosition(player.getStartInfo());
139 |         }
140 | 
141 |         function replay() {
142 |             reset();
143 |             player.replay();
144 |         }
145 | 
146 |         function setIndex() {
147 |             const index = 20;
148 |             player.setIndex(index);
149 |         }
150 | 
151 |         function setTime() {
152 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
153 |             player.setTime(t);
154 |         }
155 | 
156 |         function setPercent() {
157 |             player.setPercent(0.4);
158 |         }
159 | 
160 |         document.querySelector('#speed').addEventListener('change', e => {
161 |             player.setSpeed(parseFloat(e.target.value));
162 |         })
163 |         document.querySelector('#automapcenter').addEventListener('change', e => {
164 |             autoUpdateMapCenter = (e.target.checked);
165 |         })
166 | 
167 |     </script>
168 | </body>
169 | 
170 | </html>


--------------------------------------------------------------------------------
/demo/identity.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <!-- <script type='text/javascript' src='./data/data.js'></script> -->
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         const geojson = { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [[-11968, 8944], [-1344, 10096], [64, 11568], [5376, 8144], [7648, 4848], [7680, 144], [3808, -4912], [-4064, -6960], [-10464, -7088], [-11648, -5232], [-10048, -3728], [-5856, -2384], [-5088, -304], [-5440, 1616], [-7872, 2352], [-9856, 1840], [-11520, 560], [-13504, 144], [-15296, 2320], [-15968, 3728], [-15232, 5040], [-13760, 5872], [-11904, 5744], [-11488, 4720], [-10016, 4144], [-8000, 5328], [-7584, 6640], [-5728, 8208], [-1248, 7344], [-224, 4048], [-2336, 1200], [480, -272], [3200, 1200], [3520, 2864], [3200, 4400], [1536, 7632]] }, "properties": null };
 37 | 
 38 |         const coordinates = geojson.geometry.coordinates;
 39 |         coordinates.forEach(c => {
 40 |             c[2] = 1000 + Math.random() * 2000
 41 |         });
 42 | 
 43 |         const modelOffsetAngle = 180;
 44 |         let autoUpdateMapCenter = false;
 45 | 
 46 |         const map = new maptalks.Map("map", {
 47 |             center: [0, 0],
 48 |             zoom: 0,
 49 |             spatialReference: {
 50 |                 projection: 'identity',
 51 |                 resolutions: [
 52 |                     32, 16, 8, 4, 2, 1
 53 |                 ],
 54 |                 fullExtent: {
 55 |                     'top': 10000,
 56 |                     'left': -10000,
 57 |                     'bottom': -10000,
 58 |                     'right': 10000
 59 |                 }
 60 |             }
 61 |         });
 62 | 
 63 |         const baseLayer = new maptalks.TileLayer('base', {
 64 |             //other server url
 65 |             //https://github.com/digidem/leaflet-bing-layer
 66 |             urlTemplate: "./data/grid.png",
 67 |             // subdomains: ["t0", "t1", "t2", "t3"],
 68 |             // maxAvailableZoom: 18,
 69 |             // maskClip: true,
 70 |         });
 71 | 
 72 | 
 73 | 
 74 |         const gltfLayer = new maptalks.GLTFLayer("gltf");
 75 | 
 76 |         // 添加到GroupGLLayer中
 77 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 78 |         const sceneConfig = {
 79 |             postProcess: {
 80 |                 enable: true,
 81 |                 antialias: { enable: false }
 82 |             }
 83 |         };
 84 | 
 85 | 
 86 | 
 87 |         const groupLayer = new maptalks.GroupGLLayer('group', [baseLayer, gltfLayer], { sceneConfig });
 88 |         groupLayer.addTo(map);
 89 | 
 90 |         const debugLayer = createDebugLayer(map);
 91 | 
 92 |         /**start**/
 93 |         const symbol = {
 94 |             url: "./data/file.glb",
 95 |             modelHeight: 2000,
 96 |             // rotationZ: -45
 97 |         };
 98 | 
 99 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10, isCartesian: true });
100 |         console.log(data);
101 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true, isCartesian: true });
102 |         console.log(player);
103 | 
104 |         let currentModel;
105 |         function addLine() {
106 |             const line = new maptalks.LineString(player.getCoordinates(), {
107 |                 symbol: {
108 |                     lineWidth: 5
109 |                 }
110 |             });
111 |             debugLayer.addGeometry(line);
112 |             const info = player.getStartInfo();
113 |             currentModel = new maptalks.GLTFMarker(info.coordinate, {
114 |                 symbol,
115 |             });
116 |             gltfLayer.addGeometry(currentModel);
117 |             updateModelPosition(info)
118 | 
119 |         }
120 |         addLine();
121 | 
122 |         function updateModelPosition(e) {
123 |             const { coordinate, rotationZ, rotationX } = e;
124 |             if (!currentModel) {
125 |                 return;
126 |             }
127 |             // if (Math.abs(rotationX) > 40) {
128 |             //     console.log(rotationX);
129 |             // }
130 |             currentModel.setCoordinates(coordinate);
131 |             currentModel.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
132 |         }
133 | 
134 |         player.on('playstart playing playend vertex pause', e => {
135 |             console.log(e.type);
136 |         })
137 | 
138 |         player.on('playing', e => {
139 |             if (autoUpdateMapCenter) {
140 |                 map.setCenter(e.coordinate);
141 |             }
142 |             updateModelPosition(e);
143 |             // point.setCoordinates(e.coordinate);
144 |         });
145 |         let vertexs = [];
146 |         player.on('vertex', e => {
147 |             showVertex(e, vertexs, debugLayer);
148 |         });
149 | 
150 |         function start() {
151 |             player.play();
152 |         }
153 |         function pause() {
154 |             player.pause();
155 |         }
156 | 
157 |         function finish() {
158 |             player.finish();
159 |         }
160 | 
161 |         function reset() {
162 |             player.reset();
163 |             debugLayer.removeGeometry(vertexs);
164 |             if (autoUpdateMapCenter) {
165 |                 map.setCenter(player.getStartCoordinate());
166 |             }
167 |             updateModelPosition(player.getStartInfo());
168 |         }
169 | 
170 |         function replay() {
171 |             reset();
172 |             player.replay();
173 |         }
174 | 
175 |         function setIndex() {
176 |             const index = 20;
177 |             player.setIndex(index);
178 |         }
179 | 
180 |         function setTime() {
181 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
182 |             player.setTime(t);
183 |         }
184 | 
185 |         function setPercent() {
186 |             player.setPercent(0.4);
187 |         }
188 | 
189 |         document.querySelector('#speed').addEventListener('change', e => {
190 |             player.setSpeed(parseFloat(e.target.value));
191 |         })
192 |         document.querySelector('#automapcenter').addEventListener('change', e => {
193 |             autoUpdateMapCenter = (e.target.checked);
194 |         })
195 | 
196 | 
197 | 
198 |     </script>
199 | </body>
200 | 
201 | </html>


--------------------------------------------------------------------------------
/demo/index-bak.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="UTF-8" />
  5 |         <title>routeplayer demo</title>
  6 |         <script src="https://unpkg.com/jquery@<3.3.1/dist/jquery.min.js"></script>
  7 |         <script src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  8 |         <script type="text/javascript" src="https://unpkg.com/@maptalks/gl-layers/dist/maptalks-gl-layers.js"></script>
  9 |         <script src="https://unpkg.com/maptalks.routeplayer/dist/maptalks.routeplayer.js"></script>
 10 |         <link
 11 |             type="text/css"
 12 |             rel="stylesheet"
 13 |             href="https://unpkg.com/maptalks/dist/maptalks.css"
 14 |         />
 15 |         <script src="route.js"></script>
 16 |         <style>
 17 |             html,
 18 |             body {
 19 |                 margin: 0px;
 20 |                 height: 100%;
 21 |                 width: 100%;
 22 |             }
 23 |             #map {
 24 |                 width: 90%;
 25 |                 height: 100%;
 26 |                 float: left;
 27 |             }
 28 |             #control {
 29 |                 width: 10%;
 30 |                 height: 100%;
 31 |                 float: right;
 32 |             }
 33 |             a {
 34 |                 color: #0077ff;
 35 |             }
 36 |         </style>
 37 |     </head>
 38 |     <body>
 39 |         <div id="map"></div>
 40 |         <div id="control">
 41 |             <a href="javascript:play();">Play</a><br />
 42 |             <a href="javascript:pause();">Pause</a><br />
 43 |             <a href="javascript:cancel();">Cancel</a><br />
 44 |             <a href="javascript:finish();">Finish</a><br />
 45 |             <a href="javascript:speed(0.5);">0.5X</a><br />
 46 |             <a href="javascript:speed(1);">1X</a><br />
 47 |             <a href="javascript:speed(2);">2X</a><br />
 48 |             <a href="javascript:speed(4);">4X</a><br />
 49 |             <span id="info">current info: </span><br />
 50 |             <label>
 51 |                 <input type="checkbox" id="showRoute" checked />
 52 |                 showRoutes
 53 |             </label><br />
 54 |             <label>
 55 |                 <input type="checkbox" id="showTrail" checked />
 56 |                 showTrail
 57 |             </label>
 58 |         </div>
 59 |         <script>
 60 |             const map = new maptalks.Map("map", {
 61 |                 center: [121.505, 31.2611],
 62 |                 zoom: 14,
 63 |                 attributionControl: {
 64 |                     content:
 65 |                         '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
 66 |                 },
 67 |                 baseLayer: new maptalks.TileLayer("base", {
 68 |                     urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
 69 |                     subdomains: ["a","b","c","d"]
 70 |                 })
 71 |             });
 72 |             route.path.forEach(c => {
 73 |                 c[4] = c[3];
 74 |                 c[3] = c[2];
 75 |                 c[2] = Math.random() * 100 + 100;
 76 |             });
 77 |             const groupLayer = new maptalks.GroupGLLayer("group", []).addTo(map);
 78 |             const player = new maptalks.Route3DPlayer(route, groupLayer, {
 79 |                     maxTrailLine: 10,
 80 |                     showTrail: false,
 81 |                     showMarker: false,
 82 |                     lineSymbol: {
 83 |                         lineColor: '#f0f',
 84 |                         lineWidth: 1
 85 |                     }
 86 |                 });
 87 |             const unitTime = player.getUnitTime();
 88 |             const gltflayer = new maptalks.GLTFLayer('gltf').addTo(groupLayer);
 89 |             let gltfmarker = null;
 90 |             player.on("playing", function(param) {
 91 |                 if (
 92 |                     player.getCurrentProperties(0) !== undefined &&
 93 |                     player.getCurrentProperties(0) !== null
 94 |                 ) {
 95 |                     $("#info").text(
 96 |                         "current info: " + player.getCurrentProperties(0).info
 97 |                     );
 98 |                     if (!gltfmarker) {
 99 |                         gltfmarker = new maptalks.GLTFMarker(param.coordinate, {
100 |                             symbol: {
101 |                                 url: 'gltf/suv.gltf',
102 |                                 modelHeight: 100,
103 |                                 rotationZ: param.bearing - 90,
104 |                                 rotationX: -param.pitch
105 |                             }
106 |                         }).addTo(gltflayer);
107 |                     } else {
108 |                         gltfmarker.setCoordinates(param.coordinate);
109 |                         gltfmarker.updateSymbol({
110 |                             rotationZ: param.bearing - 90,
111 |                             rotationX: -param.pitch
112 |                         });
113 |                     }
114 |                 }
115 |             });
116 | 
117 |             player.on('playcancel playfinish', param => {
118 |                 if (gltfmarker) {
119 |                     gltfmarker.setCoordinates(param.coordinate);
120 |                     gltfmarker.updateSymbol({
121 |                         rotationZ: param.bearing - 90,
122 |                         rotationX: -param.pitch
123 |                     });
124 |                 }
125 |             });
126 | 
127 |             $("#showRoute").change(function() {
128 |                 var flag = $(this).is(":checked");
129 |                 if (flag) {
130 |                     player.showRoute();
131 |                 } else {
132 |                     player.hideRoute();
133 |                 }
134 |             });
135 | 
136 |             $("#showTrail").change(function() {
137 |                 var flag = $(this).is(":checked");
138 |                 if (flag) {
139 |                     player.showTrail();
140 |                 } else {
141 |                     player.hideTrail();
142 |                 }
143 |             });
144 | 
145 |             // player.play();
146 | 
147 |             function play() {
148 |                 player.play();
149 |             }
150 | 
151 |             function pause() {
152 |                 player.pause();
153 |             }
154 | 
155 |             function finish() {
156 |                 player.finish();
157 |             }
158 | 
159 |             function cancel() {
160 |                 player.cancel();
161 |             }
162 | 
163 |             function speed(t) {
164 |                 player.setUnitTime(unitTime * t * 0.1);
165 |             }
166 |         </script>
167 |     </body>
168 | </html>
169 | 


--------------------------------------------------------------------------------
/demo/leaflet.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
  7 | <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" rel="stylesheet">
  8 | <link rel="stylesheet" href="./style.css" />
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | <style>
 13 |     .my-div-icon {
 14 |         /* padding: 2px; */
 15 |         background-color: black;
 16 |         color: white;
 17 |         text-align: center;
 18 |         border-radius: 15px;
 19 |         font-size: 10px;
 20 |     }
 21 | </style>
 22 | 
 23 | <body>
 24 |     <div class="tools">
 25 |         <div class="item"> <button onclick="start()">play</button></div>
 26 |         <div class="item"> <button onclick="pause()">pause</button></div>
 27 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 28 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 29 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 30 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 31 |         <div class="item"> <button onclick="finish()">finish</button></div>
 32 |         <div class="item"> <button onclick="reset()">reset</button></div>
 33 |         <div class="item">
 34 |             <label for="speed">speed</label>
 35 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 36 |         </div>
 37 |         <div class="item">
 38 |             <label for="speed">auto set map center</label>
 39 |             <input id="automapcenter" type="checkbox" />
 40 |         </div>
 41 |     </div>
 42 |     <div id="map" class="container"></div>
 43 | 
 44 |     <script>
 45 | 
 46 |         function reverseCoordinates(coordinates) {
 47 |             if (Array.isArray(coordinates[0])) {
 48 |                 return coordinates.map(c => {
 49 |                     return reverseCoordinates(c);
 50 |                 })
 51 |             }
 52 |             const [lng, lat] = coordinates;
 53 |             return [lat, lng];
 54 |         }
 55 |         var map = L.map(document.querySelector('#map'), {
 56 |             zoomControl: false
 57 |         }).setView([120.61158328, 31.36078557].reverse(), 14);
 58 | 
 59 |         L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
 60 |             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 61 |         }).addTo(map);
 62 | 
 63 | 
 64 |         // const debugLayer = createDebugLayer(map);
 65 |         let autoUpdateMapCenter = false;
 66 | 
 67 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 68 |         console.log(data);
 69 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 70 |         console.log(player);
 71 | 
 72 |         player.on('playstart playing playend vertex pause time', e => {
 73 |             console.log(e.type);
 74 |         })
 75 | 
 76 |         player.on('playing', e => {
 77 |             if (autoUpdateMapCenter) {
 78 |                 map.setView(reverseCoordinates(e.coordinate));
 79 |             }
 80 |             point.setLatLng(reverseCoordinates(e.coordinate));
 81 |         });
 82 |         let vertexs = [];
 83 | 
 84 |         function removePoints(points) {
 85 |             points.forEach(point => {
 86 |                 point.remove();
 87 |             });
 88 |         }
 89 | 
 90 | 
 91 |         function showVertex(e, vertexs) {
 92 |             const data = e.data;
 93 |             const index = e.index;
 94 |             console.log(index);
 95 |             if (!vertexs[index]) {
 96 |                 const coordinate = data.coordinate;
 97 |                 var myIcon = L.divIcon({ className: 'my-div-icon', html: index + '', iconSize: [15, 15], });
 98 |                 const point = L.marker(reverseCoordinates(coordinate), {
 99 |                     icon: myIcon
100 |                 });
101 |                 vertexs[index] = point;
102 |             }
103 |             const point = vertexs[index];
104 |             if (!point._map) {
105 |                 point.addTo(map);
106 |             }
107 | 
108 |             const needRemoves = vertexs.slice(index + 1, Infinity);
109 |             if (needRemoves.length) {
110 |                 removePoints(needRemoves);
111 |             }
112 |         }
113 | 
114 |         player.on('vertex', e => {
115 |             showVertex(e, vertexs);
116 |         });
117 | 
118 |         const line = L.polyline(reverseCoordinates(player.getCoordinates())).addTo(map);
119 | 
120 |         const point = L.marker(reverseCoordinates(player.getStartCoordinate())).addTo(map);
121 | 
122 |         function start() {
123 |             player.play();
124 |         }
125 |         function pause() {
126 |             player.pause();
127 |         }
128 | 
129 |         function finish() {
130 |             player.finish();
131 |         }
132 | 
133 |         function reset() {
134 |             player.reset();
135 |             removePoints(vertexs);
136 |             point.setLatLng(reverseCoordinates(player.getStartCoordinate()));
137 |             if (autoUpdateMapCenter) {
138 |                 map.setView(reverseCoordinates(player.getStartCoordinate()));
139 |             }
140 |         }
141 | 
142 |         function replay() {
143 |             reset();
144 |             player.replay();
145 |         }
146 | 
147 |         function setIndex() {
148 |             const index = 20;
149 |             player.setIndex(index);
150 |         }
151 | 
152 |         function setTime() {
153 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
154 |             player.setTime(t);
155 |         }
156 | 
157 |         function setPercent() {
158 |             player.setPercent(0.4);
159 |         }
160 | 
161 |         document.querySelector('#speed').addEventListener('change', e => {
162 |             player.setSpeed(parseFloat(e.target.value));
163 |         })
164 |         document.querySelector('#automapcenter').addEventListener('change', e => {
165 |             autoUpdateMapCenter = (e.target.checked);
166 |         })
167 | 
168 |     </script>
169 | </body>
170 | 
171 | </html>


--------------------------------------------------------------------------------
/demo/lib/tilebelt.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var d2r = Math.PI / 180,
  3 |     r2d = 180 / Math.PI;
  4 | 
  5 | /**
  6 | * Get the bbox of a tile
  7 | *
  8 | * @name tileToBBOX
  9 | * @param {Array<number>} tile
 10 | * @returns {Array<number>} bbox
 11 | * @example
 12 | * var bbox = tileToBBOX([5, 10, 10])
 13 | * //=bbox
 14 | */
 15 | function tileToBBOX(tile) {
 16 |     var e = tile2lon(tile[0] + 1, tile[2]);
 17 |     var w = tile2lon(tile[0], tile[2]);
 18 |     var s = tile2lat(tile[1] + 1, tile[2]);
 19 |     var n = tile2lat(tile[1], tile[2]);
 20 |     return [w, s, e, n];
 21 | }
 22 | 
 23 | /**
 24 | * Get a geojson representation of a tile
 25 | *
 26 | * @name tileToGeoJSON
 27 | * @param {Array<number>} tile
 28 | * @returns {Feature<Polygon>}
 29 | * @example
 30 | * var poly = tileToGeoJSON([5, 10, 10])
 31 | * //=poly
 32 | */
 33 | function tileToGeoJSON(tile) {
 34 |     var bbox = tileToBBOX(tile);
 35 |     var poly = {
 36 |         type: 'Polygon',
 37 |         coordinates: [[
 38 |             [bbox[0], bbox[3]],
 39 |             [bbox[0], bbox[1]],
 40 |             [bbox[2], bbox[1]],
 41 |             [bbox[2], bbox[3]],
 42 |             [bbox[0], bbox[3]]
 43 |         ]]
 44 |     };
 45 |     return poly;
 46 | }
 47 | 
 48 | function tile2lon(x, z) {
 49 |     return x / Math.pow(2, z) * 360 - 180;
 50 | }
 51 | 
 52 | function tile2lat(y, z) {
 53 |     var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
 54 |     return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
 55 | }
 56 | 
 57 | /**
 58 | * Get the tile for a point at a specified zoom level
 59 | *
 60 | * @name pointToTile
 61 | * @param {number} lon
 62 | * @param {number} lat
 63 | * @param {number} z
 64 | * @returns {Array<number>} tile
 65 | * @example
 66 | * var tile = pointToTile(1, 1, 20)
 67 | * //=tile
 68 | */
 69 | function pointToTile(lon, lat, z) {
 70 |     var tile = pointToTileFraction(lon, lat, z);
 71 |     tile[0] = Math.floor(tile[0]);
 72 |     tile[1] = Math.floor(tile[1]);
 73 |     return tile;
 74 | }
 75 | 
 76 | /**
 77 | * Get the 4 tiles one zoom level higher
 78 | *
 79 | * @name getChildren
 80 | * @param {Array<number>} tile
 81 | * @returns {Array<Array<number>>} tiles
 82 | * @example
 83 | * var tiles = getChildren([5, 10, 10])
 84 | * //=tiles
 85 | */
 86 | function getChildren(tile) {
 87 |     return [
 88 |         [tile[0] * 2, tile[1] * 2, tile[2] + 1],
 89 |         [tile[0] * 2 + 1, tile[1] * 2, tile[2] + 1],
 90 |         [tile[0] * 2 + 1, tile[1] * 2 + 1, tile[2] + 1],
 91 |         [tile[0] * 2, tile[1] * 2 + 1, tile[2] + 1]
 92 |     ];
 93 | }
 94 | 
 95 | /**
 96 | * Get the tile one zoom level lower
 97 | *
 98 | * @name getParent
 99 | * @param {Array<number>} tile
100 | * @returns {Array<number>} tile
101 | * @example
102 | * var tile = getParent([5, 10, 10])
103 | * //=tile
104 | */
105 | function getParent(tile) {
106 |     return [tile[0] >> 1, tile[1] >> 1, tile[2] - 1];
107 | }
108 | 
109 | function getSiblings(tile) {
110 |     return getChildren(getParent(tile));
111 | }
112 | 
113 | /**
114 | * Get the 3 sibling tiles for a tile
115 | *
116 | * @name getSiblings
117 | * @param {Array<number>} tile
118 | * @returns {Array<Array<number>>} tiles
119 | * @example
120 | * var tiles = getSiblings([5, 10, 10])
121 | * //=tiles
122 | */
123 | function hasSiblings(tile, tiles) {
124 |     var siblings = getSiblings(tile);
125 |     for (var i = 0; i < siblings.length; i++) {
126 |         if (!hasTile(tiles, siblings[i])) return false;
127 |     }
128 |     return true;
129 | }
130 | 
131 | /**
132 | * Check to see if an array of tiles contains a particular tile
133 | *
134 | * @name hasTile
135 | * @param {Array<Array<number>>} tiles
136 | * @param {Array<number>} tile
137 | * @returns {boolean}
138 | * @example
139 | * var tiles = [
140 | *     [0, 0, 5],
141 | *     [0, 1, 5],
142 | *     [1, 1, 5],
143 | *     [1, 0, 5]
144 | * ]
145 | * hasTile(tiles, [0, 0, 5])
146 | * //=boolean
147 | */
148 | function hasTile(tiles, tile) {
149 |     for (var i = 0; i < tiles.length; i++) {
150 |         if (tilesEqual(tiles[i], tile)) return true;
151 |     }
152 |     return false;
153 | }
154 | 
155 | /**
156 | * Check to see if two tiles are the same
157 | *
158 | * @name tilesEqual
159 | * @param {Array<number>} tile1
160 | * @param {Array<number>} tile2
161 | * @returns {boolean}
162 | * @example
163 | * tilesEqual([0, 1, 5], [0, 0, 5])
164 | * //=boolean
165 | */
166 | function tilesEqual(tile1, tile2) {
167 |     return (
168 |         tile1[0] === tile2[0] &&
169 |         tile1[1] === tile2[1] &&
170 |         tile1[2] === tile2[2]
171 |     );
172 | }
173 | 
174 | /**
175 | * Get the quadkey for a tile
176 | *
177 | * @name tileToQuadkey
178 | * @param {Array<number>} tile
179 | * @returns {string} quadkey
180 | * @example
181 | * var quadkey = tileToQuadkey([0, 1, 5])
182 | * //=quadkey
183 | */
184 | function tileToQuadkey(tile) {
185 |     var index = '';
186 |     for (var z = tile[2]; z > 0; z--) {
187 |         var b = 0;
188 |         var mask = 1 << (z - 1);
189 |         if ((tile[0] & mask) !== 0) b++;
190 |         if ((tile[1] & mask) !== 0) b += 2;
191 |         index += b.toString();
192 |     }
193 |     return index;
194 | }
195 | 
196 | /**
197 | * Get the tile for a quadkey
198 | *
199 | * @name quadkeyToTile
200 | * @param {string} quadkey
201 | * @returns {Array<number>} tile
202 | * @example
203 | * var tile = quadkeyToTile('00001033')
204 | * //=tile
205 | */
206 | function quadkeyToTile(quadkey) {
207 |     var x = 0;
208 |     var y = 0;
209 |     var z = quadkey.length;
210 | 
211 |     for (var i = z; i > 0; i--) {
212 |         var mask = 1 << (i - 1);
213 |         var q = +quadkey[z - i];
214 |         if (q === 1) x |= mask;
215 |         if (q === 2) y |= mask;
216 |         if (q === 3) {
217 |             x |= mask;
218 |             y |= mask;
219 |         }
220 |     }
221 |     return [x, y, z];
222 | }
223 | 
224 | /**
225 | * Get the smallest tile to cover a bbox
226 | *
227 | * @name bboxToTile
228 | * @param {Array<number>} bbox
229 | * @returns {Array<number>} tile
230 | * @example
231 | * var tile = bboxToTile([ -178, 84, -177, 85 ])
232 | * //=tile
233 | */
234 | function bboxToTile(bboxCoords) {
235 |     var min = pointToTile(bboxCoords[0], bboxCoords[1], 32);
236 |     var max = pointToTile(bboxCoords[2], bboxCoords[3], 32);
237 |     var bbox = [min[0], min[1], max[0], max[1]];
238 | 
239 |     var z = getBboxZoom(bbox);
240 |     if (z === 0) return [0, 0, 0];
241 |     var x = bbox[0] >>> (32 - z);
242 |     var y = bbox[1] >>> (32 - z);
243 |     return [x, y, z];
244 | }
245 | 
246 | function getBboxZoom(bbox) {
247 |     var MAX_ZOOM = 28;
248 |     for (var z = 0; z < MAX_ZOOM; z++) {
249 |         var mask = 1 << (32 - (z + 1));
250 |         if (((bbox[0] & mask) !== (bbox[2] & mask)) ||
251 |             ((bbox[1] & mask) !== (bbox[3] & mask))) {
252 |             return z;
253 |         }
254 |     }
255 | 
256 |     return MAX_ZOOM;
257 | }
258 | 
259 | /**
260 | * Get the precise fractional tile location for a point at a zoom level
261 | *
262 | * @name pointToTileFraction
263 | * @param {number} lon
264 | * @param {number} lat
265 | * @param {number} z
266 | * @returns {Array<number>} tile fraction
267 | * var tile = pointToTileFraction(30.5, 50.5, 15)
268 | * //=tile
269 | */
270 | function pointToTileFraction(lon, lat, z) {
271 |     var sin = Math.sin(lat * d2r),
272 |         z2 = Math.pow(2, z),
273 |         x = z2 * (lon / 360 + 0.5),
274 |         y = z2 * (0.5 - 0.25 * Math.log((1 + sin) / (1 - sin)) / Math.PI);
275 | 
276 |     // Wrap Tile X
277 |     x = x % z2;
278 |     if (x < 0) x = x + z2;
279 |     return [x, y, z];
280 | }
281 | 
282 | var tilebelt = {
283 |     tileToGeoJSON: tileToGeoJSON,
284 |     tileToBBOX: tileToBBOX,
285 |     getChildren: getChildren,
286 |     getParent: getParent,
287 |     getSiblings: getSiblings,
288 |     hasTile: hasTile,
289 |     hasSiblings: hasSiblings,
290 |     tilesEqual: tilesEqual,
291 |     tileToQuadkey: tileToQuadkey,
292 |     quadkeyToTile: quadkeyToTile,
293 |     pointToTile: pointToTile,
294 |     bboxToTile: bboxToTile,
295 |     pointToTileFraction: pointToTileFraction
296 | };


--------------------------------------------------------------------------------
/demo/map-animation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script type="text/javascript"
 10 |     src="https://cdn.jsdelivr.net/npm/@maptalks/transcoders.draco/dist/transcoders.draco.js"></script>
 11 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 12 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
 13 | <script type='text/javascript' src='./util.js'></script>
 14 | <script type='text/javascript' src='./data/data.js'></script>
 15 | 
 16 | <body>
 17 |     <div class="tools">
 18 |         <div class="item"> <button onclick="start()">play</button></div>
 19 |         <div class="item"> <button onclick="pause()">pause</button></div>
 20 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 21 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 22 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 23 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 24 |         <div class="item"> <button onclick="finish()">finish</button></div>
 25 |         <div class="item"> <button onclick="reset()">reset</button></div>
 26 |         <div class="item">
 27 |             <label for="speed">speed</label>
 28 |             <input type="range" id="speed" name="volume" min="1" max="100" value="10" />
 29 |         </div>
 30 |         <div class="item">
 31 |             <label for="speed"> map follow</label>
 32 |             <input id="automapcenter" type="checkbox" checked />
 33 |         </div>
 34 |     </div>
 35 |     <div id="map" class="container"></div>
 36 | 
 37 |     <script>
 38 |         const modelOffsetAngle = 180;
 39 |         let autoUpdateMapCenter = true;
 40 |         const map = new maptalks.Map("map", {
 41 |             "center": [108.95937058, 34.22004365], "zoom": 19.101079217065173, "pitch": 70.400000000000006, "bearing": 0,
 42 |             zoomControl: true
 43 |         });
 44 | 
 45 |         const baseLayer = new maptalks.TileLayer('base', {
 46 |             urlTemplate:
 47 |                 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 48 |             subdomains: ['a', 'b', 'c', 'd'],
 49 |             attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>',
 50 |             maxAvailableZoom: 18
 51 |         })
 52 | 
 53 |         const layer = new maptalks.Geo3DTilesLayer("3dtiles", {
 54 |             services: [
 55 |                 {
 56 |                     url: "https://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json",
 57 | 
 58 |                     maximumScreenSpaceError: 1.0,
 59 |                     pointOpacity: 0.5,
 60 |                     pointSize: 3,
 61 |                     heightOffset: -420,
 62 |                 },
 63 |             ],
 64 |         });
 65 | 
 66 |         const gltfLayer = new maptalks.GLTFLayer("gltf");
 67 |         const lineLayer = new maptalks.LineStringLayer('line');
 68 |         const pointLayer = new maptalks.PointLayer('point');
 69 |         // 添加到GroupGLLayer中
 70 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 71 |         const sceneConfig = {
 72 |             postProcess: {
 73 |                 enable: true,
 74 |                 antialias: { enable: false }
 75 |             }
 76 |         };
 77 |         const groupLayer = new maptalks.GroupGLLayer('group', [baseLayer, layer, lineLayer, gltfLayer, pointLayer], { sceneConfig });
 78 |         groupLayer.addTo(map);
 79 | 
 80 |         const debugLayer = createDebugLayer(map);
 81 | 
 82 |         /**start**/
 83 |         const symbol = {
 84 |             url: "./data/drone1.glb",
 85 |             modelHeight: 5,
 86 |             // rotationZ: -45
 87 |         };
 88 |         let player, currentModel, isRotating = false;
 89 |         let vertexs = [];
 90 | 
 91 |         fetch('./data/dayata-road.json').then(res => res.json()).then(json => {
 92 |             const data = maptalks.formatRouteData(json, { duration: 1000 * 60 * 10 });
 93 |             console.log(data);
 94 |             player = new maptalks.RoutePlayer(data, { speed: 10, debug: true });
 95 |             console.log(player);
 96 |             addLine();
 97 |             eventsListen();
 98 | 
 99 |         })
100 | 
101 |         function eventsListen() {
102 |             player.on('playstart playing playend vertex pause', e => {
103 |                 console.log(e.type);
104 |             })
105 | 
106 |             player.on('playing', e => {
107 |                 if (autoUpdateMapCenter && !isRotating) {
108 |                     // map.setCenter(e.coordinate);
109 |                     map.setView({
110 |                         center: e.coordinate,
111 |                         // pitch: e.rotationX
112 |                     })
113 |                 }
114 |                 updateModelPosition(e);
115 |                 // point.setCoordinates(e.coordinate);
116 |             });
117 | 
118 |             player.on('vertex', e => {
119 |                 // console.log(e);
120 |                 showVertex(e, vertexs, debugLayer);
121 |                 const coordinate = e.coordinate;
122 |                 const index = e.index;
123 |                 const item = player.getData()[index + 1];
124 |                 let nextCoordinate;
125 |                 if (item) {
126 |                     nextCoordinate = item.coordinate;
127 |                 }
128 |                 if (nextCoordinate && autoUpdateMapCenter) {
129 |                     isRotating = true;
130 |                     let bearing = geolib.getRhumbLineBearing(coordinate, nextCoordinate);
131 |                     console.log(bearing);
132 |                     if (bearing > 180) {
133 |                         bearing = bearing - 360
134 |                     }
135 | 
136 |                     map.animateTo({
137 |                         bearing,
138 |                         center: coordinate
139 |                     }, {
140 |                         duration: 1000
141 |                     }, frame => {
142 |                         if (frame.state.playState === 'finished') {
143 |                             isRotating = false;
144 |                         }
145 |                     })
146 |                 }
147 |             });
148 |         }
149 | 
150 | 
151 | 
152 |         function addLine() {
153 |             const line = new maptalks.LineString(player.getCoordinates(), {
154 |                 symbol: {
155 |                     lineWidth: 5
156 |                 }
157 |             });
158 |             lineLayer.addGeometry(line);
159 |             const info = player.getStartInfo();
160 |             currentModel = new maptalks.GLTFMarker(info.coordinate, {
161 |                 symbol,
162 |             });
163 |             gltfLayer.addGeometry(currentModel);
164 |             updateModelPosition(info);
165 | 
166 |             const points = player.getData().map(d => {
167 |                 return new maptalks.Marker(d.coordinate, {
168 |                     symbol: {
169 |                         textName: d.name,
170 |                         textFill: '#fff',
171 |                         textHaloFill: '#000',
172 |                         textHaloRadius: 1
173 |                     }
174 |                 })
175 |             });
176 |             pointLayer.addGeometry(points);
177 | 
178 |         }
179 | 
180 |         function updateModelPosition(e) {
181 |             const { coordinate, rotationZ, rotationX } = e;
182 |             if (!currentModel) {
183 |                 return;
184 |             }
185 |             // if (Math.abs(rotationX) > 40) {
186 |             //     console.log(rotationX);
187 |             // }
188 |             currentModel.setCoordinates(coordinate);
189 |             currentModel.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
190 |         }
191 | 
192 | 
193 | 
194 |         function start() {
195 |             player.play();
196 |         }
197 |         function pause() {
198 |             player.pause();
199 |         }
200 | 
201 |         function finish() {
202 |             player.finish();
203 |         }
204 | 
205 |         function reset() {
206 |             player.reset();
207 |             debugLayer.removeGeometry(vertexs);
208 |             if (autoUpdateMapCenter) {
209 |                 map.setCenter(player.getStartCoordinate());
210 |             }
211 |             updateModelPosition(player.getStartInfo());
212 |         }
213 | 
214 |         function replay() {
215 |             reset();
216 |             player.replay();
217 |         }
218 | 
219 |         function setIndex() {
220 |             const index = 20;
221 |             player.setIndex(index);
222 |         }
223 | 
224 |         function setTime() {
225 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
226 |             player.setTime(t);
227 |         }
228 | 
229 |         function setPercent() {
230 |             player.setPercent(0.4);
231 |         }
232 | 
233 |         document.querySelector('#speed').addEventListener('change', e => {
234 |             player.setSpeed(parseFloat(e.target.value));
235 |         })
236 |         document.querySelector('#automapcenter').addEventListener('change', e => {
237 |             autoUpdateMapCenter = (e.target.checked);
238 |         })
239 | 
240 |     </script>
241 | </body>
242 | 
243 | </html>


--------------------------------------------------------------------------------
/demo/marker-rotate.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         const map = new maptalks.Map("map", {
 37 |             "center": [120.61158328, 31.36078557], "zoom": 13.867916986432306, "pitch": 0, "bearing": 1.5,
 38 |             maxPitch: 0,
 39 |             baseLayer: new maptalks.TileLayer('base', {
 40 |                 urlTemplate:
 41 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 42 |                 subdomains: ['a', 'b', 'c', 'd'],
 43 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 44 |             })
 45 |         });
 46 | 
 47 |         const debugLayer = createDebugLayer(map);
 48 |         let autoUpdateMapCenter = false;
 49 | 
 50 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 51 |         console.log(data);
 52 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 53 |         console.log(player);
 54 | 
 55 |         player.on('playstart playing playend vertex pause time', e => {
 56 |             console.log(e.type);
 57 |         })
 58 | 
 59 |         player.on('playing', e => {
 60 |             if (autoUpdateMapCenter) {
 61 |                 map.setCenter(e.coordinate);
 62 |             }
 63 |             // console.log(e);
 64 |             point.setCoordinates(e.coordinate);
 65 |             point.tempInfo = e;
 66 |             updateMarkerRotate();
 67 |         });
 68 |         let vertexs = [];
 69 |         player.on('vertex', e => {
 70 |             showVertex(e, vertexs, debugLayer);
 71 |         });
 72 | 
 73 |         const line = new maptalks.LineString(player.getCoordinates(), {
 74 |             symbol: {
 75 |                 lineColor: 'red'
 76 |             }
 77 |         }).addTo(debugLayer);
 78 | 
 79 | 
 80 | 
 81 |         function getMarkerRotation(rotationZ) {
 82 |             const bearing = map.getBearing();
 83 |             return rotationZ + bearing;
 84 |         }
 85 | 
 86 |         function updateMarkerRotate() {
 87 |             const info = point.tempInfo;
 88 |             point.updateSymbol({
 89 |                 markerRotation: getMarkerRotation(info.rotationZ)
 90 |             })
 91 |         }
 92 | 
 93 |         const info = player.getStartInfo();
 94 |         const point = new maptalks.Marker(info.coordinate, {
 95 |             zIndex: 1,
 96 |             symbol: {
 97 |                 markerFile: './data/arrow.png',
 98 |                 markerWidth: 32,
 99 |                 markerHeight: 32,
100 |                 markerVerticalAlignment: 'middle',
101 |                 markerRotation: getMarkerRotation(info.rotationZ)
102 |             }
103 |         }).addTo(debugLayer);
104 |         point.tempInfo = info;
105 | 
106 |         function start() {
107 |             player.play();
108 |         }
109 |         function pause() {
110 |             player.pause();
111 |         }
112 | 
113 |         function finish() {
114 |             player.finish();
115 |         }
116 | 
117 |         function reset() {
118 |             player.reset();
119 |             debugLayer.removeGeometry(vertexs);
120 |             const info = player.getStartInfo();
121 |             point.setCoordinates(info.coordinate);
122 |             point.tempInfo = info;
123 |             updateMarkerRotate();
124 |             if (autoUpdateMapCenter) {
125 |                 map.setCenter(player.getStartCoordinate());
126 |             }
127 |         }
128 | 
129 |         function replay() {
130 |             reset();
131 |             player.replay();
132 |         }
133 | 
134 |         function setIndex() {
135 |             const index = 20;
136 |             player.setIndex(index);
137 |         }
138 | 
139 |         function setTime() {
140 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
141 |             player.setTime(t);
142 |         }
143 | 
144 |         function setPercent() {
145 |             player.setPercent(0.4);
146 |         }
147 | 
148 |         document.querySelector('#speed').addEventListener('change', e => {
149 |             player.setSpeed(parseFloat(e.target.value));
150 |         })
151 |         document.querySelector('#automapcenter').addEventListener('change', e => {
152 |             autoUpdateMapCenter = (e.target.checked);
153 |         })
154 | 
155 |         map.on('rotate',e=>{
156 |             updateMarkerRotate();
157 |         })
158 | 
159 |     </script>
160 | </body>
161 | 
162 | </html>


--------------------------------------------------------------------------------
/demo/old.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js'></script>
  9 | <script type='text/javascript'
 10 |     src='https://cdn.jsdelivr.net/npm/@maptalks/gl-layers/dist/maptalks-gl-layers.js'></script>
 11 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 12 | <script type='text/javascript' src='./util.js'></script>
 13 | <script type='text/javascript' src='./data/route.js'></script>
 14 | 
 15 | <body>
 16 |     <div class="tools">
 17 |         <div class="item"> <button onclick="start()">play</button></div>
 18 |         <div class="item"> <button onclick="pause()">pause</button></div>
 19 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 20 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 21 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 22 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 23 |         <div class="item"> <button onclick="finish()">finish</button></div>
 24 |         <div class="item"> <button onclick="reset()">reset</button></div>
 25 |         <div class="item">
 26 |             <label for="speed">speed</label>
 27 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 28 |         </div>
 29 |         <div class="item">
 30 |             <label for="speed">auto set map center</label>
 31 |             <input id="automapcenter" type="checkbox" />
 32 |         </div>
 33 |     </div>
 34 |     <div id="map" class="container"></div>
 35 | 
 36 |     <script>
 37 | 
 38 |         const map = new maptalks.Map("map", {
 39 |             "center": [121.48992759, 31.2551853], "zoom": 15.736641076572834, "pitch": 64.50000000000011, "bearing": 5.39999999999975,
 40 |             baseLayer: new maptalks.TileLayer('base', {
 41 |                 urlTemplate:
 42 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 43 |                 subdomains: ['a', 'b', 'c', 'd'],
 44 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 45 |             })
 46 |         });
 47 | 
 48 |         const debugLayer = createDebugLayer(map);
 49 |         let autoUpdateMapCenter = false;
 50 | 
 51 |         const data = maptalks.formatRouteData(route.path3, {});
 52 |         console.log(data);
 53 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true, unitTime: 1 });
 54 |         console.log(player);
 55 | 
 56 |         player.on('playstart playing playend vertex pause time', e => {
 57 |             console.log(e.type);
 58 |         })
 59 | 
 60 |         player.on('playing', e => {
 61 |             if (autoUpdateMapCenter) {
 62 |                 map.setCenter(e.coordinate);
 63 |             }
 64 |             point.setCoordinates(e.coordinate);
 65 |         });
 66 |         let vertexs = [];
 67 |         player.on('vertex', e => {
 68 |             showVertex(e, vertexs, debugLayer);
 69 |         });
 70 | 
 71 |         const line = new maptalks.LineString(player.getCoordinates(), {
 72 |             symbol: {
 73 |                 lineColor: 'red'
 74 |             }
 75 |         }).addTo(debugLayer);
 76 | 
 77 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
 78 |             zIndex: 1
 79 |         }).addTo(debugLayer);
 80 | 
 81 |         function start() {
 82 |             player.play();
 83 |         }
 84 |         function pause() {
 85 |             player.pause();
 86 |         }
 87 | 
 88 |         function finish() {
 89 |             player.finish();
 90 |         }
 91 | 
 92 |         function reset() {
 93 |             player.reset();
 94 |             debugLayer.removeGeometry(vertexs);
 95 |             point.setCoordinates(player.getStartCoordinate());
 96 |             if (autoUpdateMapCenter) {
 97 |                 map.setCenter(player.getStartCoordinate());
 98 |             }
 99 |         }
100 | 
101 |         function replay() {
102 |             reset();
103 |             player.replay();
104 |         }
105 | 
106 |         function setIndex() {
107 |             const index = 20;
108 |             player.setIndex(index);
109 |         }
110 | 
111 |         function setTime() {
112 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
113 |             player.setTime(t);
114 |         }
115 | 
116 |         function setPercent() {
117 |             player.setPercent(0.4);
118 |         }
119 | 
120 |         document.querySelector('#speed').addEventListener('change', e => {
121 |             player.setSpeed(parseFloat(e.target.value));
122 |         })
123 |         document.querySelector('#automapcenter').addEventListener('change', e => {
124 |             autoUpdateMapCenter = (e.target.checked);
125 |         })
126 | 
127 |     </script>
128 | </body>
129 | 
130 | </html>


--------------------------------------------------------------------------------
/demo/perf-3d.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <div class="item"> <button onclick="finish()">finish</button></div>
 18 |         <div class="item"> <button onclick="reset()">reset</button></div>
 19 |         <div class="item">
 20 |             <label for="speed">speed</label>
 21 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 22 |         </div>
 23 |     </div>
 24 |     <div id="map" class="container"></div>
 25 | 
 26 |     <script>
 27 |         const modelOffsetAngle = 90;
 28 |         let autoUpdateMapCenter = false;
 29 |         const map = new maptalks.Map("map", {
 30 |             "center": [116.38743465, 39.95242892], "zoom": 13.949448883332348, "pitch": 65.55000000000048, "bearing": -175.27772664672932,
 31 |             // baseLayer: new maptalks.TileLayer('base', {
 32 |             //     urlTemplate:
 33 |             //         'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 34 |             //     subdomains: ['a', 'b', 'c', 'd'],
 35 |             //     attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 36 |             // })
 37 |         });
 38 | 
 39 | 
 40 |         const gltfLayer = new maptalks.GLTFLayer("gltf", {
 41 |             geometryEvents: false
 42 |         });
 43 |         const lineLayer = new maptalks.LineStringLayer('line');
 44 |         // 添加到GroupGLLayer中
 45 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 46 |         const sceneConfig = {
 47 |             postProcess: {
 48 |                 enable: true,
 49 |                 antialias: { enable: false }
 50 |             }
 51 |         };
 52 |         const groupLayer = new maptalks.GroupGLLayer('group', [lineLayer, gltfLayer], { sceneConfig });
 53 |         groupLayer.addTo(map);
 54 | 
 55 |         const debugLayer = createDebugLayer(map);
 56 | 
 57 |         /**start**/
 58 |         const symbol = {
 59 |             url: "./data/1.gltf",
 60 |             modelHeight: 100,
 61 |             // rotationZ: -45
 62 |         };
 63 | 
 64 | 
 65 | 
 66 |         const playerList = [];
 67 |         let model;
 68 |         function addLine() {
 69 |             fetch('./data/bus.json').then(res => res.json()).then(geojson => {
 70 |                 const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
 71 |                     line.setSymbol({
 72 |                         lineColor: '#000',
 73 |                         lineWidth: 2
 74 |                     })
 75 |                 }));
 76 |                 lineLayer.addGeometry(lines);
 77 |                 const features = geojson.features;
 78 |                 const players = features.map(f => {
 79 |                     const coordinates = f.geometry.coordinates;
 80 |                     const pathLength = geolib.getPathLength(coordinates);
 81 |                     const duration = pathLength * 100;
 82 |                     const data = maptalks.formatRouteData(coordinates, { duration });
 83 |                     return new maptalks.RoutePlayer(data, { speed: 20, debug: true, autoPlay: true });
 84 |                 });
 85 | 
 86 |                 const data = [];
 87 |                 players.forEach((player, index) => {
 88 |                     const info = player.getStartInfo();
 89 |                     data.push({
 90 |                         coordinates: info.coordinate,
 91 |                         // rotationX: info.rotationX,
 92 |                         // rotationZ: info.rotationZ
 93 |                     })
 94 |                     playerList.push({
 95 |                         player,
 96 |                         index
 97 |                     });
 98 |                 })
 99 |                 model = new maptalks.MultiGLTFMarker(data, {
100 |                     symbol
101 |                 }).addTo(gltfLayer);
102 |                 playerList.forEach(d => {
103 |                     const { player, index } = d;
104 |                     updateModelPosition(player.getStartInfo(), index);
105 |                 });
106 |                 listenEvents();
107 |             })
108 | 
109 | 
110 | 
111 |         }
112 |         addLine();
113 | 
114 |         function updateModelPosition(e, index) {
115 |             const { coordinate, rotationZ, rotationX } = e;
116 |             if (!model) {
117 |                 return;
118 |             }
119 |             model.updateData(index, "coordinates", coordinate);
120 |             model.updateData(index, "rotation", [rotationX, 0, rotationZ + modelOffsetAngle]);
121 |             // model.updateData(index, "rotationZ", rotationZ + modelOffsetAngle);
122 |         }
123 | 
124 |         function listenEvents() {
125 |             playerList.forEach(d => {
126 |                 const { player, index } = d;
127 |                 player.on('playstart playing playend vertex pause', e => {
128 |                     // console.log(e.type);
129 |                 })
130 | 
131 |                 player.on('playing', e => {
132 |                     updateModelPosition(e, index);
133 |                 });
134 |                 // let vertexs = [];
135 |                 // player.on('vertex', e => {
136 |                 //     showVertex(e, vertexs, debugLayer);
137 |                 // });
138 |             });
139 |         }
140 | 
141 | 
142 |         function start() {
143 |             playerList.forEach(d => {
144 |                 const { player, index } = d;
145 |                 player.play();
146 |             });
147 |         }
148 |         function pause() {
149 |             playerList.forEach(d => {
150 |                 const { player, index } = d;
151 |                 player.pause();
152 |             });
153 |         }
154 | 
155 |         function finish() {
156 |             playerList.forEach(d => {
157 |                 const { player, index } = d;
158 |                 player.finish();
159 |             });
160 |         }
161 | 
162 |         function reset() {
163 | 
164 |             playerList.forEach(d => {
165 |                 const { player, index } = d;
166 |                 player.reset();
167 | 
168 |                 updateModelPosition(player.getStartInfo(), index);
169 |             });
170 | 
171 | 
172 |         }
173 | 
174 | 
175 |         document.querySelector('#speed').addEventListener('change', e => {
176 |             playerList.forEach(d => {
177 |                 const { player, index } = d;
178 |                 player.setSpeed(parseFloat(e.target.value));
179 |             });
180 | 
181 |         })
182 |     </script>
183 | </body>
184 | 
185 | </html>


--------------------------------------------------------------------------------
/demo/perf-base.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <div class="item"> <button onclick="finish()">finish</button></div>
 18 |         <div class="item"> <button onclick="reset()">reset</button></div>
 19 |         <div class="item">
 20 |             <label for="speed">speed</label>
 21 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 22 |         </div>
 23 |     </div>
 24 |     <div id="map" class="container"></div>
 25 | 
 26 |     <script>
 27 |         const modelOffsetAngle = 90;
 28 |         let autoUpdateMapCenter = false;
 29 |         const map = new maptalks.Map("map", {
 30 |             "center": [116.45033283, 39.9017363], "zoom": 11.747534393964086, "pitch": 61.50000000000047, "bearing": -1.9499999999998183,
 31 |             baseLayer: new maptalks.TileLayer('base', {
 32 |                 urlTemplate:
 33 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 34 |                 subdomains: ['a', 'b', 'c', 'd'],
 35 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 36 |             })
 37 |         });
 38 | 
 39 | 
 40 |         const lineLayer = new maptalks.VectorLayer("line", {
 41 |             geometryEvents: false,
 42 |             forceRenderOnMoving: true,
 43 |             forceRenderOnZooming: true,
 44 |             forceRenderOnRotating: true,
 45 |             progressiveRender: true,
 46 |             progressiveRenderCount: 100
 47 |         }).addTo(map);
 48 |         const pointLayer = new maptalks.VectorLayer('point', {
 49 |             // collision: true
 50 |         }).addTo(map);
 51 |         // 添加到GroupGLLayer中
 52 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 53 |         const sceneConfig = {
 54 |             postProcess: {
 55 |                 enable: true,
 56 |                 antialias: { enable: false }
 57 |             }
 58 |         };
 59 | 
 60 |         const debugLayer = createDebugLayer(map);
 61 | 
 62 |         /**start**/
 63 |         const symbol = {
 64 |             url: "./data/1.gltf",
 65 |             modelHeight: 30,
 66 |             // rotationZ: -45
 67 |         };
 68 | 
 69 | 
 70 | 
 71 |         const playerList = [];
 72 |         function addLine() {
 73 |             fetch('./data/bus.json').then(res => res.json()).then(geojson => {
 74 |                 // console.log(JSON.stringify(geojson))
 75 |                 // const features = data.map(d => {
 76 |                 //     return d.feature;
 77 |                 // })
 78 |                 // const geojson = { type: 'FeatureCollection', features };
 79 |                 const features = geojson.features;
 80 |                 const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
 81 |                     line.setSymbol({
 82 |                         lineColor: '#fff',
 83 |                         lineWidth: 1
 84 |                     })
 85 |                 }));
 86 |                 lineLayer.addGeometry(lines);
 87 |                 const players = features.map(f => {
 88 |                     const coordinates = f.geometry.coordinates;
 89 |                     const pathLength = geolib.getPathLength(coordinates);
 90 |                     const duration = pathLength * 15;
 91 |                     // console.log(duration);
 92 |                     const data = maptalks.formatRouteData(coordinates, { duration });
 93 |                     return new maptalks.RoutePlayer(data, { speed: 10, debug: true, autoPlay: true });
 94 |                 });
 95 | 
 96 |                 players.forEach(player => {
 97 |                     const info = player.getStartInfo();
 98 |                     const model = new maptalks.Marker(info.coordinate, {
 99 |                         symbol: {
100 |                             // markerType: 'ellipse',
101 |                             markerWidth: 30,
102 |                             markerHeight: 30,
103 |                             markerFile: './data/poi.png'
104 |                         }
105 |                     });
106 |                     pointLayer.addGeometry(model);
107 |                     playerList.push({
108 |                         player,
109 |                         model
110 |                     })
111 |                     updateModelPosition(info, model);
112 |                 })
113 |                 listenEvents();
114 |             })
115 | 
116 | 
117 | 
118 |         }
119 |         addLine();
120 | 
121 |         function updateModelPosition(e, model) {
122 |             const { coordinate, rotationZ, rotationX } = e;
123 |             if (!model) {
124 |                 return;
125 |             }
126 |             model.setCoordinates(coordinate);
127 |             // model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
128 |         }
129 | 
130 |         function listenEvents() {
131 |             playerList.forEach(d => {
132 |                 const { player, model } = d;
133 |                 player.on('playstart playing playend vertex pause', e => {
134 |                     // console.log(e.type);
135 |                 })
136 | 
137 |                 player.on('playing', e => {
138 |                     updateModelPosition(e, model);
139 |                     // point.setCoordinates(e.coordinate);
140 |                 });
141 |                 // let vertexs = [];
142 |                 // player.on('vertex', e => {
143 |                 //     showVertex(e, vertexs, debugLayer);
144 |                 // });
145 |             });
146 |         }
147 | 
148 | 
149 |         function start() {
150 |             playerList.forEach(d => {
151 |                 const { player, model } = d;
152 |                 player.play();
153 |             });
154 |         }
155 |         function pause() {
156 |             playerList.forEach(d => {
157 |                 const { player, model } = d;
158 |                 player.pause();
159 |             });
160 |         }
161 | 
162 |         function finish() {
163 |             playerList.forEach(d => {
164 |                 const { player, model } = d;
165 |                 player.finish();
166 |             });
167 |         }
168 | 
169 |         function reset() {
170 | 
171 |             playerList.forEach(d => {
172 |                 const { player, model } = d;
173 |                 player.reset();
174 | 
175 |                 updateModelPosition(player.getStartInfo(), model);
176 |             });
177 | 
178 | 
179 |         }
180 | 
181 | 
182 |         document.querySelector('#speed').addEventListener('change', e => {
183 |             playerList.forEach(d => {
184 |                 const { player, model } = d;
185 |                 player.setSpeed(parseFloat(e.target.value));
186 |             });
187 | 
188 |         })
189 |     </script>
190 | </body>
191 | 
192 | </html>


--------------------------------------------------------------------------------
/demo/perf-big.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <div class="item"> <button onclick="finish()">finish</button></div>
 18 |         <div class="item"> <button onclick="reset()">reset</button></div>
 19 |         <div class="item">
 20 |             <label for="speed">speed</label>
 21 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 22 |         </div>
 23 |     </div>
 24 |     <div id="map" class="container"></div>
 25 | 
 26 |     <script>
 27 |         const modelOffsetAngle = 90;
 28 |         let autoUpdateMapCenter = false;
 29 |         const map = new maptalks.Map("map", {
 30 |             "center": [121.49366811, 31.16693638], "zoom": 11.574666455701587, "pitch": 61.50000000000047, "bearing": -1.9499999999998183,
 31 |             baseLayer: new maptalks.TileLayer('base', {
 32 |                 urlTemplate:
 33 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 34 |                 subdomains: ['a', 'b', 'c', 'd'],
 35 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 36 |             })
 37 |         });
 38 | 
 39 | 
 40 |         const lineLayer = new maptalks.VectorLayer("line", {
 41 |             geometryEvents: false,
 42 |             forceRenderOnMoving: true,
 43 |             forceRenderOnZooming: true,
 44 |             forceRenderOnRotating: true,
 45 |             progressiveRender: true,
 46 |             progressiveRenderCount: 100
 47 |         }).addTo(map);
 48 |         const pointLayer = new maptalks.VectorLayer('point', {
 49 |             // collision: true
 50 |         }).addTo(map);
 51 |         // 添加到GroupGLLayer中
 52 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 53 |         const sceneConfig = {
 54 |             postProcess: {
 55 |                 enable: true,
 56 |                 antialias: { enable: false }
 57 |             }
 58 |         };
 59 | 
 60 |         const debugLayer = createDebugLayer(map);
 61 | 
 62 |         /**start**/
 63 |         const symbol = {
 64 |             url: "./data/1.gltf",
 65 |             modelHeight: 30,
 66 |             // rotationZ: -45
 67 |         };
 68 | 
 69 | 
 70 | 
 71 |         const playerList = [];
 72 |         function addLine() {
 73 |             fetch('./data/bus-big.json').then(res => res.json()).then(data => {
 74 |                 // console.log(JSON.stringify(data));
 75 |                 let coordinateCount = 0;
 76 |                 let page = 1;
 77 |                 const pageSize = 30;
 78 |                 const count = Math.ceil(data.length / pageSize);
 79 |                 const run = () => {
 80 |                     const start = (page - 1) * pageSize, end = page * pageSize;
 81 |                     const list = data.slice(start, end);
 82 |                     page++;
 83 |                     return list.map(d => {
 84 |                         const coordinates = d.coordinates;
 85 |                         coordinateCount += coordinates.length;
 86 |                         const line = new maptalks.LineString(coordinates, {
 87 |                             symbol: {
 88 |                                 lineColor: '#fff',
 89 |                                 lineWidth: 1
 90 |                             }
 91 |                         });
 92 |                         const duration = coordinates.length * 1000 * 10;
 93 |                         // console.log(duration);
 94 |                         const data = maptalks.formatRouteData(coordinates, { duration });
 95 |                         const player = new maptalks.RoutePlayer(data, { speed: 10, debug: true, autoPlay: false });
 96 |                         const info = player.getStartInfo();
 97 |                         const model = new maptalks.Marker(info.coordinate, {
 98 |                             symbol: {
 99 |                                 // markerType: 'ellipse',
100 |                                 markerWidth: 30,
101 |                                 markerHeight: 30,
102 |                                 markerFile: './data/poi.png'
103 |                             }
104 |                         });
105 |                         return {
106 |                             player,
107 |                             line,
108 |                             model
109 |                         }
110 |                     })
111 |                 }
112 |                 const time = 'runTaskAsync';
113 |                 console.time(time);
114 |                 maptalks.MicroTask.runTaskAsync({ run, count }).then(results => {
115 |                     console.timeEnd(time);
116 |                     console.log(results);
117 |                     const lines = [], points = [];
118 |                     results.forEach(result => {
119 |                         result.forEach(d => {
120 |                             const { line, model, player } = d;
121 |                             lines.push(line);
122 |                             points.push(model);
123 |                             playerList.push({
124 |                                 player,
125 |                                 model
126 |                             })
127 |                         });
128 |                     });
129 |                     lineLayer.addGeometry(lines);
130 |                     pointLayer.addGeometry(points);
131 |                     listenEvents();
132 |                     console.log('coordinateCount:', coordinateCount);
133 |                     console.log('line count:', lines.length);
134 |                     playerList.forEach(d => {
135 |                         const { player, model } = d;
136 |                         player.play();
137 |                      
138 |                     });
139 |                 })
140 |             })
141 | 
142 | 
143 | 
144 |         }
145 |         addLine();
146 | 
147 |         function updateModelPosition(e, model) {
148 |             const { coordinate, rotationZ, rotationX } = e;
149 |             if (!model) {
150 |                 return;
151 |             }
152 |             model.setCoordinates(coordinate);
153 |             // model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
154 |         }
155 | 
156 |         function listenEvents() {
157 |             playerList.forEach(d => {
158 |                 const { player, model } = d;
159 |                 player.on('playstart playing playend vertex pause', e => {
160 |                     // console.log(e.type);
161 |                 })
162 | 
163 |                 player.on('playing', e => {
164 |                     updateModelPosition(e, model);
165 |                     // point.setCoordinates(e.coordinate);
166 |                 });
167 |                 // let vertexs = [];
168 |                 // player.on('vertex', e => {
169 |                 //     showVertex(e, vertexs, debugLayer);
170 |                 // });
171 |             });
172 |         }
173 | 
174 | 
175 |         function start() {
176 |             playerList.forEach(d => {
177 |                 const { player, model } = d;
178 |                 player.play();
179 |             });
180 |         }
181 |         function pause() {
182 |             playerList.forEach(d => {
183 |                 const { player, model } = d;
184 |                 player.pause();
185 |             });
186 |         }
187 | 
188 |         function finish() {
189 |             playerList.forEach(d => {
190 |                 const { player, model } = d;
191 |                 player.finish();
192 |             });
193 |         }
194 | 
195 |         function reset() {
196 | 
197 |             playerList.forEach(d => {
198 |                 const { player, model } = d;
199 |                 player.reset();
200 | 
201 |                 updateModelPosition(player.getStartInfo(), model);
202 |             });
203 | 
204 | 
205 |         }
206 | 
207 | 
208 |         document.querySelector('#speed').addEventListener('change', e => {
209 |             playerList.forEach(d => {
210 |                 const { player, model } = d;
211 |                 player.setSpeed(parseFloat(e.target.value));
212 |             });
213 | 
214 |         })
215 |     </script>
216 | </body>
217 | 
218 | </html>


--------------------------------------------------------------------------------
/demo/real-line.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         const map = new maptalks.Map("map", {
 37 |             "center": [120.61158328, 31.36078557], "zoom": 13.867916986432306, "pitch": 74.6, "bearing": 1.5,
 38 |             baseLayer: new maptalks.TileLayer('base', {
 39 |                 urlTemplate:
 40 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 41 |                 subdomains: ['a', 'b', 'c', 'd'],
 42 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 43 |             })
 44 |         });
 45 | 
 46 |         const debugLayer = createDebugLayer(map);
 47 |         let autoUpdateMapCenter = false;
 48 | 
 49 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 50 |         console.log(data);
 51 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 52 |         console.log(player);
 53 | 
 54 |         player.on('playstart playing playend vertex pause time', e => {
 55 |             console.log(e.type);
 56 |         })
 57 | 
 58 |         player.on('playing', e => {
 59 |             if (autoUpdateMapCenter) {
 60 |                 map.setCenter(e.coordinate);
 61 |             }
 62 |             point.setCoordinates(e.coordinate);
 63 |             updateTempLine();
 64 |         });
 65 |         let vertexs = [];
 66 |         player.on('vertex', e => {
 67 |             showVertex(e, vertexs, debugLayer);
 68 |         });
 69 | 
 70 |         const line = new maptalks.LineString(player.getCoordinates(), {
 71 |             symbol: {
 72 |                 lineColor: 'red'
 73 |             }
 74 |         }).addTo(debugLayer);
 75 | 
 76 |         const tempLine = new maptalks.LineString([], {
 77 |             symbol: {
 78 |                 lineColor: 'blue',
 79 |                 lineWidth: 4,
 80 |                 shadowColor: '#fff',
 81 |                 shadowBlur: 5
 82 |             }
 83 |         }).addTo(debugLayer);
 84 | 
 85 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
 86 |             zIndex: 1
 87 |         }).addTo(debugLayer);
 88 | 
 89 | 
 90 |         function updateTempLine() {
 91 |             const coordinates = player.getCurrentVertex().map(item => {
 92 |                 return item.coordinate;
 93 |             })
 94 |             coordinates.push(player.getCurrentCoordinate());
 95 |             tempLine.setCoordinates(coordinates);
 96 | 
 97 |         }
 98 | 
 99 |         function start() {
100 |             player.play();
101 |         }
102 |         function pause() {
103 |             player.pause();
104 |         }
105 | 
106 |         function finish() {
107 |             player.finish();
108 |         }
109 | 
110 |         function reset() {
111 |             player.reset();
112 |             debugLayer.removeGeometry(vertexs);
113 |             tempLine.setCoordinates([]);
114 |             point.setCoordinates(player.getStartCoordinate());
115 |             if (autoUpdateMapCenter) {
116 |                 map.setCenter(player.getStartCoordinate());
117 |             }
118 |         }
119 | 
120 |         function replay() {
121 |             reset();
122 |             player.replay();
123 |         }
124 | 
125 |         function setIndex() {
126 |             const index = 20;
127 |             player.setIndex(index);
128 |         }
129 | 
130 |         function setTime() {
131 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
132 |             player.setTime(t);
133 |         }
134 | 
135 |         function setPercent() {
136 |             player.setPercent(0.4);
137 |         }
138 | 
139 |         document.querySelector('#speed').addEventListener('change', e => {
140 |             player.setSpeed(parseFloat(e.target.value));
141 |         })
142 |         document.querySelector('#automapcenter').addEventListener('change', e => {
143 |             autoUpdateMapCenter = (e.target.checked);
144 |         })
145 | 
146 |     </script>
147 | </body>
148 | 
149 | </html>


--------------------------------------------------------------------------------
/demo/road.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <div class="item"> <button onclick="finish()">finish</button></div>
 18 |         <div class="item"> <button onclick="reset()">reset</button></div>
 19 |         <div class="item">
 20 |             <label for="speed">speed</label>
 21 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 22 |         </div>
 23 |     </div>
 24 |     <div id="map" class="container"></div>
 25 | 
 26 |     <script>
 27 |         const modelOffsetAngle = 90;
 28 |         let autoUpdateMapCenter = false;
 29 |         const map = new maptalks.Map("map", {
 30 |             "center": [-73.98105851, 40.7466637], "zoom": 15.608661526660986, "pitch": 69.00000000000041, "bearing": -6.899999999999636,
 31 |             // baseLayer: new maptalks.TileLayer('base', {
 32 |             //     urlTemplate:
 33 |             //         'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 34 |             //     subdomains: ['a', 'b', 'c', 'd'],
 35 |             //     attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 36 |             // })
 37 |         });
 38 | 
 39 | 
 40 |         const gltfLayer = new maptalks.GLTFLayer("gltf", {
 41 |             geometryEvents: false
 42 |         });
 43 |         const lineLayer = new maptalks.LineStringLayer('line');
 44 |         // 添加到GroupGLLayer中
 45 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 46 |         const sceneConfig = {
 47 |             postProcess: {
 48 |                 enable: true,
 49 |                 antialias: { enable: false }
 50 |             }
 51 |         };
 52 |         const groupLayer = new maptalks.GroupGLLayer('group', [lineLayer, gltfLayer], { sceneConfig });
 53 |         groupLayer.addTo(map);
 54 | 
 55 |         const debugLayer = createDebugLayer(map);
 56 | 
 57 |         /**start**/
 58 |         const symbol = {
 59 |             url: "./data/1.gltf",
 60 |             modelHeight: 30,
 61 |             // rotationZ: -45
 62 |         };
 63 | 
 64 | 
 65 | 
 66 |         const playerList = [];
 67 |         function addLine() {
 68 |             fetch('./data/road.json').then(res => res.json()).then(data => {
 69 |                 const features = data.map(d => {
 70 |                     return d.feature;
 71 |                 })
 72 |                 const geojson = { type: 'FeatureCollection', features };
 73 |                 const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
 74 |                     line.setSymbol({
 75 |                         lineColor: '#000',
 76 |                         lineWidth: 10
 77 |                     })
 78 |                 }));
 79 |                 lineLayer.addGeometry(lines);
 80 |                 const players = features.map(f => {
 81 |                     const coordinates = f.geometry.coordinates;
 82 |                     const pathLength = geolib.getPathLength(coordinates);
 83 |                     const duration = pathLength * 100;
 84 |                     console.log(duration);
 85 |                     const data = maptalks.formatRouteData(coordinates, { duration });
 86 |                     return new maptalks.RoutePlayer(data, { speed: 4, debug: true, repeat: true, autoPlay: true });
 87 |                 });
 88 | 
 89 |                 players.forEach(player => {
 90 |                     const info = player.getStartInfo();
 91 |                     const model = new maptalks.GLTFMarker(info.coordinate, {
 92 |                         symbol,
 93 |                     });
 94 |                     gltfLayer.addGeometry(model);
 95 |                     playerList.push({
 96 |                         player,
 97 |                         model
 98 |                     })
 99 |                     updateModelPosition(info, model);
100 |                 })
101 |                 listenEvents();
102 |             })
103 | 
104 | 
105 | 
106 |         }
107 |         addLine();
108 | 
109 |         function updateModelPosition(e, model) {
110 |             const { coordinate, rotationZ, rotationX } = e;
111 |             if (!model) {
112 |                 return;
113 |             }
114 |             model.setCoordinates(coordinate);
115 |             model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
116 |         }
117 | 
118 |         function listenEvents() {
119 |             playerList.forEach(d => {
120 |                 const { player, model } = d;
121 |                 player.on('playstart playing playend vertex pause', e => {
122 |                     console.log(e.type);
123 |                 })
124 | 
125 |                 player.on('playing', e => {
126 |                     updateModelPosition(e, model);
127 |                     // point.setCoordinates(e.coordinate);
128 |                 });
129 |                 // let vertexs = [];
130 |                 // player.on('vertex', e => {
131 |                 //     showVertex(e, vertexs, debugLayer);
132 |                 // });
133 |             });
134 |         }
135 | 
136 | 
137 |         function start() {
138 |             playerList.forEach(d => {
139 |                 const { player, model } = d;
140 |                 player.play();
141 |             });
142 |         }
143 |         function pause() {
144 |             playerList.forEach(d => {
145 |                 const { player, model } = d;
146 |                 player.pause();
147 |             });
148 |         }
149 | 
150 |         function finish() {
151 |             playerList.forEach(d => {
152 |                 const { player, model } = d;
153 |                 player.finish();
154 |             });
155 |         }
156 | 
157 |         function reset() {
158 | 
159 |             playerList.forEach(d => {
160 |                 const { player, model } = d;
161 |                 player.reset();
162 | 
163 |                 updateModelPosition(player.getStartInfo(), model);
164 |             });
165 | 
166 | 
167 |         }
168 | 
169 | 
170 |         document.querySelector('#speed').addEventListener('change', e => {
171 |             playerList.forEach(d => {
172 |                 const { player, model } = d;
173 |                 player.setSpeed(parseFloat(e.target.value));
174 |             });
175 | 
176 |         })
177 |     </script>
178 | </body>
179 | 
180 | </html>


--------------------------------------------------------------------------------
/demo/route.js:
--------------------------------------------------------------------------------
 1 | var route = {
 2 |     path: [
 3 |         [121.475031060928, 31.2611187865471, 301000, { info: "test1" }],
 4 |         [121.47940842604, 31.263466566376, 541000, { info: "test2" }],
 5 |         [121.481768769973, 31.2649338991092, 781000, { info: "test3" }],
 6 |         [121.483871621841, 31.2638700851521, 901000, { info: "test4" }],
 7 |         [121.483742875808, 31.2617424212607, 1021000, { info: "test5" }],
 8 |         [121.486532373184, 31.261925842451, 1201000, { info: "test6" }],
 9 |         [121.48760525679, 31.2623660518534, 1441000, { info: "test7" }],
10 |         [121.488763971084, 31.2639067685916, 1681000, { info: "test8" }],
11 |         [121.489665193313, 31.2648238499456, 1981000, { info: "test9" }],
12 |         [121.491939706557, 31.2642736022027, 2281000, { info: "test10" }],
13 |         [121.492454690688, 31.2639067685916, 2461000, { info: "test11" }],
14 |         [121.495458764785, 31.2624761038832, 2641000, { info: "test12" }],
15 |         [121.49854866957, 31.2622193156141, 2881000, { info: "test13" }],
16 |         [121.504985971205, 31.2647138006537, 3181000, { info: "test14" }],
17 |         [121.50696007704, 31.2647504837653, 3481000, { info: "test15" }],
18 |         [121.514599008314, 31.2629896783252, 3781000, { info: "test16" }],
19 |         [121.515843553297, 31.2631730970915, 4081000, { info: "test17" }],
20 |         [121.518976373426, 31.2600916145062, 4321000, { info: "test18" }],
21 |         [121.520950479261, 31.2580739225948, 4501000, { info: "test19" }],
22 |         [121.519663018934, 31.2545153426586, 4621000, { info: "test20" }],
23 |         [121.517216844313, 31.2514702656954, 4801000, { info: "test21" }],
24 |         [121.515113992445, 31.2515436421988, 5041000, { info: "test22" }],
25 |         [121.512238664381, 31.2508098745995, 5341000, { info: "test23" }],
26 |         [121.509921235793, 31.2520205880802, 5521000, { info: "test24" }],
27 |         [121.504685563796, 31.2512501358434, 5821000, { info: "test25" }],
28 |         [121.50472847914, 31.2548822127716, 6061000, { info: "test26" }],
29 |         [121.505329293959, 31.2573768917291, 6361000, { info: "test27" }],
30 |         [121.505329293959, 31.2595046540352, 6541000, { info: "test28" }],
31 |         [121.500265283339, 31.2583674077352, 6661000, { info: "test29" }],
32 |         [121.497990770095, 31.2563863653288, 6901000, { info: "test30" }],
33 |         [121.494042558425, 31.2556159487204, 7201000, { info: "test31" }],
34 |         [121.495115442031, 31.2587342628775, 7381000, { info: "test32" }],
35 |         [121.491639299148, 31.2592478576813, 7501000, { info: "test33" }],
36 |         [121.488506479018, 31.2584774644276, 7741000, { info: "test34" }],
37 |         [121.483184976333, 31.2568632867449, 8041000, { info: "test35" }],
38 |         [121.480695886367, 31.2551390210024, 8281000, { info: "test36" }],
39 |         [121.482326669448, 31.2515436421988, 8401000, { info: "test37" }],
40 |         [121.480481309646, 31.2480215057159, 8701000, { info: "test38" }],
41 |         [121.48112503981, 31.2468474310257, 8881000, { info: "test39" }],
42 |         [121.482369584793, 31.2454165077606, 9061000, { info: "test40" }],
43 |         [121.485030336135, 31.2466272903962, 9301000, { info: "test41" }],
44 |         [121.488978547805, 31.245930175017, 9481000, { info: "test42" }],
45 |         [121.490866822952, 31.2455265795508, 9721000, { info: "test43" }]
46 |     ]
47 | };
48 | 


--------------------------------------------------------------------------------
/demo/spring.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script type='text/javascript' src='./util.js'></script>
 11 | <script type='text/javascript' src='./data/data.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         const map = new maptalks.Map("map", {
 37 |             "center": [120.61158328, 31.36078557], "zoom": 13.867916986432306, "pitch": 74.6, "bearing": 1.5,
 38 |             baseLayer: new maptalks.TileLayer('base', {
 39 |                 urlTemplate:
 40 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 41 |                 subdomains: ['a', 'b', 'c', 'd'],
 42 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 43 |             })
 44 |         });
 45 | 
 46 |         const debugLayer = createDebugLayer(map);
 47 |         let autoUpdateMapCenter = false;
 48 | 
 49 |         function getCircleLine() {
 50 |             const radius = 0.03;
 51 |             const line = [];
 52 |             let height = 0;
 53 |             const center = map.getCenter();
 54 |             const cx = center.x, cy = center.y;
 55 |             for (let i = 0; i < 8; i++) {
 56 |                 for (let j = 1; j <= 360; j += 5) {
 57 |                     const rad = j / 360 * Math.PI * 2;
 58 |                     const x = radius * Math.cos(rad) + cx, y = radius * Math.sin(rad) + cy;
 59 |                     line.push([x, y, height]);
 60 |                     height += 2;
 61 |                 }
 62 |             }
 63 |             return line.map(c => {
 64 |                 return {
 65 |                     coordinate: c
 66 |                 }
 67 |             })
 68 |         }
 69 | 
 70 |         const data = maptalks.formatRouteData(getCircleLine(), { duration: 1000 * 60 * 10 });
 71 |         console.log(data);
 72 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 73 |         console.log(player);
 74 | 
 75 |         player.on('playstart playing playend vertex pause time', e => {
 76 |             console.log(e.type);
 77 |         })
 78 | 
 79 |         player.on('playing', e => {
 80 |             if (autoUpdateMapCenter) {
 81 |                 map.setCenter(e.coordinate);
 82 |             }
 83 |             point.setCoordinates(e.coordinate);
 84 |         });
 85 |         let vertexs = [];
 86 |         player.on('vertex', e => {
 87 |             showVertex(e, vertexs, debugLayer);
 88 |         });
 89 | 
 90 |         const line = new maptalks.LineString(player.getCoordinates(), {
 91 |             symbol: {
 92 |                 lineColor: 'red'
 93 |             }
 94 |         }).addTo(debugLayer);
 95 | 
 96 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
 97 |             symbol: {
 98 |                 markerWidth: 10,
 99 |                 markerHeight: 10,
100 |                 markerType: 'ellipse'
101 |             },
102 |             zIndex: 1
103 |         }).addTo(debugLayer);
104 | 
105 |         function start() {
106 |             player.play();
107 |         }
108 |         function pause() {
109 |             player.pause();
110 |         }
111 | 
112 |         function finish() {
113 |             player.finish();
114 |         }
115 | 
116 |         function reset() {
117 |             player.reset();
118 |             debugLayer.removeGeometry(vertexs);
119 |             point.setCoordinates(player.getStartCoordinate());
120 |             if (autoUpdateMapCenter) {
121 |                 map.setCenter(player.getStartCoordinate());
122 |             }
123 |         }
124 | 
125 |         function replay() {
126 |             reset();
127 |             player.replay();
128 |         }
129 | 
130 |         function setIndex() {
131 |             const index = 20;
132 |             player.setIndex(index);
133 |         }
134 | 
135 |         function setTime() {
136 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
137 |             player.setTime(t);
138 |         }
139 | 
140 |         function setPercent() {
141 |             player.setPercent(0.4);
142 |         }
143 | 
144 |         document.querySelector('#speed').addEventListener('change', e => {
145 |             player.setSpeed(parseFloat(e.target.value));
146 |         })
147 |         document.querySelector('#automapcenter').addEventListener('change', e => {
148 |             autoUpdateMapCenter = (e.target.checked);
149 |         })
150 | 
151 |     </script>
152 | </body>
153 | 
154 | </html>


--------------------------------------------------------------------------------
/demo/style.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |     margin: 0px;
 4 |     height: 100%;
 5 |     width: 100%;
 6 |     overflow-x: hidden;
 7 | }
 8 | 
 9 | .container {
10 |     width: 100%;
11 |     height: 100%;
12 | }
13 | 
14 | .tools {
15 |     background-color: white;
16 |     z-index: 1000;
17 |     position: absolute;
18 |     padding: 6px;
19 |     border-bottom: 1px solid #dfdfdf;
20 |     width: 100%;
21 |     display: flex;
22 | }
23 | 
24 | .tools .item {
25 |     margin-right: 10px;
26 | }


--------------------------------------------------------------------------------
/demo/threelayer.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css"/>
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script type='text/javascript' src='./lib/three.min.js'></script>
 10 | <script type='text/javascript' src='./lib/GLTFLoader.js'></script>
 11 | <script type='text/javascript' src='./lib/maptalks.three.min.js'></script>
 12 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 13 | <script type='text/javascript' src='./util.js'></script>
 14 | <script type='text/javascript' src='./data/data.js'></script>
 15 | 
 16 | <body>
 17 |     <div class="tools">
 18 |         <div class="item"> <button onclick="start()">play</button></div>
 19 |         <div class="item"> <button onclick="pause()">pause</button></div>
 20 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 21 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 22 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 23 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 24 |         <div class="item"> <button onclick="finish()">finish</button></div>
 25 |         <div class="item"> <button onclick="reset()">reset</button></div>
 26 |         <div class="item">
 27 |             <label for="speed">speed</label>
 28 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 29 |         </div>
 30 |         <div class="item">
 31 |             <label for="speed">auto set map center</label>
 32 |             <input id="automapcenter" type="checkbox" />
 33 |         </div>
 34 |     </div>
 35 |     <div id="map" class="container"></div>
 36 | 
 37 |     <script>
 38 |         const modelOffsetAngle = 180;
 39 |         let autoUpdateMapCenter = false;
 40 | 
 41 |         const map = new maptalks.Map("map", {
 42 |             "center": [120.54328966, 31.35464419], "zoom": 18.53771555142229, "pitch": 72.0000000000002, "bearing": -15.299999999999274,
 43 |             baseLayer: new maptalks.TileLayer('base', {
 44 |                 urlTemplate:
 45 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 46 |                 subdomains: ['a', 'b', 'c', 'd'],
 47 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 48 |             })
 49 |         });
 50 | 
 51 |         var threeLayer = new maptalks.ThreeLayer('t', {
 52 |             identifyCountOnEvent: 1,
 53 |             animation: true
 54 |         });
 55 |         threeLayer.prepareToDraw = function (gl, scene, camera) {
 56 |             var light = new THREE.DirectionalLight(0xffffff);
 57 |             light.position.set(0, -10, 10).normalize();
 58 |             scene.add(light);
 59 |             scene.add(new THREE.AmbientLight('#fff', 0.3));
 60 |             addLine();
 61 |         };
 62 |         // threeLayer.addTo(map);
 63 |         // 添加到GroupGLLayer中
 64 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 65 |         const sceneConfig = {
 66 |             postProcess: {
 67 |                 enable: true,
 68 |                 antialias: { enable: false }
 69 |             }
 70 |         };
 71 |         const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer], { sceneConfig });
 72 |         groupLayer.addTo(map);
 73 | 
 74 |         const debugLayer = createDebugLayer(map);
 75 | 
 76 |         const data = maptalks.formatRouteData(coordinates, { duration: 1000 * 60 * 10 });
 77 |         console.log(data);
 78 |         const player = new maptalks.RoutePlayer(data, { speed: 4, debug: true });
 79 |         console.log(player);
 80 | 
 81 |         let currentModel;
 82 |         function addLine() {
 83 |             const line = new maptalks.LineString(player.getCoordinates());
 84 |             const baseLine = threeLayer.toPath(line, { width: 5 }, new THREE.MeshPhongMaterial({ color: 'red', side: 2 }));
 85 |             threeLayer.addMesh(baseLine);
 86 |             const info = player.getStartInfo();
 87 | 
 88 |             var loader = new THREE.GLTFLoader();
 89 |             loader.load('./data/file.glb', function (gltf) {
 90 |                 model = gltf.scene;
 91 |                 model.rotation.x = Math.PI / 2;
 92 |                 const scale = 0.0001;
 93 |                 model.scale.set(scale, scale, scale);
 94 | 
 95 |                 currentModel = threeLayer.toModel(model, { coordinate: info.coordinate });
 96 |                 threeLayer.addMesh(currentModel);
 97 |                 updateModelPosition(info);
 98 | 
 99 |             }, undefined, function (e) {
100 |                 console.error(e);
101 |             });
102 |         }
103 | 
104 | 
105 |         function rotation2Rad(rotation) {
106 |             return (rotation) / 180 * Math.PI;
107 |         }
108 | 
109 |         function updateModelPosition(e) {
110 |             const { coordinate, rotationZ, rotationX } = e;
111 |             if (!currentModel) {
112 |                 return;
113 |             }
114 |             // console.log(rotationX);
115 |             // if (Math.abs(rotationX) > 40) {
116 |             //     console.log(rotationX);
117 |             // }
118 |             const altitude = coordinate[2];
119 |             const v = threeLayer.coordinateToVector3(coordinate);
120 |             currentModel.getObject3d().position.copy(v);
121 |             currentModel.getObject3d().children[0].rotation.x = rotation2Rad(rotationX + 90);
122 |             currentModel.getObject3d().rotation.z = rotation2Rad(rotationZ + modelOffsetAngle)
123 |             currentModel.setAltitude(altitude);
124 |         }
125 | 
126 |         player.on('playstart playing playend vertex pause', e => {
127 |             console.log(e.type);
128 |         })
129 | 
130 |         player.on('playing', e => {
131 |             if (autoUpdateMapCenter) {
132 |                 map.setCenter(e.coordinate);
133 |             }
134 |             updateModelPosition(e);
135 |         });
136 |         let vertexs = [];
137 |         player.on('vertex', e => {
138 |             showVertex(e, vertexs, debugLayer);
139 |         });
140 | 
141 |         function start() {
142 |             player.play();
143 |         }
144 |         function pause() {
145 |             player.pause();
146 |         }
147 | 
148 |         function finish() {
149 |             player.finish();
150 |         }
151 | 
152 |         function reset() {
153 |             player.reset();
154 |             debugLayer.removeGeometry(vertexs);
155 |             if (autoUpdateMapCenter) {
156 |                 map.setCenter(player.getStartCoordinate());
157 |             }
158 |             updateModelPosition( player.getStartInfo());
159 |         }
160 | 
161 |         function replay() {
162 |             reset();
163 |             player.replay();
164 |         }
165 | 
166 |         function setIndex() {
167 |             const index = 20;
168 |             player.setIndex(index);
169 |         }
170 | 
171 |         function setTime() {
172 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
173 |             player.setTime(t);
174 |         }
175 | 
176 |         function setPercent() {
177 |             player.setPercent(0.4);
178 |         }
179 | 
180 |         document.querySelector('#speed').addEventListener('change', e => {
181 |             player.setSpeed(parseFloat(e.target.value));
182 |         })
183 |         document.querySelector('#automapcenter').addEventListener('change', e => {
184 |             autoUpdateMapCenter = (e.target.checked);
185 |         })
186 | 
187 |     </script>
188 | </body>
189 | 
190 | </html>


--------------------------------------------------------------------------------
/demo/traffic.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./lib/three.min.js'></script>
 12 | <script type='text/javascript' src='./lib/maptalks.three.min.js'></script>
 13 | <script type='text/javascript' src='./util.js'></script>
 14 | 
 15 | <body>
 16 |     <div class="tools">
 17 |         <div class="item"> <button onclick="start()">play</button></div>
 18 |         <div class="item"> <button onclick="pause()">pause</button></div>
 19 |         <!-- <div class="item"> <button onclick="finish()">finish</button></div> -->
 20 |         <!-- <div class="item"> <button onclick="reset()">reset</button></div> -->
 21 |         <div class="item">
 22 |             <label for="speed">speed</label>
 23 |             <input type="range" id="speed" name="volume" min="1" max="100" value="15" />
 24 |         </div>
 25 |     </div>
 26 |     <div id="map" class="container"></div>
 27 | 
 28 |     <script>
 29 |         const modelOffsetAngle = 90;
 30 |         let autoUpdateMapCenter = false;
 31 |         const map = new maptalks.Map("map", {
 32 |             "center": [-73.98105851, 40.7466637], "zoom": 15.608661526660986, "pitch": 69.00000000000041, "bearing": -6.899999999999636,
 33 |             // baseLayer: new maptalks.TileLayer('base', {
 34 |             //     urlTemplate:
 35 |             //         'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 36 |             //     subdomains: ['a', 'b', 'c', 'd'],
 37 |             //     attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 38 |             // })
 39 |         });
 40 | 
 41 | 
 42 |         const gltfLayer = new maptalks.GLTFLayer("gltf", {
 43 |             geometryEvents: false
 44 |         });
 45 |         // const lineLayer = new maptalks.LineStringLayer('line');
 46 | 
 47 |         const threeLayer = new maptalks.ThreeLayer('t');
 48 | 
 49 |         threeLayer.prepareToDraw = function (gl, scene, camera) {
 50 |             var light = new THREE.DirectionalLight(0xffffff);
 51 |             light.position.set(0, -10, 10).normalize();
 52 |             scene.add(light);
 53 |             scene.add(new THREE.AmbientLight('#fff', 0.3));
 54 |             addLine();
 55 |         };
 56 | 
 57 |         // 添加到GroupGLLayer中
 58 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
 59 |         const sceneConfig = {
 60 |             postProcess: {
 61 |                 enable: true,
 62 |                 antialias: { enable: false }
 63 |             }
 64 |         };
 65 |         const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer, gltfLayer], { sceneConfig });
 66 |         groupLayer.addTo(map);
 67 | 
 68 |         const debugLayer = createDebugLayer(map);
 69 | 
 70 |         /**start**/
 71 |         const symbol = {
 72 |             url: "./data/1.gltf",
 73 |             modelHeight: 20,
 74 |             // rotationZ: -45
 75 |         };
 76 | 
 77 | 
 78 |         const playerList = [];
 79 |         function addLine() {
 80 |             fetch('./data/road.json').then(res => res.json()).then(data => {
 81 |                 const features = data.map(d => {
 82 |                     return d.feature;
 83 |                 });
 84 |                 const material = new THREE.MeshBasicMaterial({ color: '#fff' });
 85 | 
 86 |                 const textureLoader = new THREE.TextureLoader();
 87 |                 textureLoader.load('./data/road.jpg', (texture) => {
 88 |                     texture.needsUpdate = true; //使用贴图时进行更新
 89 |                     texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 90 |                     // texture.repeat.set(0.002, 0.002);
 91 |                     texture.repeat.set(2, 1);
 92 |                     material.map = texture;
 93 |                     material.needsUpdate = true;
 94 |                 });
 95 | 
 96 |                 const geojson = { type: 'FeatureCollection', features };
 97 |                 const lines = geojson.features.map(f => {
 98 |                     return threeLayer.toPath(f, { width: 20, altitude: Math.random() * 1 }, material)
 99 |                 });
100 |                 threeLayer.addMesh(lines);
101 |                 // const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
102 |                 //     line.setSymbol({
103 |                 //         lineColor: '#fff',
104 |                 //         lineWidth: 22,
105 |                 //         linePatternFile: './data/road.jpg'
106 |                 //     })
107 |                 // }));
108 |                 // lineLayer.addGeometry(lines);
109 |                 const players = [];
110 |                 features.forEach(f => {
111 |                     const coordinates = f.geometry.coordinates;
112 |                     const pathLength = geolib.getPathLength(coordinates);
113 |                     const count = Math.floor(pathLength / 400);
114 |                     const duration = pathLength * 100;
115 |                     for (let i = 0; i < count; i++) {
116 |                         const data = maptalks.formatRouteData(coordinates, { duration });
117 |                         const player = new maptalks.RoutePlayer(data, { speed: 15, debug: true, repeat: true, autoPlay: true });
118 |                         const startTime = player.getStartTime(), endTime = player.getEndTime();
119 |                         const dt = (endTime - startTime);
120 |                         player.setTime(startTime + dt * Math.random());
121 |                         players.push(player);
122 |                     }
123 | 
124 |                 })
125 | 
126 | 
127 |                 players.forEach(player => {
128 |                     const info = player.getStartInfo();
129 |                     const model = new maptalks.GLTFMarker(info.coordinate, {
130 |                         symbol
131 |                     });
132 |                     gltfLayer.addGeometry(model);
133 |                     playerList.push({
134 |                         player,
135 |                         model
136 |                     })
137 |                     updateModelPosition(info, model);
138 |                 })
139 |                 listenEvents();
140 |             })
141 | 
142 | 
143 | 
144 |         }
145 | 
146 |         function updateModelPosition(e, model) {
147 |             const { coordinate, rotationZ, rotationX } = e;
148 |             if (!model) {
149 |                 return;
150 |             }
151 |             model.setCoordinates(coordinate);
152 |             model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
153 |         }
154 | 
155 |         function listenEvents() {
156 |             playerList.forEach(d => {
157 |                 const { player, model } = d;
158 |                 player.on('playstart playing playend vertex pause', e => {
159 |                     // console.log(e.type);
160 |                 })
161 | 
162 |                 player.on('playing', e => {
163 |                     updateModelPosition(e, model);
164 |                     // point.setCoordinates(e.coordinate);
165 |                 });
166 |                 // let vertexs = [];
167 |                 // player.on('vertex', e => {
168 |                 //     showVertex(e, vertexs, debugLayer);
169 |                 // });
170 |             });
171 |         }
172 | 
173 | 
174 |         function start() {
175 |             playerList.forEach(d => {
176 |                 const { player, model } = d;
177 |                 player.play();
178 |             });
179 |         }
180 |         function pause() {
181 |             playerList.forEach(d => {
182 |                 const { player, model } = d;
183 |                 player.pause();
184 |             });
185 |         }
186 | 
187 |         function finish() {
188 |             playerList.forEach(d => {
189 |                 const { player, model } = d;
190 |                 player.finish();
191 |             });
192 |         }
193 | 
194 |         function reset() {
195 | 
196 |             playerList.forEach(d => {
197 |                 const { player, model } = d;
198 |                 player.reset();
199 | 
200 |                 updateModelPosition(player.getStartInfo(), model);
201 |             });
202 | 
203 | 
204 |         }
205 | 
206 | 
207 |         document.querySelector('#speed').addEventListener('change', e => {
208 |             playerList.forEach(d => {
209 |                 const { player, model } = d;
210 |                 player.setSpeed(parseFloat(e.target.value));
211 |             });
212 | 
213 |         })
214 |     </script>
215 | </body>
216 | 
217 | </html>


--------------------------------------------------------------------------------
/demo/uimarker.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel="stylesheet" href="./style.css" />
  7 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js'></script>
  9 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | <style>
 13 |     #marker-template {
 14 |         display: none;
 15 |     }
 16 | 
 17 |     .markerDiv {
 18 |         /* // width:10vw; */
 19 |         min-width: 180px;
 20 |         min-height: 100px;
 21 |         background: beige;
 22 |         /* padding-bottom: 1vh; */
 23 |         /* margin-bottom: 4vh; */
 24 |         width: 200px;
 25 |         height: 100px;
 26 |     }
 27 | 
 28 |     .markerBody {
 29 |         padding: 10px;
 30 |     }
 31 | 
 32 |     .markerName {
 33 |         text-align: center;
 34 |         font-size: 12px;
 35 |         font-weight: 600;
 36 |         background: darkblue;
 37 |         color: white;
 38 | 
 39 |     }
 40 | 
 41 |     .marker-footer {
 42 |         width: 10px;
 43 |         height: 10px;
 44 |         background-color: beige;
 45 |         margin-left: calc(50% - 5px);
 46 |         margin-top: -5px;
 47 |         transform: rotate(45deg);
 48 |         /* border-radius: 5px; */
 49 |     }
 50 | </style>
 51 | 
 52 | <body>
 53 |     <div class="tools">
 54 |         <div class="item"> <button onclick="start()">play</button></div>
 55 |         <div class="item"> <button onclick="pause()">pause</button></div>
 56 |         <div class="item"> <button onclick="finish()">finish</button></div>
 57 |         <div class="item"> <button onclick="reset()">reset</button></div>
 58 |         <div class="item">
 59 |             <label for="speed">speed</label>
 60 |             <input type="range" id="speed" name="volume" min="1" max="100" value="4" />
 61 |         </div>
 62 |     </div>
 63 |     <div id="map" class="container"></div>
 64 |     <div id="marker-template">
 65 |         <div class="markerDiv">
 66 |             <div class="markerName">{name}</div>
 67 |             <div class="markerBody">
 68 |                 <div class="markerRow">{wendu}</div>
 69 |                 <div class="markerRow">{yali}</div>
 70 |                 <div class="markerRow">{liu}</div>
 71 |             </div>
 72 |             <div class="marker-footer"></div>
 73 |         </div>
 74 |     </div>
 75 | 
 76 | 
 77 |     <script>
 78 |         const markerTemplate = document.querySelector('#marker-template').innerHTML;
 79 | 
 80 |         function getMarkerData(marker) {
 81 |             const name = `hello${Math.ceil(Math.random() * 10000)}`;
 82 |             const wendu = ` 供回温:${(Math.random() * 200).toFixed(2)}/${(Math.random() * 200).toFixed(2)}℃`;
 83 |             const yali = ` 供回压:${(Math.random() * 100).toFixed(2)}/${(Math.random() * 100).toFixed(2)} MPa`;
 84 |             const liu = `流量:${(Math.random() * 100).toFixed(2)} t/h`;
 85 |             return {
 86 |                 name, wendu, yali, liu
 87 |             }
 88 |         }
 89 | 
 90 |         function getMarkerContent(data) {
 91 |             const { name, wendu, yali, liu } = data;
 92 |             return markerTemplate.replaceAll('{name}', data.name).replaceAll('{wendu}', data.wendu).replaceAll("{yali}", yali).replaceAll('{liu}', liu);
 93 |         }
 94 | 
 95 | 
 96 | 
 97 |         const modelOffsetAngle = 90;
 98 |         let autoUpdateMapCenter = false;
 99 |         const map = new maptalks.Map("map", {
100 |             "center": [116.45033283, 39.9017363], "zoom": 11.747534393964086, "pitch": 61.50000000000047, "bearing": -1.9499999999998183,
101 |             baseLayer: new maptalks.TileLayer('base', {
102 |                 urlTemplate:
103 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
104 |                 subdomains: ['a', 'b', 'c', 'd'],
105 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
106 |             })
107 |         });
108 | 
109 | 
110 |         const lineLayer = new maptalks.VectorLayer("line", {
111 |             geometryEvents: false,
112 |             forceRenderOnMoving: true,
113 |             forceRenderOnZooming: true,
114 |             forceRenderOnRotating: true,
115 |             progressiveRender: true,
116 |             progressiveRenderCount: 100
117 |         }).addTo(map);
118 |         const pointLayer = new maptalks.VectorLayer('point', {
119 |             // collision: true
120 |         }).addTo(map);
121 |         // 添加到GroupGLLayer中
122 |         // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
123 |         const sceneConfig = {
124 |             postProcess: {
125 |                 enable: true,
126 |                 antialias: { enable: false }
127 |             }
128 |         };
129 | 
130 |         const debugLayer = createDebugLayer(map);
131 | 
132 |         /**start**/
133 |         const symbol = {
134 |             url: "./data/1.gltf",
135 |             modelHeight: 30,
136 |             // rotationZ: -45
137 |         };
138 | 
139 | 
140 | 
141 |         const playerList = [];
142 |         function addLine() {
143 |             fetch('./data/bus.json').then(res => res.json()).then(geojson => {
144 |                 // console.log(JSON.stringify(geojson))
145 |                 // const features = data.map(d => {
146 |                 //     return d.feature;
147 |                 // })
148 |                 // const geojson = { type: 'FeatureCollection', features };
149 |                 const features = geojson.features.slice(0, Infinity);
150 |                 const lines = maptalks.GeoJSON.toGeometry(geojson, (line => {
151 |                     line.setSymbol({
152 |                         lineColor: '#fff',
153 |                         lineWidth: 1
154 |                     })
155 |                 }));
156 |                 lineLayer.addGeometry(lines);
157 |                 const players = features.map(f => {
158 |                     const coordinates = f.geometry.coordinates;
159 |                     const pathLength = geolib.getPathLength(coordinates);
160 |                     const duration = pathLength * 15;
161 |                     // console.log(duration);
162 |                     const data = maptalks.formatRouteData(coordinates, { duration });
163 |                     return new maptalks.RoutePlayer(data, { speed: 10, debug: true, autoPlay: true });
164 |                 });
165 | 
166 |                 players.forEach(player => {
167 |                     const info = player.getStartInfo();
168 |                     // console.log(info);
169 |                     const model = new maptalks.ui.UIMarker(info.coordinate, {
170 |                         collision: true,
171 |                         collisionBufferSize: 2,
172 |                         collisionWeight: 1,
173 |                         collisionFadeIn: true,
174 |                         verticalAlignment: "top",
175 |                         horizontalAlignment: 'middle',
176 |                         altitude: 0,
177 |                         dy: -5,
178 |                         // minZoom: 2,
179 |                         // maxZoom: 10,
180 |                         animation: 'fade',
181 |                         content: getMarkerContent(getMarkerData())
182 |                     });
183 |                     model.addTo(map);
184 |                     // pointLayer.addGeometry(model);
185 |                     playerList.push({
186 |                         player,
187 |                         model
188 |                     })
189 |                     updateModelPosition(info, model);
190 |                 })
191 |                 listenEvents();
192 |             })
193 | 
194 | 
195 | 
196 |         }
197 |         addLine();
198 | 
199 |         function updateModelPosition(e, model) {
200 |             const { coordinate, rotationZ, rotationX } = e;
201 |             if (!model || !coordinate) {
202 |                 return;
203 |             }
204 |             // console.log(coordinate);
205 |             model.setCoordinates(new maptalks.Coordinate(coordinate));
206 |             // model.setRotation(rotationX, 0, rotationZ + modelOffsetAngle);
207 | 
208 |             const uiDom = model.getDOM();
209 |             if (uiDom.style.visibility !== 'visible' && e.type === 'playing') {
210 |                 return;
211 |             }
212 |             const { name, wendu, yali, liu } = getMarkerData();
213 |             const dom = uiDom.children[0];
214 |             dom.querySelector('.markerName').textContent = name;
215 |             const rows = dom.querySelectorAll('.markerBody .markerRow');
216 |             const values = [wendu, yali, liu];
217 |             Array.prototype.forEach.call(rows, (row, index) => {
218 |                 row.textContent = values[index];
219 |             })
220 |         }
221 | 
222 |         function listenEvents() {
223 |             playerList.forEach(d => {
224 |                 const { player, model } = d;
225 |                 player.on('playstart playing playend vertex pause', e => {
226 |                     // console.log(e.type);
227 |                 })
228 | 
229 |                 player.on('playing', e => {
230 |                     updateModelPosition(e, model);
231 |                     // point.setCoordinates(e.coordinate);
232 |                 });
233 |                 // let vertexs = [];
234 |                 // player.on('vertex', e => {
235 |                 //     showVertex(e, vertexs, debugLayer);
236 |                 // });
237 |             });
238 |         }
239 | 
240 | 
241 |         function start() {
242 |             playerList.forEach(d => {
243 |                 const { player, model } = d;
244 |                 player.play();
245 |             });
246 |         }
247 |         function pause() {
248 |             playerList.forEach(d => {
249 |                 const { player, model } = d;
250 |                 player.pause();
251 |             });
252 |         }
253 | 
254 |         function finish() {
255 |             playerList.forEach(d => {
256 |                 const { player, model } = d;
257 |                 player.finish();
258 |             });
259 |         }
260 | 
261 |         function reset() {
262 | 
263 |             playerList.forEach(d => {
264 |                 const { player, model } = d;
265 |                 player.reset();
266 | 
267 |                 updateModelPosition(player.getStartInfo(), model);
268 |             });
269 | 
270 | 
271 |         }
272 | 
273 | 
274 |         document.querySelector('#speed').addEventListener('change', e => {
275 |             playerList.forEach(d => {
276 |                 const { player, model } = d;
277 |                 player.setSpeed(parseFloat(e.target.value));
278 |             });
279 | 
280 |         })
281 |     </script>
282 | </body>
283 | 
284 | </html>


--------------------------------------------------------------------------------
/demo/update-data.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <meta charset='UTF-8' />
  4 | <meta name='viewport' content='width=device-width, initial-scale=1' />
  5 | <title>地图 - 显示</title>
  6 | <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css' />
  7 | <link rel="stylesheet" href="./style.css" />
  8 | <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/maptalks.routeplayer@latest/dist/maptalks.routeplayer.js"></script>
 10 | <script src="https://cdn.jsdelivr.net/npm/gcoord@1.0.5/dist/gcoord.global.min.js"></script>
 11 | <script type='text/javascript' src='./util.js'></script>
 12 | 
 13 | <body>
 14 |     <div class="tools">
 15 |         <div class="item"> <button onclick="start()">play</button></div>
 16 |         <div class="item"> <button onclick="pause()">pause</button></div>
 17 |         <!-- <div class="item"> <button onclick="replay()">重播</button></div> -->
 18 |         <div class="item"> <button onclick="setIndex()">setIndex</button></div>
 19 |         <div class="item"> <button onclick="setTime()">setTime</button></div>
 20 |         <div class="item"> <button onclick="setPercent()">setPercent</button></div>
 21 |         <div class="item"> <button onclick="finish()">finish</button></div>
 22 |         <div class="item"> <button onclick="reset()">reset</button></div>
 23 |         <div class="item">
 24 |             <label for="speed">speed</label>
 25 |             <input type="range" id="speed" name="volume" min="1" max="100" value="1" />
 26 |         </div>
 27 |         <div class="item">
 28 |             <label for="speed">auto set map center</label>
 29 |             <input id="automapcenter" type="checkbox" />
 30 |         </div>
 31 |     </div>
 32 |     <div id="map" class="container"></div>
 33 | 
 34 |     <script>
 35 | 
 36 |         //time unit is second
 37 |         const coordinates = [
 38 |             { "coordinate": [121.62405324867802, 31.15815265075375, 0], "time": 1 },
 39 |             { "coordinate": [121.62485215369634, 31.1583001060458, 0], "time": 22 },
 40 | 
 41 |             { "coordinate": [121.62598524120608, 31.158516820225344, 0], "time": 50 },
 42 |             { "coordinate": [121.62614450004958, 31.15855033268312, 0], "time": 60 },
 43 |             { "coordinate": [121.6261732188575, 31.15833808691721, 0], "time": 100 },
 44 |             { "coordinate": [121.62623587807457, 31.15799402434996, 0], "time": 130 },
 45 |             { "coordinate": [121.6263585857082, 31.157538251233603, 0], "time": 150 },
 46 |             { "coordinate": [121.62645779613536, 31.157120457284492, 0], "time": 170 },
 47 | 
 48 |         ].map(d => {
 49 |             return {
 50 |                 time: d.time,
 51 |                 coordinate: gcoord.transform(d.coordinate, gcoord.AMap, gcoord.WGS84)
 52 |             }
 53 |         })
 54 | 
 55 |         const coordinates1 = [
 56 |             { "coordinate": [121.626478682541, 31.157024386757683, 0], "time": 210 },
 57 |             { "coordinate": [121.62720187433865, 31.15716514121729, 0], "time": 245 },
 58 |             { "coordinate": [121.62738201958791, 31.15721429351899, 0], "time": 280 },
 59 |             { "coordinate": [121.62751778122504, 31.156765219269317, 0], "time": 320 },
 60 |             { "coordinate": [121.62671104380456, 31.156602122124497, 0], "time": 365 },
 61 |             { "coordinate": [121.62578159875045, 31.156430087845678, 0], "time": 400 },
 62 |             { "coordinate": [121.62527249261132, 31.156334016618956, 0], "time": 456 },
 63 |             { "coordinate": [121.62515500657923, 31.156304971810385, 0], "time": 500 },
 64 |             { "coordinate": [121.62518372538705, 31.15654626687339, 0], "time": 567 },
 65 |             { "coordinate": [121.62518633618777, 31.156604356333872, 0], "time": 612 }
 66 |         ].map(d => {
 67 |             return {
 68 |                 time: d.time,
 69 |                 coordinate: gcoord.transform(d.coordinate, gcoord.AMap, gcoord.WGS84)
 70 |             }
 71 |         })
 72 | 
 73 |         const map = new maptalks.Map("map", {
 74 |             "center": [121.62113589, 31.15943104], "zoom": 18.83296421092538, "pitch": 47.849999999999994, "bearing": -5.249999999999318,
 75 |             baseLayer: new maptalks.TileLayer('base', {
 76 |                 urlTemplate:
 77 |                     'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 78 |                 subdomains: ['a', 'b', 'c', 'd'],
 79 |                 attribution: '&copy; <a href="https://www.esri.com/en-us/home">esri</a>'
 80 |             })
 81 |         });
 82 | 
 83 |         const debugLayer = createDebugLayer(map);
 84 |         let autoUpdateMapCenter = false;
 85 | 
 86 |         const data = maptalks.formatRouteData(coordinates, { unitTime: 1000 });
 87 |         console.log(data);
 88 |         const player = new maptalks.RoutePlayer(data, { speed: 1, debug: true });
 89 |         console.log(player);
 90 | 
 91 |         let needUpdate = true;
 92 | 
 93 |         player.on('playend', e => {
 94 |             if (!needUpdate) {
 95 |                 return;
 96 |             }
 97 |             needUpdate = false;
 98 |             // console.log('end');
 99 |             const data = maptalks.formatRouteData(coordinates.concat(coordinates1), { unitTime: 1000 });
100 |             const time = player.getCurrentTime();
101 |             player.setData(data);
102 |             player.setTime(time);
103 |             player.play();
104 |             line.setCoordinates(player.getCoordinates());
105 | 
106 | 
107 |         })
108 | 
109 |         player.on('playstart playing playend vertex pause time', e => {
110 |             // console.log(e.type);
111 |         })
112 | 
113 |         player.on('playing', e => {
114 |             if (autoUpdateMapCenter) {
115 |                 map.setCenter(e.coordinate);
116 |             }
117 |             point.setCoordinates(e.coordinate);
118 |         });
119 |         let vertexs = [];
120 |         player.on('vertex', e => {
121 |             showVertex(e, vertexs, debugLayer);
122 |         });
123 | 
124 |         const line = new maptalks.LineString(player.getCoordinates(), {
125 |             symbol: {
126 |                 lineColor: 'red'
127 |             }
128 |         }).addTo(debugLayer);
129 | 
130 |         const point = new maptalks.Marker(player.getStartCoordinate(), {
131 |             zIndex: 1
132 |         }).addTo(debugLayer);
133 | 
134 |         function start() {
135 |             player.play();
136 |         }
137 |         function pause() {
138 |             player.pause();
139 |         }
140 | 
141 |         function finish() {
142 |             player.finish();
143 |         }
144 | 
145 |         function reset() {
146 |             player.reset();
147 |             debugLayer.removeGeometry(vertexs);
148 |             point.setCoordinates(player.getStartCoordinate());
149 |             if (autoUpdateMapCenter) {
150 |                 map.setCenter(player.getStartCoordinate());
151 |             }
152 |         }
153 | 
154 |         function replay() {
155 |             reset();
156 |             player.replay();
157 |         }
158 | 
159 |         function setIndex() {
160 |             const index = 20;
161 |             player.setIndex(index);
162 |         }
163 | 
164 |         function setTime() {
165 |             const t = player.getStartTime() / 2 + player.getEndTime() / 2;
166 |             player.setTime(t);
167 |         }
168 | 
169 |         function setPercent() {
170 |             player.setPercent(0.4);
171 |         }
172 | 
173 |         document.querySelector('#speed').addEventListener('change', e => {
174 |             player.setSpeed(parseFloat(e.target.value));
175 |         })
176 |         document.querySelector('#automapcenter').addEventListener('change', e => {
177 |             autoUpdateMapCenter = (e.target.checked);
178 |         })
179 | 
180 |     </script>
181 | </body>
182 | 
183 | </html>


--------------------------------------------------------------------------------
/demo/util.js:
--------------------------------------------------------------------------------
  1 | function generateNormal(indices, position) {
  2 |     function v3Sub(out, v1, v2) {
  3 |         out[0] = v1[0] - v2[0];
  4 |         out[1] = v1[1] - v2[1];
  5 |         out[2] = v1[2] - v2[2];
  6 |         return out;
  7 |     }
  8 | 
  9 |     function v3Normalize(out, v) {
 10 |         const x = v[0];
 11 |         const y = v[1];
 12 |         const z = v[2];
 13 |         const d = Math.sqrt(x * x + y * y + z * z) || 1;
 14 |         out[0] = x / d;
 15 |         out[1] = y / d;
 16 |         out[2] = z / d;
 17 |         return out;
 18 |     }
 19 | 
 20 |     function v3Cross(out, v1, v2) {
 21 |         const ax = v1[0], ay = v1[1], az = v1[2],
 22 |             bx = v2[0], by = v2[1], bz = v2[2];
 23 | 
 24 |         out[0] = ay * bz - az * by;
 25 |         out[1] = az * bx - ax * bz;
 26 |         out[2] = ax * by - ay * bx;
 27 |         return out;
 28 |     }
 29 | 
 30 |     function v3Set(p, a, b, c) {
 31 |         p[0] = a; p[1] = b; p[2] = c;
 32 |     }
 33 | 
 34 |     const p1 = [];
 35 |     const p2 = [];
 36 |     const p3 = [];
 37 | 
 38 |     const v21 = [];
 39 |     const v32 = [];
 40 | 
 41 |     const n = [];
 42 | 
 43 |     const len = indices.length;
 44 |     const normals = new Float32Array(position.length);
 45 |     let f = 0;
 46 |     while (f < len) {
 47 | 
 48 |         // const i1 = indices[f++] * 3;
 49 |         // const i2 = indices[f++] * 3;
 50 |         // const i3 = indices[f++] * 3;
 51 |         // const i1 = indices[f];
 52 |         // const i2 = indices[f + 1];
 53 |         // const i3 = indices[f + 2];
 54 |         const a = indices[f], b = indices[f + 1], c = indices[f + 2];
 55 |         const i1 = a * 3, i2 = b * 3, i3 = c * 3;
 56 | 
 57 |         v3Set(p1, position[i1], position[i1 + 1], position[i1 + 2]);
 58 |         v3Set(p2, position[i2], position[i2 + 1], position[i2 + 2]);
 59 |         v3Set(p3, position[i3], position[i3 + 1], position[i3 + 2]);
 60 | 
 61 |         v3Sub(v32, p3, p2);
 62 |         v3Sub(v21, p1, p2);
 63 |         v3Cross(n, v32, v21);
 64 |         // Already be weighted by the triangle area
 65 |         for (let i = 0; i < 3; i++) {
 66 |             normals[i1 + i] += n[i];
 67 |             normals[i2 + i] += n[i];
 68 |             normals[i3 + i] += n[i];
 69 |         }
 70 |         f += 3;
 71 |     }
 72 | 
 73 |     let i = 0;
 74 |     const l = normals.length;
 75 |     while (i < l) {
 76 |         v3Set(n, normals[i], normals[i + 1], normals[i + 2]);
 77 |         v3Normalize(n, n);
 78 |         normals[i] = n[0] || 0;
 79 |         normals[i + 1] = n[1] || 0;
 80 |         normals[i + 2] = n[2] || 0;
 81 |         i += 3;
 82 |     }
 83 | 
 84 |     return normals;
 85 | }
 86 | 
 87 | function createDebugLayer(map) {
 88 |     const layer = new maptalks.VectorLayer('layer', {
 89 |         enableAltitude: true
 90 |     }).addTo(map);
 91 |     return layer;
 92 | }
 93 | 
 94 | function showVertex(e, vertexs, layer, style) {
 95 |     const data = e.data;
 96 |     const index = e.index;
 97 |     console.log(index);
 98 |     if (!vertexs[index]) {
 99 |         const coordinate = data.coordinate;
100 |         style = style || {
101 |             markerType: 'ellipse',
102 |             markerWidth: 5,
103 |             markerHeight: 5,
104 |             textSize: 12,
105 |             textName: index,
106 |             textFill: 'red'
107 |         }
108 |         style.textName = index;
109 |         const point = new maptalks.Marker(coordinate, {
110 |             symbol: style
111 |         });
112 |         vertexs[index] = point;
113 |     }
114 |     const point = vertexs[index];
115 |     if (!point.getLayer()) {
116 |         point.addTo(layer);
117 |     }
118 | 
119 |     const needRemoves = vertexs.slice(index + 1, Infinity);
120 |     if (needRemoves.length) {
121 |         layer.removeGeometry(needRemoves);
122 |     }
123 | }
124 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | const pkg = require('./package.json');
 2 | module.exports = function (config) {
 3 |     config.set({
 4 |         frameworks: ['mocha', 'expect'],
 5 |         basePath: '.',
 6 |         client: {
 7 |             mocha: {
 8 |                 timeout : 6000
 9 |             }
10 |         },
11 |         files: [
12 |             'node_modules/maptalks/dist/maptalks.js',
13 |             'node_modules/@maptalks/gl-layers/dist/maptalks-gl-layers.js',
14 |             'dist/' + pkg.name + '.js',
15 |             'test/**/*.js'
16 |         ],
17 |         proxies: {
18 |         },
19 |         preprocessors: {
20 |         },
21 |         browsers: ['Chrome'],
22 |         reporters: ['mocha']
23 |     });
24 | };
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "maptalks.routeplayer",
 3 |   "version": "1.1.0",
 4 |   "description": "Route Player plugin for maptalks.js",
 5 |   "license": "MIT",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/maptalks/maptalks.routeplayer.git"
 9 |   },
10 |   "main": "dist/maptalks.routeplayer.js",
11 |   "types": "dist/index.d.ts",
12 |   "module": "dist/maptalks.routeplayer.es.js",
13 |   "module_browser": "dist/maptalks.routeplayer.es.js",
14 |   "unpkg": "dist/maptalks.routeplayer.js",
15 |   "jsdelivr": "dist/maptalks.routeplayer.js",
16 |   "files": [
17 |     "dist/",
18 |     "src/",
19 |     "index.ts"
20 |   ],
21 |   "scripts": {
22 |     "tsc": "npx tsc",
23 |     "dev": "npm run tsc && rollup -w -c rollup.config.js",
24 |     "build": "npm run tsc &&rollup --environment BUILD:production -c rollup.config.js",
25 |     "build-dev": "npm run tsc &&rollup -c rollup.config.js",
26 |     "pretest": "npm run lint && npm run build",
27 |     "test": "karma start --single-run",
28 |     "tdd": "karma start --no-single-run",
29 |     "preversion": "npm run lint",
30 |     "version": "npm run build",
31 |     "lint": "eslint ./**/*.js",
32 |     "prepare": "npm run build"
33 |   },
34 |   "dependencies": {
35 |     "geolib": "3.3.3"
36 |   },
37 |   "devDependencies": {
38 |     "maptalks": "1.0.0-rc.31",
39 |     "cross-env": "^5.1.4",
40 |     "eslint": "^6.2.2",
41 |     "eslint-config-standard": "^14.1.0",
42 |     "eslint-plugin-import": "^2.18.2",
43 |     "eslint-plugin-node": "^10.0.0",
44 |     "eslint-plugin-promise": "^4.2.1",
45 |     "eslint-plugin-standard": "^4.0.1",
46 |     "@rollup/plugin-commonjs": "^21.0.1",
47 |     "@rollup/plugin-json": "^4.1.0",
48 |     "@rollup/plugin-node-resolve": "^13.1.3",
49 |     "@rollup/plugin-typescript": "^8.3.0",
50 |     "rollup": "^2.64.0",
51 |     "rollup-plugin-terser": "^7.0.2",
52 |     "tslib": "^2.1.0",
53 |     "typescript": "^4.5.4"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // Rollup plugins
 2 | import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
 3 | import commonjs from '@rollup/plugin-commonjs';
 4 | import { terser } from 'rollup-plugin-terser';
 5 | import json from '@rollup/plugin-json';
 6 | import typescript from '@rollup/plugin-typescript';
 7 | import pkg from './package.json';
 8 | const path = require('path');
 9 | 
10 | const production = process.env.BUILD === 'production';
11 | 
12 | 
13 | const banner = `/*!\n * ${pkg.name} v${pkg.version}\n * LICENSE : ${pkg.license}\n * (c) 2016-${new Date().getFullYear()} maptalks.org\n */`;
14 | 
15 | let outro = pkg.name + ' v' + pkg.version;
16 | 
17 | 
18 | outro = `typeof console !== 'undefined' && console.log('${outro}');`;
19 | 
20 | // const external = ['maptalks'];
21 | const FILEMANE = pkg.name;
22 | 
23 | const plugins = [
24 |     json(),
25 |     typescript({
26 | 
27 |     }),
28 |     resolve(),
29 |     commonjs()
30 |     // babel({
31 |     //     // exclude: ['node_modules/**']
32 |     // })
33 | ];
34 | 
35 | function getEntry() {
36 |     return path.join(__dirname, './index.ts');
37 | }
38 | 
39 | const bundles = [
40 |     {
41 |         input: getEntry(),
42 |         // external: external,
43 |         plugins: plugins,
44 |         output: {
45 |             'format': 'umd',
46 |             'name': 'maptalks',
47 |             'file': `dist/${FILEMANE}.js`,
48 |             'sourcemap': true,
49 |             'extend': true,
50 |             'banner': banner,
51 |             'outro': outro,
52 |             'globals': {
53 |                 'maptalks': 'maptalks'
54 |             }
55 |         }
56 |     },
57 |     {
58 |         input: getEntry(),
59 |         // external,
60 |         plugins: plugins,
61 |         output: {
62 |             'sourcemap': true,
63 |             'format': 'es',
64 |             'file': `dist/${FILEMANE}.es.js`,
65 |             'extend': true,
66 |             'banner': banner,
67 |             'globals': {
68 |                 'maptalks': 'maptalks'
69 |             }
70 |         }
71 |     },
72 |     {
73 |         input: getEntry(),
74 |         // external: external,
75 |         plugins: plugins.concat([terser()]),
76 |         output: {
77 |             'format': 'umd',
78 |             'name': 'maptalks',
79 |             'file': `dist/${FILEMANE}.min.js`,
80 |             'sourcemap': true,
81 |             'extend': true,
82 |             'banner': banner,
83 |             'outro': outro,
84 |             'globals': {
85 |                 'maptalks': 'maptalks'
86 |             }
87 |         }
88 |     }
89 | 
90 | ];
91 | 
92 | export default production ? bundles : bundles.slice(0, 1);
93 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
  1 | describe('routeplayer', function () {
  2 |     let container, map, player, groupgllayer;
  3 |     beforeEach(function () {
  4 |         container = document.createElement('div');
  5 |         container.style.width = '400px';
  6 |         container.style.height = '300px';
  7 |         document.body.appendChild(container);
  8 |         map = new maptalks.Map(container, {
  9 |             center : [121.505, 31.2611],
 10 |             zoom : 14
 11 |         });
 12 |         groupgllayer = new maptalks.GroupGLLayer("group", []).addTo(map);
 13 |     });
 14 | 
 15 |     afterEach(function () {
 16 |         player.remove();
 17 |         map.remove();
 18 |         maptalks.DomUtil.removeDomNode(container);
 19 |     });
 20 | 
 21 |     const route = {
 22 |         path: [
 23 |                 [121.475031060928, 31.2611187865471, 100, 301000, { info: "test1" }],
 24 |                 [121.47940842604, 31.263466566376, 120, 541000, { info: "test2" }],
 25 |                 [121.481768769973, 31.2649338991092, 110, 781000, { info: "test3" }],
 26 |                 [121.483871621841, 31.2638700851521, 115, 901000, { info: "test4" }],
 27 |                 [121.483742875808, 31.2617424212607, 105, 1021000, { info: "test5" }]
 28 |             ]
 29 |         };
 30 | 
 31 |     it('get player\'s position when playing', function (done) {
 32 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
 33 |             maxTrailLine: 10,
 34 |             markerSymbol: {
 35 |                 markerOpacity: 0
 36 |             }
 37 |         });
 38 |         player.on("playing", function(param) {
 39 |             const { pitch, bearing } = param;
 40 |             if (param.time < 780000 && param.time > 540000) {
 41 |                 expect(pitch.toFixed(4)).to.be.eql(1.3746);
 42 |                 expect(bearing.toFixed(3)).to.be.eql(149.381);
 43 |                 done();
 44 |             }
 45 |         });
 46 |         player.play();
 47 |     });
 48 | 
 49 |     it('get player\'s info', function (done) {
 50 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
 51 |         });
 52 |         player.on("playing", function(param) {
 53 |             if (param.time < 780000 && param.time > 540000) {
 54 |                 expect(player.getCurrentProperties(0).info).to.be.eql('test4');
 55 |                 done();
 56 |             }
 57 |         });
 58 |         player.play();
 59 |     });
 60 | 
 61 |     it('playpause event', function (done) {
 62 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
 63 |         });
 64 |         player.play();
 65 |         player.on("playpause", function() {
 66 |             done();
 67 |         });
 68 |         setTimeout(function() {
 69 |             player.pause();
 70 |         }, 200);
 71 |     });
 72 | 
 73 |     it('play and then finish', function (done) {
 74 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
 75 |         });
 76 |         player.play();
 77 |         player.on("playfinish", function(param) {
 78 |             const { pitch, bearing, coordinate } = param;
 79 |             expect(pitch).to.be.eql(357.3061768305339);
 80 |             expect(bearing).to.be.eql(87.03906385937773);
 81 |             expect(coordinate.x).to.be.eql(121.483742875808);
 82 |             expect(coordinate.y).to.be.eql(31.2617424212607);
 83 |             expect(coordinate.z).to.be.eql(105);
 84 |             done();
 85 |         });
 86 |         setTimeout(function() {
 87 |             player.finish();
 88 |         }, 200);
 89 |     });
 90 | 
 91 |     it('play and then cancel', function (done) {
 92 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
 93 |         });
 94 |         player.play();
 95 |         player.on("playcancel", function(param) {
 96 |             const { pitch, bearing, coordinate } = param;
 97 |             expect(pitch).to.be.eql(2.5986362164469186);
 98 |             expect(bearing).to.be.eql(-147.89374404407715);
 99 |             expect(coordinate.x).to.be.eql(121.475031060928);
100 |             expect(coordinate.y).to.be.eql(31.2611187865471);
101 |             expect(coordinate.z).to.be.eql(100);
102 |             done();
103 |         });
104 |         setTimeout(function() {
105 |             player.cancel();
106 |         }, 200);
107 |     });
108 | 
109 |     it('add more than one routeplayer', function (done) {
110 |         player = new maptalks.RoutePlayer(route, groupgllayer, {
111 |         });
112 |         player.play();
113 |         const newPlayer = new maptalks.RoutePlayer(route, groupgllayer);
114 |         newPlayer.play();
115 |         setTimeout(function() {
116 |             newPlayer.remove();
117 |             done();
118 |         }, 100);
119 |     });
120 | });
121 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "moduleResolution": "node",
 4 |         "resolveJsonModule": true,
 5 |         "allowSyntheticDefaultImports": true,
 6 |         "alwaysStrict": true,
 7 |         // "noImplicitAny": true,
 8 |         "declaration": true,
 9 |         "allowJs": false,
10 |         "module": "ES2015",
11 |         "target": "es6",
12 |         "sourceMap": true,
13 |         //dependencies lib version
14 |         "lib": [
15 |             "es5",
16 |             "es2015",
17 |             "dom"
18 |         ],
19 |         "outDir": "./dist",
20 |         "baseUrl": "./",
21 |         //custom types
22 |         "paths": {
23 |             "maptalks": [
24 |                 "./types/maptalks/index.d.ts"
25 |             ],
26 |             "deyihu-geometry-extrude": [
27 |                 "./types/deyihu-geometry-extrude/index.d.ts"
28 |             ]
29 |         }
30 |     },
31 |     "include": [
32 |         "./index.ts"
33 |     ]
34 | }


--------------------------------------------------------------------------------