├── circle.yml ├── .npmignore ├── .babelrc ├── test ├── .eslintrc └── test.js ├── .editorconfig ├── .eslintrc ├── karma.config.js ├── .gitignore ├── LICENSE ├── gulpfile.js ├── package.json ├── demo └── index.html ├── README.md ├── dist ├── maptalks.mapboxgl.min.js ├── maptalks.mapboxgl.es.js └── maptalks.mapboxgl.js └── index.js /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 6.9.0 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | doc/ 3 | src/ 4 | test/ 5 | gulpfile.js 6 | jsdoc.json 7 | karma.conf.js 8 | .editorconfig 9 | .eslintrc 10 | .eslintignore 11 | .gitignore 12 | .projectile 13 | circle.yml 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "loose" : true, "modules" : false }] 4 | ], 5 | "plugins" : [ 6 | "transform-proto-to-assign" 7 | ], 8 | "ignore": [ 9 | "dist/*.js" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect" : true, 7 | "sinon": true, 8 | "happen": true, 9 | "mapboxgl" : true 10 | }, 11 | "plugins": ["mocha"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [{package,bower}.json] 15 | indent_style = space 16 | indent_size = 2 17 | 18 | [jsduck.json] 19 | indent_style = space 20 | indent_size = 2 21 | 22 | [.travis.yml] 23 | indent_style = space 24 | indent_size = 2 25 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "es6": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "sourceType": "module" 10 | }, 11 | "extends": "maptalks", 12 | "globals": { 13 | }, 14 | "rules": { 15 | "object-curly-spacing": [2, "always", { "objectsInObjects": false }], 16 | "new-cap": 0, 17 | "key-spacing": 0, 18 | "strict": 0, 19 | "global-require": 0 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | describe('MapboxglLayer', function () { 2 | var container, map; 3 | beforeEach(function () { 4 | container = document.createElement('div'); 5 | container.style.width = '400px'; 6 | container.style.height = '300px'; 7 | document.body.appendChild(container); 8 | map = new maptalks.Map(container, { 9 | center : [0, 0], 10 | zoom : 17 11 | }); 12 | }); 13 | 14 | afterEach(function () { 15 | map.remove(); 16 | maptalks.DomUtil.removeDomNode(container); 17 | }); 18 | 19 | it('should display when added to map', function () { 20 | // new maptalks.MapboxglLayer('g').addTo(map); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /karma.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package.json'); 2 | 3 | module.exports = { 4 | basePath : '.', 5 | frameworks: ['mocha', 'expect', 'expect-maptalks', 'happen'], 6 | files: [ 7 | 'node_modules/maptalks/dist/maptalks.js', 8 | 'dist/' + pkg.name + '.js', 9 | 'test/**/*.js' 10 | ], 11 | preprocessors: { 12 | }, 13 | browsers: ['Chrome'], 14 | reporters: ['mocha'], 15 | customLaunchers: { 16 | IE10: { 17 | base: 'IE', 18 | 'x-ua-compatible': 'IE=EmulateIE10' 19 | }, 20 | IE9: { 21 | base: 'IE', 22 | 'x-ua-compatible': 'IE=EmulateIE9' 23 | } 24 | }, 25 | singleRun : true 26 | }; 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .tmp/ 2 | .idea/ 3 | *.iml 4 | *.gz 5 | .tern-port 6 | doc/ 7 | 8 | ### *tags 9 | GPATH 10 | GRTAGS 11 | GTAGS 12 | TAGS 13 | 14 | ### OSX template 15 | .DS_Store 16 | 17 | # Created by .ignore support plugin (hsz.mobi) 18 | ### Node template 19 | # Logs 20 | logs 21 | *.log 22 | 23 | # Runtime data 24 | pids 25 | *.pid 26 | *.seed 27 | 28 | # Directory for instrumented libs generated by jscoverage/JSCover 29 | lib-cov 30 | 31 | # Coverage directory used by tools like istanbul 32 | coverage 33 | 34 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 35 | .grunt 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (http://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directory 44 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 45 | node_modules 46 | 47 | #example deploy config 48 | examples/replace.json 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 MapTalks 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'), 4 | pkg = require('./package.json'), 5 | BundleHelper = require('maptalks-build-helpers').BundleHelper, 6 | TestHelper = require('maptalks-build-helpers').TestHelper; 7 | const bundleHelper = new BundleHelper(pkg); 8 | const testHelper = new TestHelper(); 9 | const karmaConfig = require('./karma.config'); 10 | 11 | gulp.task('build', () => { 12 | const rollupConfig = bundleHelper.getDefaultRollupConfig(); 13 | rollupConfig['external'].push('mapboxgl'); 14 | return bundleHelper.bundle('index.js', rollupConfig); 15 | }); 16 | 17 | gulp.task('minify', ['build'], () => { 18 | bundleHelper.minify(); 19 | }); 20 | 21 | gulp.task('watch', ['build'], () => { 22 | gulp.watch(['index.js', './gulpfile.js'], ['build']); 23 | }); 24 | 25 | gulp.task('runTest', () => { 26 | // testHelper.test(karmaConfig); 27 | }); 28 | 29 | gulp.task('test', ['build', 'runTest']); 30 | 31 | gulp.task('tdd', ['build'], () => { 32 | karmaConfig.singleRun = false; 33 | gulp.watch(['index.js'], ['test']); 34 | testHelper.test(karmaConfig); 35 | }); 36 | 37 | gulp.task('default', ['watch']); 38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "maptalks.mapboxgl", 3 | "version": "0.3.4", 4 | "description": "MapboxglLayer for maptalks.js.", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/maptalks/maptalks.mapboxgl.git" 9 | }, 10 | "main": "dist/maptalks.mapboxgl.js", 11 | "module": "dist/maptalks.mapboxgl.es.js", 12 | "jsnext:main": "dist/maptalks.mapboxgl.es.js", 13 | "scripts": { 14 | "dev": "gulp watch", 15 | "build": "gulp minify", 16 | "preversion": "npm test", 17 | "version": "gulp minify && git add -A dist", 18 | "lint": "eslint index.js test/**/*.js", 19 | "test": "gulp test", 20 | "pretest": "npm run lint", 21 | "prepublish": "npm run lint && gulp minify" 22 | }, 23 | "devDependencies": { 24 | "babel-eslint": "^7.1.1", 25 | "babel-preset-es2015": "^6.18.0", 26 | "eslint": "^2.4.0", 27 | "eslint-config-maptalks": "^0.2.1", 28 | "eslint-plugin-mocha": "^4.8.0", 29 | "expect-maptalks": "^0.2.5", 30 | "expect.js": "^0.3.1", 31 | "gulp": "^3.9.0", 32 | "happen": "^0.3.1", 33 | "karma": "^1.3.0", 34 | "karma-chrome-launcher": "^2.0.0", 35 | "karma-expect": "^1.1.3", 36 | "karma-expect-maptalks": "^0.1.4", 37 | "karma-firefox-launcher": "^1.0.0", 38 | "karma-happen": "^0.1.0", 39 | "karma-ie-launcher": "^1.0.0", 40 | "karma-mocha": "^1.3.0", 41 | "karma-mocha-reporter": "^2.2.1", 42 | "maptalks": ">=0.29.0", 43 | "maptalks-build-helpers": "^0.4.2", 44 | "minimist": "^1.2.0", 45 | "mocha": "^2.4.5" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | maptalks.mapboxgl demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 |
start | pause | reset
23 |
24 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # maptalks.mapboxgl 2 | 3 | [![NPM Version](https://img.shields.io/npm/v/maptalks.mapboxgl.svg)](https://github.com/maptalks/maptalks.mapboxgl) 4 | 5 | A plugin to add [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) as a layer for [maptalks.js](https://github.com/maptalks/maptalks.js). 6 | 7 | ![screenshot](https://cloud.githubusercontent.com/assets/13678919/25611501/ec90d0a4-2f59-11e7-91b5-1ed6c7b9352d.jpg) 8 | 9 | ## Tips 10 | 11 | **This is just a temporary solution for vector tilelayer** 12 | 13 | **The webgl context of maptalks and the webgl context of mapboxgl will not be shared** 14 | 15 | Please familiarize yourself with the above when you use the plugin, and it is recommended to use the webgl ecology library from maptalks [maptalks-gl-layers](https://github.com/fuzhenn/maptalks-gl-layers) 16 | 17 | ## Examples 18 | 19 | * [mapbox-gl-js demo with light style](https://maptalks.github.io/maptalks.mapboxgl/demo/). 20 | 21 | ## Install 22 | 23 | * Install with npm: ```npm install maptalks.mapboxgl```. 24 | * Download from [dist directory](https://github.com/maptalks/maptalks.mapboxgl/tree/gh-pages/dist). 25 | * Use unpkg CDN: ```https://unpkg.com/maptalks.mapboxgl/dist/maptalks.mapboxgl.min.js``` 26 | 27 | ## Usage 28 | 29 | As a plugin, `maptalks.mapboxgl` must be loaded after `maptalks.js` and `mapbox-gl.js` in browsers. 30 | ```html 31 | 32 | 33 | 34 | 35 | 42 | ``` 43 | 44 | ## Supported Browsers 45 | 46 | IE 11, Chrome, Firefox, other modern and mobile browsers support WebGL. 47 | 48 | ## API Reference 49 | 50 | ```MapboxglLayer``` is a subclass of [maptalks.Layer](https://maptalks.github.io/docs/api/Layer.html) and inherits all the methods of its parent. 51 | 52 | ### `Constructor` 53 | 54 | ```javascript 55 | new maptalks.MapboxglLayer(id, options) 56 | ``` 57 | 58 | * id **String** layer id 59 | * options **Object** options 60 | * glOptions **Object** mapboxgl creation options defined in [mapbox-gl-js api doc](https://www.mapbox.com/mapbox-gl-js/api/#map) 61 | * other options defined in [maptalks.Layer](https://maptalks.github.io/docs/api/Layer.html) 62 | 63 | ### `getGlMap()` 64 | 65 | get mapbox-gl-js map instance used by the layer 66 | 67 | **Returns** `Map` 68 | 69 | ### `toJSON()` 70 | 71 | export the layer's JSON. 72 | 73 | ```javascript 74 | var json = mapboxglLayer.toJSON(); 75 | ``` 76 | 77 | **Returns** `Object` 78 | 79 | ## Contributing 80 | 81 | We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps. 82 | 83 | ## Develop 84 | 85 | The only source file is ```index.js```. 86 | 87 | It is written in ES6, transpiled by [babel](https://babeljs.io/) and tested with [mocha](https://mochajs.org) and [expect.js](https://github.com/Automattic/expect.js). 88 | 89 | ### Scripts 90 | 91 | * Install dependencies 92 | ```shell 93 | $ npm install 94 | ``` 95 | 96 | * Watch source changes and generate runnable bundle repeatedly 97 | ```shell 98 | $ gulp watch 99 | ``` 100 | 101 | * Tests 102 | ```shell 103 | $ npm test 104 | ``` 105 | 106 | * Watch source changes and run tests repeatedly 107 | ```shell 108 | $ gulp tdd 109 | ``` 110 | 111 | * Package and generate minified bundles to dist directory 112 | ```shell 113 | $ gulp minify 114 | ``` 115 | 116 | * Lint 117 | ```shell 118 | $ npm run lint 119 | ``` 120 | -------------------------------------------------------------------------------- /dist/maptalks.mapboxgl.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * maptalks.mapboxgl v0.3.4 3 | * LICENSE : MIT 4 | * (c) 2016-2018 maptalks.org 5 | */ 6 | /*! 7 | * requires maptalks@>=0.29.0 8 | */ 9 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("maptalks"),require("mapbox-gl")):"function"==typeof define&&define.amd?define(["exports","maptalks","mapbox-gl"],e):e(t.maptalks=t.maptalks||{},t.maptalks,t.mapboxgl)}(this,function(t,i,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):function(t,e){for(var n=Object.getOwnPropertyNames(e),o=0;o=0.29.0.")}); 10 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import * as maptalks from 'maptalks'; 2 | import mapboxgl from 'mapbox-gl'; 3 | 4 | const options = { 5 | 'renderer' : 'dom', 6 | 'container' : 'back', 7 | 'glOptions' : { 8 | 'style' : 'mapbox://styles/mapbox/streets-v9' 9 | } 10 | }; 11 | 12 | export class MapboxglLayer extends maptalks.Layer { 13 | /** 14 | * Reproduce a MapboxglLayer from layer's profile JSON. 15 | * @param {Object} json - layer's profile JSON 16 | * @return {MapboxglLayer} 17 | * @static 18 | * @private 19 | * @function 20 | */ 21 | static fromJSON(json) { 22 | if (!json || json['type'] !== 'MapboxglLayer') { return null; } 23 | const layer = new MapboxglLayer(json['id'], json['options']); 24 | return layer; 25 | } 26 | 27 | getGlMap() { 28 | const renderer = this._getRenderer(); 29 | if (renderer) { 30 | return renderer.glmap; 31 | } 32 | return null; 33 | } 34 | 35 | /** 36 | * Export the MapboxglLayer's JSON. 37 | * @return {Object} layer's JSON 38 | */ 39 | toJSON() { 40 | var json = { 41 | 'type': this.getJSONType(), 42 | 'id': this.getId(), 43 | 'options': this.config() 44 | }; 45 | return json; 46 | } 47 | } 48 | 49 | // merge to define MapboxglLayer's default options. 50 | MapboxglLayer.mergeOptions(options); 51 | 52 | // register MapboxglLayer's JSON type for JSON deserialization. 53 | MapboxglLayer.registerJSONType('MapboxglLayer'); 54 | 55 | MapboxglLayer.registerRenderer('dom', class { 56 | 57 | constructor(layer) { 58 | this.layer = layer; 59 | } 60 | 61 | getMap() { 62 | if (!this.layer) { 63 | return null; 64 | } 65 | return this.layer.getMap(); 66 | } 67 | 68 | show() { 69 | if (this._container) { 70 | this.render(); 71 | this._show(); 72 | } 73 | } 74 | 75 | hide() { 76 | if (this._container) { 77 | this._hide(); 78 | this.clear(); 79 | } 80 | } 81 | 82 | remove() { 83 | delete this.layer; 84 | if (this.glmap) { 85 | this.glmap.remove(); 86 | } 87 | if (this._container) { 88 | maptalks.DomUtil.removeDomNode(this._container); 89 | } 90 | delete this._container; 91 | delete this.glmap; 92 | } 93 | 94 | clear() { 95 | if (this._container) { 96 | this._container.innerHTML = ''; 97 | } 98 | } 99 | 100 | setZIndex(z) { 101 | this._zIndex = z; 102 | if (this._container) { 103 | this._container.style.zIndex = z; 104 | } 105 | } 106 | 107 | needToRedraw() { 108 | const map = this.getMap(); 109 | const renderer = map._getRenderer(); 110 | return map.isInteracting() || renderer && renderer.isViewChanged(); 111 | } 112 | 113 | render() { 114 | if (!this._container) { 115 | this._createLayerContainer(); 116 | } 117 | if (!this.glmap) { 118 | const map = this.getMap(); 119 | const center = map.getCenter(); 120 | const options = maptalks.Util.extend({}, this.layer.options['glOptions'], { 121 | container: this._container, 122 | center: new mapboxgl.LngLat(center.x, center.y), 123 | zoom: getMapBoxZoom(map.getResolution()) 124 | }); 125 | this.glmap = new mapboxgl.Map(options); 126 | this.glmap.on('load', () => { 127 | this.layer.fire('layerload'); 128 | }); 129 | } 130 | this._syncMap(); 131 | } 132 | 133 | drawOnInteracting() { 134 | const map = this.getMap(); 135 | if (!this.glmap || !map) { 136 | return; 137 | } 138 | this._syncMap(); 139 | } 140 | 141 | getEvents() { 142 | return { 143 | 'resize' : this.onResize 144 | }; 145 | } 146 | 147 | onResize() { 148 | this._resize(); 149 | } 150 | 151 | _createLayerContainer() { 152 | const container = this._container = maptalks.DomUtil.createEl('div', 'maptalks-mapboxgllayer'); 153 | container.style.cssText = 'position:absolute;'; 154 | this._resize(); 155 | if (this._zIndex) { 156 | container.style.zIndex = this._zIndex; 157 | } 158 | const parent = this.layer.options['container'] === 'front' ? this.getMap()._panels['frontStatic'] : this.getMap()._panels['backStatic']; 159 | parent.appendChild(container); 160 | } 161 | 162 | _resize() { 163 | const container = this._container; 164 | if (!container) { 165 | return; 166 | } 167 | const size = this.getMap().getSize(); 168 | container.style.width = size['width'] + 'px'; 169 | container.style.height = size['height'] + 'px'; 170 | if (this.glmap) { 171 | this.glmap.resize(); 172 | } 173 | 174 | } 175 | 176 | _show() { 177 | this._container.style.display = ''; 178 | } 179 | 180 | _hide() { 181 | this._container.style.display = 'none'; 182 | } 183 | 184 | _syncMap() { 185 | const map = this.getMap(); 186 | if (!this.glmap || !map) { 187 | return; 188 | } 189 | const center = map.getCenter(); 190 | const cameraOptions = { 191 | 'center' : new mapboxgl.LngLat(center.x, center.y), 192 | 'zoom' : getMapBoxZoom(map.getResolution()), 193 | 'bearing' : map.getBearing(), 194 | 'pitch' : map.getPitch() 195 | }; 196 | this.glmap.jumpTo(cameraOptions); 197 | } 198 | }); 199 | 200 | const MAX_RES = 2 * 6378137 * Math.PI / (256 * Math.pow(2, 20)); 201 | function getMapBoxZoom(res) { 202 | return 19 - Math.log(res / MAX_RES) / Math.LN2; 203 | } 204 | -------------------------------------------------------------------------------- /dist/maptalks.mapboxgl.es.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * maptalks.mapboxgl v0.3.4 3 | * LICENSE : MIT 4 | * (c) 2016-2018 maptalks.org 5 | */ 6 | /*! 7 | * requires maptalks@>=0.29.0 8 | */ 9 | import { DomUtil, Layer, Util } from 'maptalks'; 10 | import mapboxgl from 'mapbox-gl'; 11 | 12 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } 13 | 14 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 15 | 16 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } 19 | 20 | var options = { 21 | 'renderer': 'dom', 22 | 'container': 'back', 23 | 'glOptions': { 24 | 'style': 'mapbox://styles/mapbox/streets-v9' 25 | } 26 | }; 27 | 28 | var MapboxglLayer = function (_maptalks$Layer) { 29 | _inherits(MapboxglLayer, _maptalks$Layer); 30 | 31 | function MapboxglLayer() { 32 | _classCallCheck(this, MapboxglLayer); 33 | 34 | return _possibleConstructorReturn(this, _maptalks$Layer.apply(this, arguments)); 35 | } 36 | 37 | /** 38 | * Reproduce a MapboxglLayer from layer's profile JSON. 39 | * @param {Object} json - layer's profile JSON 40 | * @return {MapboxglLayer} 41 | * @static 42 | * @private 43 | * @function 44 | */ 45 | MapboxglLayer.fromJSON = function fromJSON(json) { 46 | if (!json || json['type'] !== 'MapboxglLayer') { 47 | return null; 48 | } 49 | var layer = new MapboxglLayer(json['id'], json['options']); 50 | return layer; 51 | }; 52 | 53 | MapboxglLayer.prototype.getGlMap = function getGlMap() { 54 | var renderer = this._getRenderer(); 55 | if (renderer) { 56 | return renderer.glmap; 57 | } 58 | return null; 59 | }; 60 | 61 | /** 62 | * Export the MapboxglLayer's JSON. 63 | * @return {Object} layer's JSON 64 | */ 65 | 66 | 67 | MapboxglLayer.prototype.toJSON = function toJSON() { 68 | var json = { 69 | 'type': this.getJSONType(), 70 | 'id': this.getId(), 71 | 'options': this.config() 72 | }; 73 | return json; 74 | }; 75 | 76 | return MapboxglLayer; 77 | }(Layer); 78 | 79 | // merge to define MapboxglLayer's default options. 80 | MapboxglLayer.mergeOptions(options); 81 | 82 | // register MapboxglLayer's JSON type for JSON deserialization. 83 | MapboxglLayer.registerJSONType('MapboxglLayer'); 84 | 85 | MapboxglLayer.registerRenderer('dom', function () { 86 | function _class(layer) { 87 | _classCallCheck(this, _class); 88 | 89 | this.layer = layer; 90 | } 91 | 92 | _class.prototype.getMap = function getMap() { 93 | if (!this.layer) { 94 | return null; 95 | } 96 | return this.layer.getMap(); 97 | }; 98 | 99 | _class.prototype.show = function show() { 100 | if (this._container) { 101 | this.render(); 102 | this._show(); 103 | } 104 | }; 105 | 106 | _class.prototype.hide = function hide() { 107 | if (this._container) { 108 | this._hide(); 109 | this.clear(); 110 | } 111 | }; 112 | 113 | _class.prototype.remove = function remove() { 114 | delete this.layer; 115 | if (this.glmap) { 116 | this.glmap.remove(); 117 | } 118 | if (this._container) { 119 | DomUtil.removeDomNode(this._container); 120 | } 121 | delete this._container; 122 | delete this.glmap; 123 | }; 124 | 125 | _class.prototype.clear = function clear() { 126 | if (this._container) { 127 | this._container.innerHTML = ''; 128 | } 129 | }; 130 | 131 | _class.prototype.setZIndex = function setZIndex(z) { 132 | this._zIndex = z; 133 | if (this._container) { 134 | this._container.style.zIndex = z; 135 | } 136 | }; 137 | 138 | _class.prototype.needToRedraw = function needToRedraw() { 139 | var map = this.getMap(); 140 | var renderer = map._getRenderer(); 141 | return map.isInteracting() || renderer && renderer.isViewChanged(); 142 | }; 143 | 144 | _class.prototype.render = function render() { 145 | var _this2 = this; 146 | 147 | if (!this._container) { 148 | this._createLayerContainer(); 149 | } 150 | if (!this.glmap) { 151 | var map = this.getMap(); 152 | var center = map.getCenter(); 153 | var _options = Util.extend({}, this.layer.options['glOptions'], { 154 | container: this._container, 155 | center: new mapboxgl.LngLat(center.x, center.y), 156 | zoom: getMapBoxZoom(map.getResolution()) 157 | }); 158 | this.glmap = new mapboxgl.Map(_options); 159 | this.glmap.on('load', function () { 160 | _this2.layer.fire('layerload'); 161 | }); 162 | } 163 | this._syncMap(); 164 | }; 165 | 166 | _class.prototype.drawOnInteracting = function drawOnInteracting() { 167 | var map = this.getMap(); 168 | if (!this.glmap || !map) { 169 | return; 170 | } 171 | this._syncMap(); 172 | }; 173 | 174 | _class.prototype.getEvents = function getEvents() { 175 | return { 176 | 'resize': this.onResize 177 | }; 178 | }; 179 | 180 | _class.prototype.onResize = function onResize() { 181 | this._resize(); 182 | }; 183 | 184 | _class.prototype._createLayerContainer = function _createLayerContainer() { 185 | var container = this._container = DomUtil.createEl('div', 'maptalks-mapboxgllayer'); 186 | container.style.cssText = 'position:absolute;'; 187 | this._resize(); 188 | if (this._zIndex) { 189 | container.style.zIndex = this._zIndex; 190 | } 191 | var parent = this.layer.options['container'] === 'front' ? this.getMap()._panels['frontStatic'] : this.getMap()._panels['backStatic']; 192 | parent.appendChild(container); 193 | }; 194 | 195 | _class.prototype._resize = function _resize() { 196 | var container = this._container; 197 | if (!container) { 198 | return; 199 | } 200 | var size = this.getMap().getSize(); 201 | container.style.width = size['width'] + 'px'; 202 | container.style.height = size['height'] + 'px'; 203 | if (this.glmap) { 204 | this.glmap.resize(); 205 | } 206 | }; 207 | 208 | _class.prototype._show = function _show() { 209 | this._container.style.display = ''; 210 | }; 211 | 212 | _class.prototype._hide = function _hide() { 213 | this._container.style.display = 'none'; 214 | }; 215 | 216 | _class.prototype._syncMap = function _syncMap() { 217 | var map = this.getMap(); 218 | if (!this.glmap || !map) { 219 | return; 220 | } 221 | var center = map.getCenter(); 222 | var cameraOptions = { 223 | 'center': new mapboxgl.LngLat(center.x, center.y), 224 | 'zoom': getMapBoxZoom(map.getResolution()), 225 | 'bearing': map.getBearing(), 226 | 'pitch': map.getPitch() 227 | }; 228 | this.glmap.jumpTo(cameraOptions); 229 | }; 230 | 231 | return _class; 232 | }()); 233 | 234 | var MAX_RES = 2 * 6378137 * Math.PI / (256 * Math.pow(2, 20)); 235 | function getMapBoxZoom(res) { 236 | return 19 - Math.log(res / MAX_RES) / Math.LN2; 237 | } 238 | 239 | export { MapboxglLayer }; 240 | 241 | typeof console !== 'undefined' && console.log('maptalks.mapboxgl v0.3.4, requires maptalks@>=0.29.0.'); 242 | -------------------------------------------------------------------------------- /dist/maptalks.mapboxgl.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * maptalks.mapboxgl v0.3.4 3 | * LICENSE : MIT 4 | * (c) 2016-2018 maptalks.org 5 | */ 6 | /*! 7 | * requires maptalks@>=0.29.0 8 | */ 9 | (function (global, factory) { 10 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('maptalks'), require('mapbox-gl')) : 11 | typeof define === 'function' && define.amd ? define(['exports', 'maptalks', 'mapbox-gl'], factory) : 12 | (factory((global.maptalks = global.maptalks || {}),global.maptalks,global.mapboxgl)); 13 | }(this, (function (exports,maptalks,mapboxgl) { 'use strict'; 14 | 15 | mapboxgl = mapboxgl && mapboxgl.hasOwnProperty('default') ? mapboxgl['default'] : mapboxgl; 16 | 17 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } 24 | 25 | var options = { 26 | 'renderer': 'dom', 27 | 'container': 'back', 28 | 'glOptions': { 29 | 'style': 'mapbox://styles/mapbox/streets-v9' 30 | } 31 | }; 32 | 33 | var MapboxglLayer = function (_maptalks$Layer) { 34 | _inherits(MapboxglLayer, _maptalks$Layer); 35 | 36 | function MapboxglLayer() { 37 | _classCallCheck(this, MapboxglLayer); 38 | 39 | return _possibleConstructorReturn(this, _maptalks$Layer.apply(this, arguments)); 40 | } 41 | 42 | /** 43 | * Reproduce a MapboxglLayer from layer's profile JSON. 44 | * @param {Object} json - layer's profile JSON 45 | * @return {MapboxglLayer} 46 | * @static 47 | * @private 48 | * @function 49 | */ 50 | MapboxglLayer.fromJSON = function fromJSON(json) { 51 | if (!json || json['type'] !== 'MapboxglLayer') { 52 | return null; 53 | } 54 | var layer = new MapboxglLayer(json['id'], json['options']); 55 | return layer; 56 | }; 57 | 58 | MapboxglLayer.prototype.getGlMap = function getGlMap() { 59 | var renderer = this._getRenderer(); 60 | if (renderer) { 61 | return renderer.glmap; 62 | } 63 | return null; 64 | }; 65 | 66 | /** 67 | * Export the MapboxglLayer's JSON. 68 | * @return {Object} layer's JSON 69 | */ 70 | 71 | 72 | MapboxglLayer.prototype.toJSON = function toJSON() { 73 | var json = { 74 | 'type': this.getJSONType(), 75 | 'id': this.getId(), 76 | 'options': this.config() 77 | }; 78 | return json; 79 | }; 80 | 81 | return MapboxglLayer; 82 | }(maptalks.Layer); 83 | 84 | // merge to define MapboxglLayer's default options. 85 | MapboxglLayer.mergeOptions(options); 86 | 87 | // register MapboxglLayer's JSON type for JSON deserialization. 88 | MapboxglLayer.registerJSONType('MapboxglLayer'); 89 | 90 | MapboxglLayer.registerRenderer('dom', function () { 91 | function _class(layer) { 92 | _classCallCheck(this, _class); 93 | 94 | this.layer = layer; 95 | } 96 | 97 | _class.prototype.getMap = function getMap() { 98 | if (!this.layer) { 99 | return null; 100 | } 101 | return this.layer.getMap(); 102 | }; 103 | 104 | _class.prototype.show = function show() { 105 | if (this._container) { 106 | this.render(); 107 | this._show(); 108 | } 109 | }; 110 | 111 | _class.prototype.hide = function hide() { 112 | if (this._container) { 113 | this._hide(); 114 | this.clear(); 115 | } 116 | }; 117 | 118 | _class.prototype.remove = function remove() { 119 | delete this.layer; 120 | if (this.glmap) { 121 | this.glmap.remove(); 122 | } 123 | if (this._container) { 124 | maptalks.DomUtil.removeDomNode(this._container); 125 | } 126 | delete this._container; 127 | delete this.glmap; 128 | }; 129 | 130 | _class.prototype.clear = function clear() { 131 | if (this._container) { 132 | this._container.innerHTML = ''; 133 | } 134 | }; 135 | 136 | _class.prototype.setZIndex = function setZIndex(z) { 137 | this._zIndex = z; 138 | if (this._container) { 139 | this._container.style.zIndex = z; 140 | } 141 | }; 142 | 143 | _class.prototype.needToRedraw = function needToRedraw() { 144 | var map = this.getMap(); 145 | var renderer = map._getRenderer(); 146 | return map.isInteracting() || renderer && renderer.isViewChanged(); 147 | }; 148 | 149 | _class.prototype.render = function render() { 150 | var _this2 = this; 151 | 152 | if (!this._container) { 153 | this._createLayerContainer(); 154 | } 155 | if (!this.glmap) { 156 | var map = this.getMap(); 157 | var center = map.getCenter(); 158 | var _options = maptalks.Util.extend({}, this.layer.options['glOptions'], { 159 | container: this._container, 160 | center: new mapboxgl.LngLat(center.x, center.y), 161 | zoom: getMapBoxZoom(map.getResolution()) 162 | }); 163 | this.glmap = new mapboxgl.Map(_options); 164 | this.glmap.on('load', function () { 165 | _this2.layer.fire('layerload'); 166 | }); 167 | } 168 | this._syncMap(); 169 | }; 170 | 171 | _class.prototype.drawOnInteracting = function drawOnInteracting() { 172 | var map = this.getMap(); 173 | if (!this.glmap || !map) { 174 | return; 175 | } 176 | this._syncMap(); 177 | }; 178 | 179 | _class.prototype.getEvents = function getEvents() { 180 | return { 181 | 'resize': this.onResize 182 | }; 183 | }; 184 | 185 | _class.prototype.onResize = function onResize() { 186 | this._resize(); 187 | }; 188 | 189 | _class.prototype._createLayerContainer = function _createLayerContainer() { 190 | var container = this._container = maptalks.DomUtil.createEl('div', 'maptalks-mapboxgllayer'); 191 | container.style.cssText = 'position:absolute;'; 192 | this._resize(); 193 | if (this._zIndex) { 194 | container.style.zIndex = this._zIndex; 195 | } 196 | var parent = this.layer.options['container'] === 'front' ? this.getMap()._panels['frontStatic'] : this.getMap()._panels['backStatic']; 197 | parent.appendChild(container); 198 | }; 199 | 200 | _class.prototype._resize = function _resize() { 201 | var container = this._container; 202 | if (!container) { 203 | return; 204 | } 205 | var size = this.getMap().getSize(); 206 | container.style.width = size['width'] + 'px'; 207 | container.style.height = size['height'] + 'px'; 208 | if (this.glmap) { 209 | this.glmap.resize(); 210 | } 211 | }; 212 | 213 | _class.prototype._show = function _show() { 214 | this._container.style.display = ''; 215 | }; 216 | 217 | _class.prototype._hide = function _hide() { 218 | this._container.style.display = 'none'; 219 | }; 220 | 221 | _class.prototype._syncMap = function _syncMap() { 222 | var map = this.getMap(); 223 | if (!this.glmap || !map) { 224 | return; 225 | } 226 | var center = map.getCenter(); 227 | var cameraOptions = { 228 | 'center': new mapboxgl.LngLat(center.x, center.y), 229 | 'zoom': getMapBoxZoom(map.getResolution()), 230 | 'bearing': map.getBearing(), 231 | 'pitch': map.getPitch() 232 | }; 233 | this.glmap.jumpTo(cameraOptions); 234 | }; 235 | 236 | return _class; 237 | }()); 238 | 239 | var MAX_RES = 2 * 6378137 * Math.PI / (256 * Math.pow(2, 20)); 240 | function getMapBoxZoom(res) { 241 | return 19 - Math.log(res / MAX_RES) / Math.LN2; 242 | } 243 | 244 | exports.MapboxglLayer = MapboxglLayer; 245 | 246 | Object.defineProperty(exports, '__esModule', { value: true }); 247 | 248 | typeof console !== 'undefined' && console.log('maptalks.mapboxgl v0.3.4, requires maptalks@>=0.29.0.'); 249 | 250 | }))); 251 | --------------------------------------------------------------------------------