123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title data-i18n="resources.title_animatorCar"></title>
- <script type="text/javascript" src="../js/include-web.js"></script>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
- <script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
- <script type="text/javascript">
- var host = window.isLocal ? window.server : "https://iserver.supermap.io";
- var map, url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
- map = L.map('map', {
- crs: L.CRS.NonEarthCRS({
- bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
- origin: L.point(48.4, -55.58)
- }),
- center: [-3900, 4700],
- maxZoom: 18,
- zoom: 3
- });
- L.supermap.tiledMapLayer(url).addTo(map);
- queryData();
- function queryData() {
- var param = new SuperMap.QueryBySQLParameters({
- queryParams: {
- name: "BusLine@Changchun#1",
- attributeFilter: "SmID > 0"
- }
- });
- L.supermap
- .queryService(url)
- .queryBySQL(param, function (serviceResult) {
- addlayers(processData(serviceResult.result.recordsets[0].features.features));
- });
- function processData(features) {
- var busLines = [].concat.apply([], features.map(function (busLine) {
- var points = busLine.geometry.coordinates;
- return {
- coords: points,
- effect: {
- constantSpeed: 60,
- show: true,
- trailLength: 0,
- symbolSize: 30,
- symbol: function () {
- if ((Math.round(Math.random() * 2) % 2)) {
- return 'image://../classic/images/blueCar.png'
- } else {
- return 'image://../classic/images/redCar.png'
- }
- }()
- },
- };
- }));
- return busLines;
- }
- }
- function addlayers(busLines) {
- var option = {
- series: [
- {
- type: 'lines',
- coordinateSystem: 'leaflet',
- polyline: true,
- data: busLines,
- silent: true,
- lineStyle: {
- normal: {
- opacity: 0.2,
- width: 2,
- color: '#000'
- }
- },
- progressiveThreshold: 500,
- progressive: 200,
- zlevel: 2
- },
- {
- type: 'lines',
- coordinateSystem: 'leaflet',
- polyline: true,
- data: busLines,
- lineStyle: {
- normal: {
- width: 0
- }
- },
- effect: {
- constantSpeed: 60,
- show: true,
- trailLength: 0,
- symbolSize: 30,
- },
- zlevel: 1
- }]
- };
- L.supermap.echartsLayer(option).addTo(map);
- }
- </script>
- </body>
- </html>
|