refactor(map): container layout

demos/hz.html

@@ -30,84 +30,12 @@ const scene = new L7.Scene({
         ],
   pitch:0,
   zoom: 5,
+  showBuildingBlock:false,
   minZoom: 0,
   maxZoom: 18
 });
 
-const lineData = {
+
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "LineString",
-        "coordinates": [
-          [
-            117.02636718749999,
-            37.79676317682161
-          ],
-          [
-            117.20214843749999,
-            37.23032838760387
-          ],
-          [
-            117.31201171875001,
-            36.756490329505176
-          ],
-          [
-            117.43286132812499,
-            36.38591277287651
-          ],
-          [
-            117.586669921875,
-            35.871246850027966
-          ],
-          [
-            117.76245117187499,
-            35.25459097465022
-          ],
-          [
-            117.90527343750001,
-            34.732584206123626
-          ],
-          [
-            117.99316406249999,
-            33.8339199536547
-          ],
-          [
-            117.97119140625,
-            33.119150226768866
-          ],
-          [
-            117.48779296875,
-            32.80574473290688
-          ],
-          [
-            116.773681640625,
-            32.713355353177555
-          ],
-          [
-            115.67504882812501,
-            32.704111144407406
-          ],
-          [
-            114.510498046875,
-            32.85190345738802
-          ],
-          [
-            113.818359375,
-            33.61461929233378
-          ],
-          [
-            113.70849609375,
-            33.970697997361626
-          ]
-        ]
-      }
-    }
-  ]
-}
 scene.on('loaded', () => {
   $.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
     scene.LineLayer({

demos/marker.html

@@ -31,6 +31,22 @@
   });
   window.scene = scene;
   scene.on('loaded', function() {
+    $.getJSON('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json', region => {
+      const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
+      var points = region.features.map((feature)=>{
+          return feature.properties;
+      })
+      
+      const layer = scene.PolygonLayer({
+          zIndex:1,
+      })
+        .source(region)
+        .color('cname',(value)=>{
+            return (value =='中国' ? 'rgba(46,149,169,0.45)': 'rgba(227,244,244,0.1)');
+        })
+        .shape('fill')
+        .render();
+    });
     $.getJSON('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json', function(data) {
       console.log(data);
         data.nodes.forEach(item=>{
@@ -38,7 +54,6 @@
             const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
             
             const size =Math.max(Math.min(parseInt(total / 20000), 150),40)
-            console.log(item.name, size);
             var data = [{
             item: 'Agriculture',
             count: item.gdp.Agriculture,

src/component/marker.js

@@ -53,7 +53,7 @@ export default class Marker extends Base {
   addTo(scene) {
     this.remove();
     this._scene = scene;
-    this._scene.getContainer().appendChild(this.get('element'));
+    this._scene.getMarkerContainer().appendChild(this.get('element'));
     this._scene.on('camerachange', this._update);
     this.setDraggable(this.get('draggable'));
     this._update();
@@ -124,7 +124,7 @@ export default class Marker extends Base {
 
   }
   _onMapClick() {
-    this._scene.emit('click'); // 触发map点击事件，关闭其他popup
+    // this._scene.emit('click'); // 触发map点击事件，关闭其他popup
     const element = this.get('element');
 
     if (this._popup && element) {

src/component/popup.js

@@ -34,13 +34,17 @@ export default class Popup extends Base {
     const hasPosition = this.lngLat;
     if (!this._scene || !hasPosition || !this._content) { return; }
     if (!this._container) {
-      this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer());
+      this._container = this.creatDom('div', 'l7-popup', this._scene.getMarkerContainer().parentNode);
+
       this._tip = this.creatDom('div', 'l7-popup-tip', this._container);
       this._container.appendChild(this._content);
       if (this.get('className')) {
         this.get('className').split(' ').forEach(name =>
           this._container.classList.add(name));
       }
+      this._container.addEventListener('mousedown', e => {
+        e.stopPropagation();
+      });
     }
     if (this.get('maxWidth') && this._container.style.maxWidth !== this.get('maxWidth')) {
       this._container.style.maxWidth = this.get('maxWidth');

src/core/scene.js

@@ -20,7 +20,6 @@ export default class Scene extends Base {
     super(cfg);
     this._initMap();
     this.crs = epsg3857;
-    // this._initAttribution(); // 暂时取消，后面作为组件去加载
     this.addImage();
     this.fontAtlasManager = new FontAtlasManager();
     this._layers = [];
@@ -54,6 +53,7 @@ export default class Scene extends Base {
     const Map = new MapProvider(this._attrs);
     Map.mixMap(this);
     this._container = Map.container;
+    this._markerContainier = Map.l7_marker_Container;
     Map.on('mapLoad', () => {
       this.map = Map.map;
       this._initEngine(Map.renderDom);
@@ -122,6 +122,9 @@ export default class Scene extends Base {
   getContainer() {
     return this._container;
   }
+  getMarkerContainer() {
+    return this._markerContainier;
+  }
   _registEvents() {
     const events = [
       'mouseout',

src/map/AMap.js

@@ -59,6 +59,7 @@ export default class GaodeMap extends Base {
     } else {
       this.map = new AMap.Map(this.container, this._attrs);
     }
+    this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
   }
   asyncCamera(engine) {
     this._engine = engine;
@@ -96,13 +97,17 @@ export default class GaodeMap extends Base {
     return this.projectFlat(this.getCenter());
   }
   addOverLayer() {
-    const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
+    // const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
-    this.canvasContainer = canvasContainer;
+    // this.canvasContainer = canvasContainer;
     this.renderDom = document.createElement('div');
     this.renderDom.style.cssText +=
       'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
     this.renderDom.id = 'l7_canvaslayer';
-    canvasContainer.appendChild(this.renderDom);
+
+    this.amapContainer.appendChild(this.renderDom);
+    this.l7_marker_Container = document.createElement('div');
+    this.l7_marker_Container.className = 'l7_marker';
+    this.amapContainer.appendChild(this.l7_marker_Container);
   }
   mixMap(scene) {
     const map = this.map;