| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
- <title data-i18n="resources.title_mb_deckglLayer_polygonLayer"></title>
- <style>
- body {
- margin: 0;
- overflow: hidden;
- background: #fff;
- width: 100%;
- height: 100%;
- }
- #map {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div id="map"></div>
- <script type="text/javascript" include="widgets" src="../js/include-web.js"></script>
- <script type="text/javascript" include="deck" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
- <script type="text/javascript">
- var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
- url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
- var map, deckglLayer;
- var attribution =
- "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
- " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
- " Map Data <span>© <a href='https://uber.github.io/deck.gl' target='_blank'>deck.gl</a></span> ";
- map = new mapboxgl.Map({
- container: 'map',
- style: {
- version: 8,
- sources: {
- 'raster-tiles': {
- attribution: attribution,
- type: 'raster',
- tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
- tileSize: 256
- }
- },
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22
- }
- ]
- },
- center: [-122.4628047, 37.7688628],
- zoom: 11.5,
- pitch: 60,
- bearing: 36
- });
- map.addControl(new mapboxgl.NavigationControl(), 'top-left');
- widgets.loader.showLoader('data loading...');
- $.get('../data/deck.gl/sf-zipcodes.json', function(features) {
- widgets.loader.removeLoader();
- addLayer(features);
- });
- function addLayer(features) {
- deckglLayer = new mapboxgl.supermap.DeckglLayer('polygon-layer', {
- data: features,
- props: {
- extruded: true, //是否拉伸建筑，可选参数，默认为 false；
- stroked: true, //是否绘制边线，可选参数，默认为 true；
- filled: true, //是否填充面，可选参数，默认为 true
- wireframe: true, //当面被拉伸为建筑时，是否描绘建筑物边线，可选参数，默认为 false；
- lineWidthMinPixels: 1 //线宽最小像素值，可选参数，默认为 0；
- //该类型可配置的其他参数有：
- //elevationScale 海拔比例，可选参数，默认为 1；
- //lineWidthScale 线宽比例，可选参数，默认为 1；
- //lineWidthMaxPixels 线宽最大像素值，可选参数，默认为 Number.MAX_SAFE_INTEGER；
- //lineJointRounded 节点是否绘制为弧形，可选参数，默认为 false；
- //lineMiterLimit 节点相对于线宽的最大范围，可选参数，默认为 4，仅在 lineJointRounded 为 false 时有效；
- //lineDashJustified 是否虚线形式显示，可选参数，默认为 false，仅在 getLineDashArray() 回调函数被指定时有效；
- //fp64 否应以高精度64位模式呈现图层，可选参数，默认为 false；
- },
- callback: {
- getPolygon: function(d) {
- return d.contour;
- },
- getElevation: function(d) {
- return d.population / d.area / 10;
- },
- getFillColor: function(d) {
- return [d.population / d.area / 60, 140, 0];
- },
- getLineColor: function() {
- return [80, 80, 80]
- },
- getLineWidth: 1
- }
- });
- map.addLayer(deckglLayer);
- }
- </script>
- </body>
- </html>
|
