工程
maptalks是个纯的js库，不依赖任何框架，可以和前端的任意框架进行结合，不管是你是用现代化的Vue/React还是传统的jQuery用户，其都可以和你的项目很好的结合.
| 库/框架 | |
|---|---|
 | 原生JS |
 | React |
 | Vue |
 | Vue-next |
 | Solid |
 | Svelte |
 | Preact |
 | Angular |
 | jQuery |
关于maptalks所提供的包
目前maptalks提供了个两种打包个格式：
- ESM格式的,方便喜欢打包(一般都是webpack,vite,vue-cli等)和现代化的用户,用起来是这样的
sh
npm i maptalks
# or
npm i maptalks-gljs
import { VectorTileLayer, Map } from "@maptalks/gl-layers";
const map = new Map("map", {
// ....
});- UMD格式的，方便一些传统用户习惯，不喜欢打包的用户,用起来是这样的
html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"
/>
<!-- 引入完成的功能包括webgl -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"
></script>
<!-- 其他插件脚本 -->
<script>
const map = new maptalks.Map("map", {
// ....
});
</script>传统的script标签引入
向我这样的老的同学可能喜欢以
html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"
/>
<!-- 引入完成的功能包括webgl -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"
></script>
<!-- 其他插件脚本 -->
<!-- 其他的插件包,例如maptalks.three等 -->
<script>
const map = new matpalks.Map("map", {
// ...
});
</script>的方法引入，也是可以的，尤其是强GIS项目，反正每个页面都用到地图，打包显得没有任何意义(个人见解)
- 这些公共的类库又不改其代码，每次都打包浪费时间和资源
- 打包应该仅限于自己的业务代码，而不是这些我们根本不会去动其源码的第三方库
用script引入了,写业务代码时可以用ESM的方式吗？
可以的，目前市面上的打包工具都提供了了 externals功能的
DANGER
注意maptalks包还是需要安装的
sh
npm i maptalksTIP
因为maptalks的插件包导出的命名空间基本都是maptalks命名空间,所以设置externals时， 只需要设置一个maptalks就可以了,插件里导出的变量都会挂载到maptalks命名空间,设置方法如下：
- webpack(一般是自己搭建的脚手架/React/Angular等)
js
//weppack.config.js
externals: {
maptalks: "maptalks";
}- vue-cli
js
//vue.config.js
configureWebpack: {
externals: {
maptalks: "maptalks"
},
}- vitejs
js
//vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteExternalsPlugin } from "vite-plugin-externals";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteExternalsPlugin({
maptalks: "maptalks",
}),
],
});这样在业务代码里我们既可以愉快的写
js
//导出所有变量
import { Map, VectorTileLayer, ThreeLayer } from "maptalks";
const map = new Map("map", {
// ...
});
//或者
// import {Map,VectorTileLayer,ThreeLayer,....} from 'maptalks';
// ....也可以不去打包maptalks的生态包了，项目打包时间将大大缩短了
DANGER
注意你的html页面需要引入maptalks的和你要使用的插件的umd脚本
html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"
/>
<!-- 引入完成的功能包括webgl -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"
></script>
<!-- 其他插件脚本 -->