-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
235 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
demo/js/features/apidoc/components/subs/apiContent/subs/docPolygon.co
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| export default { | ||
| template: ` | ||
| <p> | ||
| The <code>polygon</code> component is sub-component of <code>baidu-map</code>. It is used to add <code>BMap.Polygon</code> to the map. | ||
| </p> | ||
| <h2 class="title">Usage</h2> | ||
| <div class="snippet" highlight> | ||
| <pre><code class="html"><baidu-map map-options="{expression}"> | ||
| <polygon points="{expression}" options="{expression}" loaded="{expression}"><polygon> | ||
| </baidu-map></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>points</td> | ||
| <td><span class="label required">expression</span></td> | ||
| <td>How polygon draws. Should be Array of point, See <a href="#!/apidoc?api=point">point</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td>options</td> | ||
| <td><span class="label">expression</span></td> | ||
| <td> | ||
| Literal for constructing polygon. See <a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b15">PolygonOptions</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>loaded</td> | ||
| <td><span class="label">expression</span></td> | ||
| <td>Expression to evaluate upon polygon loaded event. (The object passed to this callback, <code>polygon</code> for instance of <a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b14" target="_blank">BMap.Polygon</a>)</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <h2 class="title">Example</h2> | ||
| <baidu-map map-options="$ctrl.opts"> | ||
| <polygon points="$ctrl.points" options="$ctrl.polygonOpts" loaded="$ctrl.polygonLoaded(polygon)"></polygon> | ||
| </baidu-map> | ||
| <div class="snippet" highlight> | ||
| <pre><code class="html"><baidu-map map-options="opts"> | ||
| <polygon point="points" options="polygonOpts" loaded="polygonLoaded(polygon)"></polygon> | ||
| </baidu-map></code></pre> | ||
| </div> | ||
| <br/> | ||
| <div class="snippet" highlight> | ||
| <pre><code class="javascript">app.controller('demoCtrl', ['$scope', | ||
| function($scope) { | ||
| $scope.opts = { | ||
| centerAndZoom: { | ||
| longitude: 116.404, | ||
| latitude: 39.915, | ||
| zoom: 14 | ||
| } | ||
| }; | ||
|
|
||
| $scope.points = [ | ||
| { | ||
| longitude: 116.387112, | ||
| latitude: 39.920977 | ||
| }, { | ||
| longitude: 116.385243, | ||
| latitude: 39.913063 | ||
| }, { | ||
| longitude: 116.394226, | ||
| latitude: 39.917988 | ||
| }, { | ||
| longitude: 116.401772, | ||
| latitude: 39.921364 | ||
| }, { | ||
| longitude: 116.41248, | ||
| latitude: 39.927893 | ||
| } | ||
| ]; | ||
|
|
||
| //below are for polygon | ||
| $scope.polygonOpts = { | ||
| strokeColor: 'blue', | ||
| strokeWeight: 2 | ||
| }; | ||
|
|
||
| $scope.polygonLoaded = function(polygon) { | ||
| console.log('polygon loaded', polygon) | ||
| }; | ||
| } | ||
| ]);</code></pre> | ||
| </div> | ||
| `, | ||
| controller: class { | ||
| /* @ngInject */ | ||
| constructor() { | ||
| this.opts = { | ||
| centerAndZoom: { | ||
| longitude: 116.404, | ||
| latitude: 39.915, | ||
| zoom: 14 | ||
| } | ||
| } | ||
|
|
||
| this.points = [ | ||
| { | ||
| longitude: 116.387112, | ||
| latitude: 39.920977 | ||
| }, | ||
| { | ||
| longitude: 116.385243, | ||
| latitude: 39.913063 | ||
| }, | ||
| { | ||
| longitude: 116.394226, | ||
| latitude: 39.917988 | ||
| }, | ||
| { | ||
| longitude: 116.401772, | ||
| latitude: 39.921364 | ||
| }, | ||
| { | ||
| longitude: 116.41248, | ||
| latitude: 39.927893 | ||
| } | ||
| ] | ||
|
|
||
| // below are for polygon | ||
| this.polygonOpts = { | ||
| strokeColor: 'blue', | ||
| strokeWeight: 2 | ||
| } | ||
|
|
||
| this.polygonLoaded = function(polygon) { | ||
| console.log('polygon loaded', polygon) | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| export default [ | ||
| { | ||
| id: 'apidoc', | ||
| isDefault: false, | ||
| when: '/apidoc', | ||
| template: '<apidoc></apidoc>' | ||
| } | ||
| ]; | ||
| { | ||
| id: 'apidoc', | ||
| isDefault: false, | ||
| when: '/apidoc', | ||
| template: '<apidoc></apidoc>' | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { nullCheck, isUndefined } from '../helper/validate' | ||
| import { transformPoints } from '../helper/transformer' | ||
|
|
||
| export default { | ||
| bindings: { | ||
| points: '<', | ||
| options: '<', | ||
| loaded: '&' | ||
| }, | ||
| require: { | ||
| mapCtrl: '^baiduMap' | ||
| }, | ||
| template: '', | ||
| controller: class { | ||
| /* @ngInject */ | ||
| constructor($scope, $attrs) { | ||
| this.$scope = $scope | ||
| this.$attrs = $attrs | ||
| } | ||
|
|
||
| $onInit() { | ||
| nullCheck(this.points, 'points is required for <polygon>') | ||
|
|
||
| this.mapCtrl.mapReady | ||
| .then(() => { | ||
| const points = transformPoints(this.points, '<polygon> points') | ||
| const opts = this.options | ||
| const polygon = (this.polygon = new BMap.Polygon(points, opts)) | ||
| this.mapCtrl.addOverlay(polygon) | ||
| return polygon | ||
| }) | ||
| .then(polygon => { | ||
| this.loaded({ | ||
| polygon | ||
| }) | ||
| this.$scope.$apply() | ||
| }) | ||
| } | ||
|
|
||
| $onChanges(changes) { | ||
| if (!this.polygon) { | ||
| return | ||
| } | ||
| if (changes.points && changes.points.currentValue) { | ||
| this.polygon.setPath(transformPoints(changes.points.currentValue, '<polygon> points')) | ||
| } | ||
| if (!changes.options || !changes.options.currentValue) { | ||
| return | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.strokeColor)) { | ||
| this.polygon.setStrokeColor(changes.options.currentValue.strokeColor) | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.fillColor)) { | ||
| this.polygon.setFillColor(changes.options.currentValue.fillColor) | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.strokeWeight)) { | ||
| this.polygon.setStrokeWeight(changes.options.currentValue.strokeWeight) | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.strokeOpacity)) { | ||
| this.polygon.setStrokeOpacity(changes.options.currentValue.strokeOpacity) | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.fillOpacity)) { | ||
| this.polygon.setFillOpacity(changes.options.currentValue.fillOpacity) | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.strokeStyle)) { | ||
| this.polygon.setStrokeStyle(changes.options.currentValue.strokeStyle) | ||
| } | ||
|
|
||
| if (!isUndefined(changes.options.currentValue.enableMassClear)) { | ||
| this.polygon[changes.options.currentValue.enableMassClear ? 'enableMassClear' : 'disableMassClear']() | ||
| } | ||
| if (!isUndefined(changes.options.currentValue.enableEditing)) { | ||
| this.polygon[changes.options.currentValue.enableEditing ? 'enableEditing' : 'disableEditing']() | ||
| } | ||
| } | ||
|
|
||
| $onDestroy() { | ||
| this.mapCtrl.removeOverlay(this.polygon) | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters