Skip to content

Commit

Permalink
Finish: add new heatmap component, and heatmap type in overlay compon…
Browse files Browse the repository at this point in the history 
…ent is deprecated
  • Loading branch information
@leftstick
leftstick committed Apr 2, 2018
1 parent 421fb62 commit 7889dc0
Show file tree
Hide file tree
Showing 11 changed files with 683 additions and 271 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
]
},
"globals": {
"BMap": true
"BMap": true,
"BMapLib": true
}
}
2 changes: 2 additions & 0 deletions demo/js/features/apidoc/components/subs/apiContent/index.co
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default {
<doc-polyline ng-if="$ctrl.api === 'polyline'"></doc-polyline>
<doc-circle ng-if="$ctrl.api === 'circle'"></doc-circle>
<doc-polygon ng-if="$ctrl.api === 'polygon'"></doc-polygon>
<doc-heatmap ng-if="$ctrl.api === 'heatmap'"></doc-heatmap>
<doc-control ng-if="$ctrl.api === 'control'"></doc-control>
<doc-overlay ng-if="$ctrl.api === 'overlay'"></doc-overlay>

Expand All @@ -37,6 +38,7 @@ export default {
'polyline',
'circle',
'polygon',
'heatmap',
'control',
'overlay',
'map-options',
Expand Down
357 changes: 357 additions & 0 deletions demo/js/features/apidoc/components/subs/apiContent/subs/docHeatmap.co
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,357 @@
export default {
template: `
<p>
The <code>heatmap</code> component is sub-component of <code>baidu-map</code>. It is used to add <code>BMapLib.HeatmapOverlay</code> to the map.
</p>
<h2 class="title">Usage</h2>
<div class="snippet" highlight>
<pre><code class="html">&lt;baidu-map map-options="{expression}"&gt;
&lt;heatmap options="{expression}" dataset="{expression}" loaded="{expression}"&gt;&lt;heatmap&gt;
&lt;/baidu-map&gt;</code></pre>
</div>
<h2 class="title">Attributes</h2>
<blockquote>Required properties are in red</blockquote>
<table class="matrix">
<thead>
<tr>
<th style="width: 80px;">Param</th>
<th>Type</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>options</td>
<td><span class="label required">expression</span></td>
<td>Literal for constructing heatmap. See <a href="http://api.map.baidu.com/library/Heatmap/2.0/docs/symbols/BMapLib.HeatmapOverlay.html">options</a></td>
</tr>
<tr>
<td>dataset</td>
<td><span class="label">expression</span></td>
<td>
Data for displaying this heatmap. See <a href="http://api.map.baidu.com/library/Heatmap/2.0/docs/symbols/BMapLib.HeatmapOverlay.html">dataset</a>
</td>
</tr>
<tr>
<td>loaded</td>
<td><span class="label">expression</span></td>
<td>Expression to evaluate upon heatmap loaded event. (The object passed to this callback, <code>heatmap</code> for instance of <a href="http://api.map.baidu.com/library/Heatmap/2.0/docs/symbols/BMapLib.HeatmapOverlay.html" target="_blank">BMapLib.HeatmapOverlay</a>)</td>
</tr>
</tbody>
</table>
<h2 class="title">Example</h2>
<baidu-map map-options="$ctrl.opts">
<heatmap options="$ctrl.heatmapOpts" dataset="$ctrl.heatmapDataset" loaded="$ctrl.heatmapLoaded(heatmap)"></heatmap>
</baidu-map>
<div class="snippet" highlight>
<pre><code class="html">&lt;baidu-map map-options="opts"&gt;
&lt;heatmap options="heatmapOpts" dataset="heatmapDataset" loaded="heatmapLoaded(heatmap)"&gt;&lt;/heatmap&gt;
&lt;/baidu-map&gt;</code></pre>
</div>
<br/>
<div class="snippet" highlight>
<pre><code class="javascript">app.controller('demoCtrl', ['$scope',
function($scope) {
$scope.opts = {
centerAndZoom: {
longitude: 116.418261,
latitude: 39.921984,
zoom: 15
}
};

$scope.heatmapDataset = {
data: [
{
lng: 116.421674,
lat: 39.924396,
count: 21
},
{
lng: 116.427268,
lat: 39.92267,
count: 1
},
{
lng: 116.417721,
lat: 39.920034,
count: 51
},
{
lng: 116.412456,
lat: 39.92667,
count: 7
},
{
lng: 116.420432,
lat: 39.919114,
count: 11
},
{
lng: 116.425013,
lat: 39.921611,
count: 35
},
{
lng: 116.418733,
lat: 39.931037,
count: 22
},
{
lng: 116.419336,
lat: 39.931134,
count: 4
},
{
lng: 116.413557,
lat: 39.923254,
count: 5
},
{
lng: 116.418367,
lat: 39.92943,
count: 3
},
{
lng: 116.424312,
lat: 39.919621,
count: 100
},
{
lng: 116.423874,
lat: 39.919447,
count: 87
},
{
lng: 116.424225,
lat: 39.923091,
count: 32
},
{
lng: 116.417801,
lat: 39.921854,
count: 44
},
{
lng: 116.417129,
lat: 39.928227,
count: 21
},
{
lng: 116.426426,
lat: 39.922286,
count: 80
}],
max: 100
};

//below are for heatmap
$scope.heatmapOpts = {
visible: true
};

$scope.heatmapLoaded = function(heatmap) {
console.log('heatmap loaded', heatmap)
};
}
]);</code></pre>
</div>
`,
controller: class {
/* @ngInject */
constructor() {
this.opts = {
centerAndZoom: {
longitude: 116.418261,
latitude: 39.921984,
zoom: 15
}
}

this.heatmapDataset = {
data: [
{
lng: 116.418261,
lat: 39.921984,
count: 50
},
{
lng: 116.423332,
lat: 39.916532,
count: 51
},
{
lng: 116.419787,
lat: 39.930658,
count: 15
},
{
lng: 116.418455,
lat: 39.920921,
count: 40
},
{
lng: 116.418843,
lat: 39.915516,
count: 100
},
{
lng: 116.42546,
lat: 39.918503,
count: 6
},
{
lng: 116.423289,
lat: 39.919989,
count: 18
},
{
lng: 116.418162,
lat: 39.915051,
count: 80
},
{
lng: 116.422039,
lat: 39.91782,
count: 11
},
{
lng: 116.41387,
lat: 39.917253,
count: 7
},
{
lng: 116.41773,
lat: 39.919426,
count: 42
},
{
lng: 116.421107,
lat: 39.916445,
count: 4
},
{
lng: 116.417521,
lat: 39.917943,
count: 27
},
{
lng: 116.419812,
lat: 39.920836,
count: 23
},
{
lng: 116.420682,
lat: 39.91463,
count: 60
},
{
lng: 116.415424,
lat: 39.924675,
count: 8
},
{
lng: 116.419242,
lat: 39.914509,
count: 15
},
{
lng: 116.422766,
lat: 39.921408,
count: 25
},
{
lng: 116.421674,
lat: 39.924396,
count: 21
},
{
lng: 116.427268,
lat: 39.92267,
count: 1
},
{
lng: 116.417721,
lat: 39.920034,
count: 51
},
{
lng: 116.412456,
lat: 39.92667,
count: 7
},
{
lng: 116.420432,
lat: 39.919114,
count: 11
},
{
lng: 116.425013,
lat: 39.921611,
count: 35
},
{
lng: 116.418733,
lat: 39.931037,
count: 22
},
{
lng: 116.419336,
lat: 39.931134,
count: 4
},
{
lng: 116.413557,
lat: 39.923254,
count: 5
},
{
lng: 116.418367,
lat: 39.92943,
count: 3
},
{
lng: 116.424312,
lat: 39.919621,
count: 100
},
{
lng: 116.423874,
lat: 39.919447,
count: 87
},
{
lng: 116.424225,
lat: 39.923091,
count: 32
},
{
lng: 116.417801,
lat: 39.921854,
count: 44
},
{
lng: 116.417129,
lat: 39.928227,
count: 21
},
{
lng: 116.426426,
lat: 39.922286,
count: 80
}
],
max: 100
}

// below are for heatmap
this.heatmapOpts = {
visible: true
}

this.heatmapLoaded = function(heatmap) {
console.log('heatmap loaded', heatmap)
}
}
}
}
Loading

0 comments on commit 7889dc0

Please sign in to comment.