mapvCsvcar_4326.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset='utf-8' />
  8. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  9. <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
  10. <title data-i18n="resources.title_mapvCsvcarWGS84"></title>
  11. <style>
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. #map {
  17. position: absolute;
  18. top: 0;
  19. bottom: 0;
  20. width: 100%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id='map'></div>
  26. <script type="text/javascript" include='mapbox-gl-enhance,mapv,proj4' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  27. <script type="text/javascript">
  28. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  29. var map = new mapboxgl.Map({
  30. container: 'map',
  31. style: {
  32. "version": 8,
  33. "sources": {
  34. "raster-tiles": {
  35. "type": "raster",
  36. "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
  37. "rasterSource":"iserver",
  38. "tileSize": 256
  39. }
  40. },
  41. "layers": [{
  42. "id": "simple-tiles",
  43. "type": "raster",
  44. "source": "raster-tiles",
  45. "minzoom": 0,
  46. "maxzoom": 22
  47. }]
  48. },
  49. crs: mapboxgl.CRS.EPSG4326,
  50. center: [106.563777, 29.578285],
  51. zoom: 11
  52. });
  53. map.on('load', function () {
  54. $.get('../data/car.csv', function (csvstr) {
  55. var dataSet = mapv.csv.getDataSet(csvstr);
  56. for (var i = 0; i < dataSet._data.length; i++) {
  57. var item = dataSet._data[i];
  58. for (var j = 0; j < item.geometry.coordinates.length; j++) {
  59. dataSet._data[i].geometry.coordinates[j] = item.geometry.coordinates[j];
  60. dataSet._data[i].geometry.coordinates[j] = dataSet._data[i].geometry.coordinates[j];
  61. }
  62. }
  63. var options = {
  64. strokeStyle: 'rgba(50, 50, 255, 0.8)',
  65. lineWidth: 0.05,
  66. globalCompositeOperation: 'lighter',
  67. draw: 'simple'
  68. };
  69. new mapboxgl.supermap.MapvLayer(map, dataSet, options);
  70. });
  71. setTimeout(function () {
  72. new mapboxgl.Popup({ closeOnClick: false })
  73. .setLngLat(map.getCenter())
  74. .setHTML(resources.text_iClient)
  75. .addTo(map);
  76. }, 1000)
  77. });
  78. </script>
  79. </body>
  80. </html>