postcss inline

demos/vector2.html

@@ -37,11 +37,7 @@ const scene = new L7.Scene({
 
 // 高德数据服务  https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf
 scene.on('loaded', () => {
-  const ZoomControl = new L7.Control.Zoom();
-  ZoomControl.addTo(scene);
-  const scaleControl = new L7.Control.Scale();
-  scaleControl.addTo(scene);
-
+  
   const attributeCtr = new L7.Control.Attribution();
   attributeCtr.addTo(scene);
 

package.json

@@ -47,6 +47,7 @@
     "nunjucks": "~3.0.1",
     "open": "~0.0.5",
     "parseurl": "~1.3.2",
+    "postcss-url": "^8.0.0",
     "pre-commit": "~1.2.2",
     "rollup": "^1.16.2",
     "rollup-plugin-buble": "^0.19.6",
@@ -56,6 +57,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "serve-static": "^1.13.2",
     "shelljs": "~0.7.8",

rollup.config.js

@@ -1,15 +1,12 @@
 import fs from 'fs';
-// import sourcemaps from 'rollup-plugin-sourcemaps';
-// import postcss from 'postcss';
 import json from 'rollup-plugin-json';
 import buble from 'rollup-plugin-buble';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import builtins from 'rollup-plugin-node-builtins';
 import { createFilter } from 'rollup-pluginutils';
-import imageInliner from 'postcss-image-inliner';
 import postcss from 'rollup-plugin-postcss';
-import postcssImport from 'postcss-import';
+import url from 'postcss-url';
 import { terser } from 'rollup-plugin-terser';
 const { BUILD, MINIFY } = process.env;
 const minified = MINIFY === 'true';
@@ -45,11 +42,7 @@ const config = [
       json(),
       // css({ raw: './build/l7.css' }),
       postcss({
-        modules: true,
-        plugins: [
-          postcssImport(),
-          imageInliner({ assetPaths: [ '**/images/' ] })
-        ]
+        plugins: [ url({ url: 'inline' }) ]
       }),
       // url({ url: 'inline' }),
       buble({

src/component/css/l7.css

@@ -82,6 +82,9 @@
 
 /* control positioning */
 
+.l7-control-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
 .l7-control {
 	position: relative;
 	z-index: 800;
@@ -197,12 +200,12 @@
 	border-radius: 5px;
 	}
 .l7-control-layers-toggle {
-	background-image: url(images/layers.png);
+	background-image: url(../images/layers.png);
 	width: 36px;
 	height: 36px;
 	}
 .l7-retina .l7-control-layers-toggle {
-	background-image: url(images/layers-2x.png);
+	background-image: url(../images/layers-2x.png);
 	background-size: 26px 26px;
 	}
 .l7-touch .l7-control-layers-toggle {

src/core/scene.js

@@ -9,7 +9,8 @@ import Global from '../global';
 import { getInteraction } from '../interaction/index';
 import { compileBuiltinModules } from '../geom/shader';
 import Style from './style';
-import Control from './controller/control';
+import Controller from './controller/control';
+import * as Control from '../component/control';
 import { epsg3857 } from '@antv/geo-coord/lib/geo/crs/crs-epsg3857';
 export default class Scene extends Base {
   getDefaultCfg() {
@@ -34,8 +35,14 @@ export default class Scene extends Base {
     compileBuiltinModules();
   }
   _initContoller() {
-    const controlCtr = new Control({ scene: this });
+    const controlCtr = new Controller({ scene: this });
     this.set('controlController', controlCtr);
+    if (this.get('zoomControl')) {
+      new Control.Zoom().addTo(this);
+    }
+    if (this.get('scaleControl')) {
+      new Control.Scale().addTo(this);
+    }
   }
   // 为pickup场景添加 object 对象
   addPickMesh(object) {

src/global.js

@@ -14,7 +14,9 @@ const Global = {
     minZoom: 3,
     maxZoom: 18,
     pitch: 0,
-    hash: false
+    hash: false,
+    zoomControl: true,
+    scaleControl: true
   },
   animate: true,
   height: 0,