webpack 参考： https://www.webpackjs.com/ 和 https://webpack.github.io/
参考这个博客：https://www.jianshu.com/p/948db433f16e
windows 10 提前安装好node环境，node自带npm包管理器。
1.建立项目文件夹，在此文件夹里面进行项目初始化
cd 项目文件夹
npm init -y
# 不添加参数 -y 的话，可以个性化填写各类项目信息
初始化后，自动生成package.json文件
2.安装 webpaack
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm i -D webpack-dev-server
# 也全局安装这两个命令
npm install -g webpack
npm install -g webpack-cli
自动生成 node_modules 文件夹，以及相关webpack库
//包安装用于生产环境
npm install -S ***
//包安装用于开发和测试环境
npm install -D ***
//全局安装
npm install -g
//本地安装几个包：
npm install html-webpack-plugin
npm install css-loader
npm install style-loader
npm install url-loader
npm install popper.js
npm install sass
npm install sass-loader
npm install postcss-loader
npm install precss3.手动新建 dist 和src 目录
4.手动新建 webpack.config.js 文件
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/scripts/index.js',
output: {
filename: 'scripts/index.js',
path: path.resolve(__dirname, './dist')
},
//启动服务
//webpack-dev-server
//当前目录作为根目录，启动一个服务，会自动的打包，实时刷新
devServer:{
host:"localhost",
port:"8080",
contentBase:__dirname+"/dist"
},
devtool: 'inline-source-map', // 加上对应的配置
module: {
rules: [ // 其中包含各种loader的使用规则
{
test: /\.css$/, // 正则表达式，表示打包.css后缀的文件
use: [
{
loader: 'style-loader', // inject CSS to page
},
{
loader: 'css-loader', // translates CSS into CommonJS modules
},
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader' // compiles SASS to CSS
}
] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
},
{ // 图片打包
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
]
},
plugins: [ // 打包需要的各种插件
new htmlWebpackPlugin({ // 打包HTML
template: './src/index.html', // HTML模板路径
//filename:'index.html',//输出目标html文件,相对于output的path
//chunks:['index'],//对应加载的资源,即html文件需要引入的js模块
inject:true//资源加入到底部，把模块引入到html文件的底部
})
],
watch: false // 监听修改自动打包
};5.新建index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>my mapbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<nav id="menu"></nav>
<div id="map"></div>
<div id="distance" class="distance-container"></div>
</body>
</html>6.src目录下新建index.js
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { sourceNames,
layerNames } from './myLayers';
import { esGeocoder } from './myGeocoder.js';
import { RulerControl,
StylesControl,
CompassControl,
ZoomControl,
InspectControl,
TooltipControl,
MapboxLanguage,
MapboxStyleSwitcherControl,
} from './controls.js';
import * as turf from '@turf/turf';
import $ from "jquery";
import 'popper.js/dist/umd/popper.min.js'
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import "mapbox-gl-style-switcher/styles.css";
import 'mapbox-gl-controls/theme.css';
import '../css/my.css';
mapboxgl.accessToken = 'pk.eyJ1IjoiYWdhbmxpYW5nIiwiYSI6ImNrYndkZ2dqdzBldzQycmxna3RrZ3ZrMDIifQ.QKqeJPDcqpV7HEFSLA';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
//style:'http://192.168.1.7:8080/statics/basic-mb.json',
center: [113.254, 23.5478], // starting position [lng, lat]
zoom: 10,
hash:true,
attributionControl: false,
});
// 添加相关的地图控件
// map.addControl(new mapboxgl.NavigationControl());
const scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');
map.addControl(new MapboxStyleSwitcherControl());
map.addControl(new CompassControl(), 'top-left');
map.addControl(new ZoomControl(), 'top-left');
map.addControl(new mapboxgl.FullscreenControl(),'top-left');
map.addControl(new MapboxLanguage({
defaultLanguage: 'zh'
}));
// map.addControl(new InspectControl(), 'bottom-right');
// map.addControl(new TooltipControl({ layer: '$fill' }));
map.addControl(new RulerControl(), 'top-left');
map.on('ruler.on', () => console.log('ruler: on'));
map.on('ruler.off', () => console.log('ruler: off'));
map.addControl(new mapboxgl.AttributionControl({
//compact: true,
customAttribution:"@广州市"
}));
//geocoder dropdown render
function renderItem(item){
// extract the item's maki icon or use a default
var maki = 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/[email protected]/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
}
// geocoder
const geocoder = new MapboxGeocoder(
{
accessToken: mapboxgl.accessToken ,
//origin:'http://192.168.1.7:9200',
minLength:2,
limit:12,
types:'poi',
marker:({draggable:true,color:'#f22'}),
//render:renderItem,
localGeocoder: esGeocoder,
localGeocoderOnly:false,
enableEventLogging:false,
placeholder:'请输入关键字',
mapboxgl: mapboxgl
}
);
//geocoder.addTo('#geocoder');
map.addControl(geocoder,'top-left');
// 添加maker
const marker = new mapboxgl.Marker({draggable:true})
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))
.setLngLat([113.369, 23.456])
.addTo(map);
//添加图层
map.on('load', function() {
// add source and layer for museums
map.addSource('museums', sourceNames[0]);
// add source and layer for contours
map.addSource('contours', sourceNames[1]);
map.addLayer(layerNames[0]);
map.addLayer(layerNames[1]);
});
//console.log(layerNames);
// enumerate ids of the layers
//var toggleableLayerIds = ['contours', 'museums'];
// set up the corresponding toggle button for each layer
for (var i = 0; i < layerNames.length; i++) {
var id = layerNames[i].id;
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
// toggle layer visibility by changing the layout object's visibility property
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
7.myLayers.js
var s1 = {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
};
var s2 = {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
};
var sourceNames =[];
sourceNames.push(s1);
sourceNames.push(s2);
var museums = {
'id': 'museums',
'type': 'circle',
'source': 'museums',
'layout': {
// make layer visible by default
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'museum-cusco'
};
var contours = {
'id': 'contours',
'type': 'line',
'source': 'contours',
'source-layer': 'contour',
'layout': {
// make layer visible by default
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#877b59',
'line-width': 1
}
};
var layerNames =[];
layerNames.push(museums);
layerNames.push(contours);
export {
sourceNames,
layerNames
}
8.my.css
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.distance-container {
position: absolute;
top: 10px;
left: 50%;
z-index: 1;
}
.distance-container > * {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 11px;
line-height: 18px;
display: block;
margin: 0;
padding: 5px 10px;
border-radius: 3px;
}
.geocoder-dropdown-item {
padding: 5px;
}
.geocoder-dropdown-icon {
margin-right: 10px;
}
.geocoder-dropdown-text {
color: #5a3fc0;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 100px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}9.安装mapbox-gl
npm install --save mapbox-gl10.package.json 中添加自动构建脚本
{
"name": "demo001",
"version": "1.0.0",
"description": "20200623",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-cli",
"start": "webpack",
"dev": "webpack && webpack-dev-server --open"
},
"keywords": [],
"author": "aganliang",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@mapbox/mapbox-gl-draw": "^1.1.2",
"@mapbox/mapbox-gl-geocoder": "^4.5.1",
"@mapbox/mapbox-gl-language": "^0.10.1",
"css-loader": "^3.6.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^4.3.0",
"mapbox-gl": "^1.11.0",
"mapbox-gl-controls": "^1.6.4",
"mapbox-gl-style-switcher": "^1.0.6",
"style-loader": "^1.2.1"
}
}
9.打包
# 在项目目录下
npm run dev
按照package.json的脚本,上面的命令启动webpack的构建脚本
按照webpack.config.js的构建脚本，项目会在dist目录中生成js和html