Skip to content

Commit e55880c

Browse files
committed
【feature】 新增 热力图图层微件范例 review by songym
1 parent 7d28324 commit e55880c

File tree

5 files changed

+122
-0
lines changed

5 files changed

+122
-0
lines changed

examples/locales/en-US/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,7 @@ window.examplesResources = {
544544
"title_widgetsMapV_Vue": 'MapV Layer Widget(Vue)',
545545
"title_widgetsDeckGL_Vue": 'DeckGL Layer Widget(Vue)',
546546
"title_widgetsVectorTile_Vue": 'Vector Tile Layer Widget(Vue)',
547+
"title_widgetsHeatmap_Vue": 'Heatmap Layer Widget(Vue)',
547548

548549
"text_code": "Forward Match",
549550
"text_decode": "Reverse Match",

examples/locales/zh-CN/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,7 @@ window.examplesResources = {
492492
"title_widgetsMapV_Vue": 'MapV 图层微件(Vue)',
493493
"title_widgetsDeckGL_Vue": 'DeckGL 图层微件(Vue)',
494494
"title_widgetsVectorTile_Vue": '矢量瓦片图层微件(Vue)',
495+
"title_widgetsHeatmap_Vue": '热力图图层微件(Vue)',
495496

496497
"text_code": "正向匹配",
497498
"text_decode": "反向匹配",

examples/mapboxgl/config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1186,6 +1186,12 @@ var exampleConfig = {
11861186
version: "9.1.2",
11871187
thumbnail: "widgets_cluster_vue.png",
11881188
fileName: "widgets_cluster_vue"
1189+
} ,{
1190+
name: "热力图图层",
1191+
name_en: "Heatmap layer",
1192+
version: "9.1.2",
1193+
thumbnail: "widgets_heatmap_vue.png",
1194+
fileName: "widgets_heatmap_vue"
11891195
} ,{
11901196
name: "MapV 图层",
11911197
name_en: "MapV layer",
20.5 KB
Loading
Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_widgetsHeatmap_Vue"></title>
9+
<script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-widgets-vue" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="main">
22+
<sm-map :map-options="mapOptions">
23+
<sm-heatmap-layer :data="data" :paint="paint"></sm-heatmap-layer>
24+
</sm-map>
25+
</div>
26+
<script>
27+
var heatFeatures = [],
28+
heatMapSource,
29+
paint;
30+
$.get('../data/chinaEarthquake.csv', function(csvstr) {
31+
var data = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
32+
for (var i = 0; i < data.length; i += 6) {
33+
if (data[i].Y <= 85) {
34+
heatFeatures.push({
35+
geometry: {
36+
coordinates: [parseFloat(data[i].X), parseFloat(data[i].Y)],
37+
type: 'Point',
38+
},
39+
properties: { value: data[i].level / 50, id: i },
40+
type: 'Feature',
41+
});
42+
}
43+
}
44+
paint = {
45+
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
46+
'heatmap-color': [
47+
'interpolate',
48+
['linear'],
49+
['heatmap-density'],
50+
0,
51+
'rgba(33,102,172,0)',
52+
0.2,
53+
'rgb(103,169,207)',
54+
0.4,
55+
'rgb(209,229,240)',
56+
0.6,
57+
'rgb(253,219,199)',
58+
0.8,
59+
'rgb(239,138,98)',
60+
1,
61+
'rgb(178,24,43)',
62+
],
63+
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
64+
'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0],
65+
};
66+
new Vue({
67+
el: '#main',
68+
data() {
69+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
70+
var attribution =
71+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
72+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
73+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
74+
return {
75+
data: {
76+
type: 'FeatureCollection',
77+
features: heatFeatures,
78+
},
79+
paint: paint,
80+
mapOptions: {
81+
container: 'map', // container id
82+
style: {
83+
version: 8,
84+
sources: {
85+
'raster-tiles': {
86+
attribution: attribution,
87+
type: 'raster',
88+
tiles: [
89+
host +
90+
'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
91+
],
92+
tileSize: 256,
93+
},
94+
},
95+
layers: [
96+
{
97+
id: 'simple-tiles',
98+
type: 'raster',
99+
source: 'raster-tiles',
100+
minzoom: 0,
101+
maxzoom: 22,
102+
},
103+
],
104+
},
105+
center: [120.143, 30.236],
106+
zoom: 3,
107+
},
108+
};
109+
},
110+
});
111+
});
112+
</script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy