mapvBeijingVillage.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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_mapvBeijingVillage"></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: [116.443571, 39.887549],
  56. zoom: 11
  57. });
  58. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  59. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  60. new mapboxgl.Popup({closeOnClick: false})
  61. .setLngLat(map.getCenter())
  62. .setHTML(resources.text_iClient)
  63. .addTo(map);
  64. $.get('../data/beijing-village.json', function (data) {
  65. var dataSet = new mapv.DataSet(data);
  66. var options = {
  67. fillStyle: 'rgba(255, 80, 53, 0.8)',
  68. strokeStyle: 'rgba(250, 255, 53, 0.8)',
  69. size: 3,
  70. lineWidth: 1,
  71. draw: 'simple'
  72. };
  73. //mapboxgl.supermap.MapvLayer 构造函数的第一个 map 参数将在下个版本遗弃
  74. var mapVLayer = new mapboxgl.supermap.MapvLayer("", dataSet, options);
  75. map.addLayer(mapVLayer);
  76. });
  77. </script>
  78. </body>
  79. </html>