Mapbox手稿
发布时间:2020-12-17 10:16:27 所属栏目:安全 来源:网络整理
导读:我设法通过遵循这个项目让Leaflet与Angular 2和Webpack一起工作. angular 2 leaflet starter 我可以在“browser.d.ts”中看到配置的类型: /// reference path="browserambientleafletleaflet.d.ts" / webpack.config.js定义了一个入口点: ...entry: { '
我设法通过遵循这个项目让Leaflet与Angular 2和Webpack一起工作.
angular 2 leaflet starter 我可以在“browser.d.ts”中看到配置的类型: /// <reference path="browserambientleafletleaflet.d.ts" /> webpack.config.js定义了一个入口点: ... entry: { 'polyfills': './src/polyfills.ts','libs': './src/libs.ts','main': './src/main.ts' },... “libs.ts”包含Leaflet模块的导入: import 'leaflet'; 我正在使用Atom作为代码编辑器.它现在识别所有Leaflet类和方法.我现在可以在Angular 2中做这样的事情了: import {Map,TileLayer} from 'leaflet'; ... this.baseMaps = { StreetMap: new TileLayer('mapbox.streets') }; 这是我的问题开始的地方.我正在尝试使用mapbox.js.我做的是我安装了mapbox.js库和打字: npm install mapbox.js --save typings install mapbox --save 这就是我被困住的地方.对于我的生活,我无法弄清楚如何做Leaflet设法做的事情. import 'mapbox'; 不行. ERROR in ./src/libs.ts Module not found: Error: Cannot resolve module 'mapbox' in C:Developangular2-webpack-startersrc @ ./src/libs.ts 3:0-17 我可以看到“browser.d.ts”有以下内容: /// <reference path="browserambientleafletleaflet.d.ts" /> /// <reference path="browserambientmapboxmapbox.d.ts" /> 我想也许Mapbox会起作用,因为它扩展了Leaflet库? 看来我基本上可以做这样的事情,这是标准的javascript方式: this.baseMaps = { StreetMap: L.mapbox.tileLayer('mapbox.streets') }; 但不是这个: this.baseMaps = { StreetMap: new TileLayer('mapbox.streets') }; 这显然不起作用: import {Map,TileLayer} from 'mapbox'; 我究竟做错了什么?
您可以使用mapbox.js NPM模块,它将包含您需要的所有内容.
npm install mapbox.js –save 看这个例子.我们使用Webpack进行模块加载,使用TypeScript,您需要为非类型化模块显式导入*. import * as L from 'mapbox.js'; const map = L.mapbox.map('mapContainer','mapbox.streets'); // do stuff. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |