From 7889dc097713a7c26a070fe10477822520611fee Mon Sep 17 00:00:00 2001 From: "Howard.Zuo" Date: Mon, 2 Apr 2018 11:20:23 +0800 Subject: [PATCH] Finish: add new heatmap component, and heatmap type in overlay component is deprecated --- .eslintrc.json | 3 +- .../components/subs/apiContent/index.co | 2 + .../subs/apiContent/subs/docHeatmap.co | 357 ++++++++++++++++ .../subs/apiContent/subs/docOverlay.co | 384 +++++++++--------- .../components/subs/apiSidebar/index.co | 1 + demo/js/features/apidoc/main.js | 2 + src/components/heatmap.js | 57 +++ src/components/heatmap/index.js | 10 +- src/components/overlay.js | 90 ++-- src/helper/heatmapScriptLoader.js | 46 +-- src/index.js | 2 + 11 files changed, 683 insertions(+), 271 deletions(-) create mode 100644 demo/js/features/apidoc/components/subs/apiContent/subs/docHeatmap.co create mode 100644 src/components/heatmap.js diff --git a/.eslintrc.json b/.eslintrc.json index 76931a9..6f04905 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,6 +21,7 @@ ] }, "globals": { - "BMap": true + "BMap": true, + "BMapLib": true } } diff --git a/demo/js/features/apidoc/components/subs/apiContent/index.co b/demo/js/features/apidoc/components/subs/apiContent/index.co index e96a97d..1cd8f84 100644 --- a/demo/js/features/apidoc/components/subs/apiContent/index.co +++ b/demo/js/features/apidoc/components/subs/apiContent/index.co @@ -14,6 +14,7 @@ export default { + @@ -37,6 +38,7 @@ export default { 'polyline', 'circle', 'polygon', + 'heatmap', 'control', 'overlay', 'map-options', diff --git a/demo/js/features/apidoc/components/subs/apiContent/subs/docHeatmap.co b/demo/js/features/apidoc/components/subs/apiContent/subs/docHeatmap.co new file mode 100644 index 0000000..352d768 --- /dev/null +++ b/demo/js/features/apidoc/components/subs/apiContent/subs/docHeatmap.co @@ -0,0 +1,357 @@ +export default { + template: ` +

+ The heatmap component is sub-component of baidu-map. It is used to add BMapLib.HeatmapOverlay to the map. +

+

Usage

+
+ 
<baidu-map map-options="{expression}">
+    <heatmap options="{expression}" dataset="{expression}" loaded="{expression}"><heatmap>    
+</baidu-map>
+
+

Attributes

+
Required properties are in red
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ParamTypeDetails
optionsexpressionLiteral for constructing heatmap. See options
datasetexpression + Data for displaying this heatmap. See dataset +
loadedexpressionExpression to evaluate upon heatmap loaded event. (The object passed to this callback, heatmap for instance of BMapLib.HeatmapOverlay)
+

Example

+ + + +
+ 
<baidu-map map-options="opts">
+    <heatmap options="heatmapOpts" dataset="heatmapDataset" loaded="heatmapLoaded(heatmap)"></heatmap>
+</baidu-map>
+
+
+
+ 
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)
+        };
+    }
+]);
+
+ `, + 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) + } + } + } +} diff --git a/demo/js/features/apidoc/components/subs/apiContent/subs/docOverlay.co b/demo/js/features/apidoc/components/subs/apiContent/subs/docOverlay.co index 3f2ed51..edd8f14 100644 --- a/demo/js/features/apidoc/components/subs/apiContent/subs/docOverlay.co +++ b/demo/js/features/apidoc/components/subs/apiContent/subs/docOverlay.co @@ -1,10 +1,10 @@ const NEW_SHANGHAI_INTERNATIONAL_TOWER = { - longitude: 116.418261, - latitude: 39.921984 -}; + longitude: 116.418261, + latitude: 39.921984 +} export default { - template: ` + template: `

The overlay component is sub-component of baidu-map. It is used to add BMap.Overlay to the map.

@@ -152,193 +152,193 @@ export default { ]); `, - controller: class { - /* @ngInject */ - constructor() { - this.opts = { - centerAndZoom: { - ...NEW_SHANGHAI_INTERNATIONAL_TOWER, - zoom: 16 - } - }; - this.heatmapOpts = { - visible: true - }; - this.dataSet = { - 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 - }; - + controller: class { + /* @ngInject */ + constructor() { + this.opts = { + centerAndZoom: { + ...NEW_SHANGHAI_INTERNATIONAL_TOWER, + zoom: 16 } + } + this.heatmapOpts = { + visible: true + } + this.dataSet = { + 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 + } } -}; + } +} diff --git a/demo/js/features/apidoc/components/subs/apiSidebar/index.co b/demo/js/features/apidoc/components/subs/apiSidebar/index.co index d62eb0e..db2e3d3 100644 --- a/demo/js/features/apidoc/components/subs/apiSidebar/index.co +++ b/demo/js/features/apidoc/components/subs/apiSidebar/index.co @@ -11,6 +11,7 @@ export default {
polyline
circle
polygon
+
heatmap
control
overlay
Models
diff --git a/demo/js/features/apidoc/main.js b/demo/js/features/apidoc/main.js index 8bc86df..ba311fc 100644 --- a/demo/js/features/apidoc/main.js +++ b/demo/js/features/apidoc/main.js @@ -9,6 +9,7 @@ import docMarker from './components/subs/apiContent/subs/docMarker' import docPolyline from './components/subs/apiContent/subs/docPolyline' import docCircle from './components/subs/apiContent/subs/docCircle' import docPolygon from './components/subs/apiContent/subs/docPolygon' +import docHeatmap from './components/subs/apiContent/subs/docHeatmap' import docPoint from './components/subs/apiContent/subs/docPoint' import docMarkerOptions from './components/subs/apiContent/subs/docMarkerOptions' import docSize from './components/subs/apiContent/subs/docSize' @@ -31,6 +32,7 @@ export default { docPolyline, docCircle, docPolygon, + docHeatmap, docPoint, docMarkerOptions, docSize, diff --git a/src/components/heatmap.js b/src/components/heatmap.js new file mode 100644 index 0000000..ffd18f8 --- /dev/null +++ b/src/components/heatmap.js @@ -0,0 +1,57 @@ +import load from '../helper/heatmapScriptLoader' + +export default { + bindings: { + dataset: '<', + options: '<', + loaded: '&' + }, + require: { + mapCtrl: '^baiduMap' + }, + template: '', + controller: class { + /* @ngInject */ + constructor($scope, $attrs) { + this.$scope = $scope + this.$attrs = $attrs + } + + $onInit() { + this.mapCtrl.mapReady + .then(() => { + return load() + }) + .then(() => { + const heatmap = (this.heatmap = new BMapLib.HeatmapOverlay(this.options)) + this.mapCtrl.addOverlay(heatmap) + return heatmap + }) + .then(heatmap => { + this.loaded({ + heatmap + }) + this.$scope.$apply() + if (this.dataset) { + heatmap.setDataSet(this.dataset) + } + }) + } + + $onChanges(changes) { + if (!this.heatmap) { + return + } + if (changes.options && changes.options.currentValue) { + this.heatmap.setOptions(changes.options.currentValue) + } + if (changes.dataset && changes.dataset.currentValue) { + this.heatmap.setDataSet(changes.dataset.currentValue) + } + } + + $onDestroy() { + this.mapCtrl.removeOverlay(this.heatmap) + } + } +} diff --git a/src/components/heatmap/index.js b/src/components/heatmap/index.js index a4e04f4..6c426b7 100644 --- a/src/components/heatmap/index.js +++ b/src/components/heatmap/index.js @@ -1,9 +1,7 @@ -import load from '../../helper/heatmapScriptLoader'; - +import load from '../../helper/heatmapScriptLoader' export function createHeatmapOverlay(options) { - return load() - .then(() => { - return new BMapLib.HeatmapOverlay(options); - }); + return load().then(() => { + return new BMapLib.HeatmapOverlay(options) + }) } diff --git a/src/components/overlay.js b/src/components/overlay.js index 8f6530f..d413aee 100644 --- a/src/components/overlay.js +++ b/src/components/overlay.js @@ -1,59 +1,55 @@ -import {overlayTypeCheck} from '../helper/validate'; -import {createHeatmapOverlay} from './heatmap'; +import { overlayTypeCheck } from '../helper/validate' +import { createHeatmapOverlay } from './heatmap/index' export default { - bindings: { - type: '@', - options: '<', - dataset: '<' - }, - require: { - mapCtrl: '^baiduMap' - }, - template: '', - controller: class { - /* @ngInject */ - constructor() {} - - $onInit() { - overlayTypeCheck(this.type); - - this.realType = this.type.toLowerCase(); - - this.mapCtrl - .mapReady - .then(() => createOverlay(this.realType, this.options)) - .then(overlay => { - this.mapCtrl.addOverlay(overlay); - this.overlay = overlay; - setExtraData(this.realType, this.overlay, this.dataset); - return overlay; - }); - } - - $onChanges(changes) { - if (changes.dataset && changes.dataset.currentValue) { - setExtraData(this.realType, this.overlay, changes.dataset.currentValue); - } + bindings: { + type: '@', + options: '<', + dataset: '<' + }, + require: { + mapCtrl: '^baiduMap' + }, + template: '', + controller: class { + $onInit() { + overlayTypeCheck(this.type) + + this.realType = this.type.toLowerCase() + + this.mapCtrl.mapReady.then(() => createOverlay(this.realType, this.options)).then(overlay => { + this.mapCtrl.addOverlay(overlay) + this.overlay = overlay + setExtraData(this.realType, this.overlay, this.dataset) + return overlay + }) + } - } + $onChanges(changes) { + if (changes.dataset && changes.dataset.currentValue) { + setExtraData(this.realType, this.overlay, changes.dataset.currentValue) + } + } - $onDestroy() { - this.mapCtrl.removeOverlay(this.overlay); - } + $onDestroy() { + this.mapCtrl.removeOverlay(this.overlay) } -}; + } +} function createOverlay(type, options) { - if (type === 'heatmap') { - return createHeatmapOverlay(options); - } + if (type === 'heatmap') { + console.warn( + 'heatmap type is deprecated, please try with new component, see: https://leftstick.github.io/BaiduMapForAngularJS/#!/apidoc?api=heatmap' + ) + return createHeatmapOverlay(options) + } } function setExtraData(type, overlay, data) { - if (type === 'heatmap') { - if (data) { - overlay.setDataSet(data); - } + if (type === 'heatmap') { + if (data) { + overlay.setDataSet(data) } + } } diff --git a/src/helper/heatmapScriptLoader.js b/src/helper/heatmapScriptLoader.js index ec8de00..382fd17 100644 --- a/src/helper/heatmapScriptLoader.js +++ b/src/helper/heatmapScriptLoader.js @@ -1,32 +1,28 @@ - -const SCRIPT_URL = '//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js'; +const SCRIPT_URL = '//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js' export default function() { + const loadHeatMapPromise = window.loadHeatMapPromise + if (loadHeatMapPromise) { + return loadHeatMapPromise + } - const loadHeatMapPromise = window.loadHeatMapPromise; - if (loadHeatMapPromise) { - return loadHeatMapPromise; - } - - //eslint-disable-next-line - return window.loadHeatMapPromise = appendScriptTag(SCRIPT_URL); + // eslint-disable-next-line + return (window.loadHeatMapPromise = appendScriptTag(SCRIPT_URL)) } function appendScriptTag(url) { - return new Promise((resolve, reject) => { - const script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = url; - script.onerror = function() { - document.body.removeChild(script); - - setTimeout(() => { - appendScriptTag(url); - }, 30000); - }; - script.onload = resolve; - document.body.appendChild(script); - - }); + return new Promise((resolve, reject) => { + const script = document.createElement('script') + script.type = 'text/javascript' + script.src = url + script.onerror = function() { + document.body.removeChild(script) + + setTimeout(() => { + appendScriptTag(url) + }, 30000) + } + script.onload = resolve + document.body.appendChild(script) + }) } - diff --git a/src/index.js b/src/index.js index 5947e5b..c3fb400 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import marker from './components/marker' import polyline from './components/polyline' import circle from './components/circle' import polygon from './components/polygon' +import heatmap from './components/heatmap' import control from './components/control' import overlay from './components/overlay' import mapScriptProvider from './provider/mapScript' @@ -22,6 +23,7 @@ angular .component('polyline', polyline) .component('circle', circle) .component('polygon', polygon) + .component('heatmap', heatmap) .component('control', control) .component('overlay', overlay)