123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsDeckGL_Vue"></title>
- <script type="text/javascript" include="vue,jquery,papaparse,widgets" src="../js/include-web.js"></script>
- <script include="deck,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
- <style>
- #main {
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
- <sm-deckgl-layer layer-type="hexagon-layer" :options="deckglOptions"></sm-deckgl-layer>
- </sm-web-map>
- </div>
- <script>
- widgets.loader.showLoader('data loading...');
- var _this = this,
- popup;
- $.get('../data/deck.gl/strees_data.csv', function(csvstr) {
- widgets.loader.removeLoader();
- // 构造数据
- var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
- var deckglOptions = {
- data: features.data,
- props: {
- extruded: true,
- radius: 55,
- autoHighlight: true,
- upperPercentile: 99,
- coverage: 0.8,
- elevationScale: 400,
- colorRange: [
- [43, 30, 61, 255],
- [56, 60, 101, 255],
- [62, 95, 126, 255],
- [73, 131, 138, 255],
- [94, 162, 141, 255],
- [130, 187, 146, 255],
- [174, 206, 161, 255],
- [214, 222, 191, 255],
- ],
- opacity: 0.8,
- // lightSettings 光照配置参数,配置三维光照效果,
- lightSettings: {
- lightsPosition: [-122.5, 37.7, 3000, -122.2, 37.9, 3000], // 指定为`[x,y,z]`的光在平面阵列中的位置
- ambientRatio: 0.2, //光照的环境比例
- diffuseRatio: 0.5, //光的漫反射率
- specularRatio: 0.3, //光的镜面反射率
- lightsStrength: [1.0, 0.0, 2.0, 0.0], //平面阵列中指定为“[x,y]`的灯的强度。 长度应该是`2 x numberOfLights`
- numberOfLights: 4, //光照值
- },
- //如需了解其他配置详情,请查看 DeckglLayer api
- onHover: function(feature) {
- if (!popup) {
- popup = new mapboxgl.Popup({
- anchor: 'bottom',
- closeButton: false,
- offset: {
- bottom: [0, -10],
- },
- });
- }
- if (!feature.object) {
- popup.remove();
- return;
- }
- //+" "+feature.lngLat
- popup.setHTML('Point Count: ' + feature.object.points.length);
- popup.setLngLat(_this.map.unproject([feature.x, feature.y]));
- popup.addTo(_this.map);
- },
- },
- callback: {
- getPosition: function(feature) {
- if (!feature.latitude || !feature.longitude) {
- return [0, 0];
- }
- return [Number(feature.longitude), Number(feature.latitude)];
- },
- },
- };
- new Vue({
- el: '#main',
- data() {
- var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
- 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='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
- return {
- deckglOptions: deckglOptions,
- mapOptions: {
- container: 'map', // container id
- style: {
- version: 8,
- sources: {
- 'raster-tiles': {
- attribution: attribution,
- type: 'raster',
- tiles: [
- host +
- '/iserver/services/map-china400/rest/maps/ChinaDark/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.430844, 37.772276],
- zoom: 12,
- pitch: 60,
- bearing: 36,
- },
- };
- },
- methods: {
- mapIsLoaded(e) {
- _this.map = e.map;
- },
- },
- });
- });
- </script>
- </body>
- </html>
|