mapvCsvcar.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html lang="en-US">
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  9. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  10. <title data-i18n="resources.title_mapvCsvcar"></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. <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
  24. <script type="text/javascript" include="mapv" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  25. </head>
  26. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
  27. <div id="map"></div>
  28. <script type="text/javascript">
  29. var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  30. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  31. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
  32. "<a href='https://mapv.baidu.com' target='_blank'>© 2018 百度 MapV</a>";
  33. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  34. var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
  35. var map = new mapboxgl.Map({
  36. container: 'map',
  37. style: {
  38. "version": 8,
  39. "sources": {
  40. "raster-tiles": {
  41. "attribution": attribution,
  42. "type": "raster",
  43. "tiles": [tileURL],
  44. "tileSize": 256,
  45. },
  46. },
  47. "layers": [{
  48. "id": "simple-tiles",
  49. "type": "raster",
  50. "source": "raster-tiles",
  51. "minzoom": 0,
  52. "maxzoom": 22
  53. }]
  54. },
  55. center: [106.563777, 29.578285],
  56. zoom: 11
  57. });
  58. new mapboxgl.Popup({closeOnClick: false})
  59. .setLngLat(map.getCenter())
  60. .setHTML(resources.text_iClient)
  61. .addTo(map);
  62. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  63. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  64. $.get('../data/car.csv', function (csvstr) {
  65. var options = {
  66. strokeStyle: 'rgba(50, 50, 255, 0.8)',
  67. lineWidth: 0.05,
  68. globalCompositeOperation: 'lighter',
  69. draw: 'simple'
  70. };
  71. var dataSet = mapv.csv.getDataSet(csvstr);
  72. //mapboxgl.supermap.MapvLayer 构造函数的第一个 map 参数将在下个版本遗弃
  73. var mapVLayer = new mapboxgl.supermap.MapvLayer("", dataSet, options);
  74. map.addLayer(mapVLayer);
  75. });
  76. </script>
  77. </body>
  78. </html>