barchart

public/static/plugins/js/leaflet1.3.1/leaflet.label.js

@@ -7,549 +7,584 @@
     https://github.com/jacobtoye
 */
 (function () {
-//var L = window.L;
-/*
- * Leaflet.label assumes that you have already included the Leaflet library.
- */
-
-//L.labelVersion = '0.2.2-dev';
+  //var L = window.L;
+  /*
+   * Leaflet.label assumes that you have already included the Leaflet library.
+   */
 
-L.Label = (L.Layer ? L.Layer : L.Class).extend({
+  //L.labelVersion = '0.2.2-dev';
 
-    includes: L.Mixin.Events,
+  L.Label = (L.Layer ? L.Layer : L.Class).extend({
+    // includes: L.Mixin.Events,
+    includes: L.Events,
 
     options: {
-        className: '',
-        clickable: false,
-        direction: 'auto',
-        noHide: false,
-        offset: [13, -16], // 6 (width of the label triangle) + 6 (padding)
-        opacity: 1,
-        zoomAnimation: true
+      className: "",
+      clickable: false,
+      direction: "auto",
+      noHide: false,
+      offset: [13, -16], // 6 (width of the label triangle) + 6 (padding)
+      opacity: 1,
+      zoomAnimation: true,
     },
 
     initialize: function (options, source) {
-        L.setOptions(this, options);
+      L.setOptions(this, options);
 
-        this._source = source;
-        this._animated = L.Browser.any3d && this.options.zoomAnimation;
-        this._isOpen = false;
+      this._source = source;
+      this._animated = L.Browser.any3d && this.options.zoomAnimation;
+      this._isOpen = false;
     },
 
     onAdd: function (map) {
-        this._map = map;
+      this._map = map;
 
-        this._pane = this.options.pane ? map._panes[this.options.pane] :
-            this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane;
+      this._pane = this.options.pane
+        ? map._panes[this.options.pane]
+        : this._source instanceof L.Marker
+        ? map._panes.markerPane
+        : map._panes.popupPane;
 
-        if (!this._container) {
-            this._initLayout();
-        }
+      if (!this._container) {
+        this._initLayout();
+      }
 
-        this._pane.appendChild(this._container);
+      this._pane.appendChild(this._container);
 
-        this._initInteraction();
+      this._initInteraction();
 
-        this._update();
+      this._update();
 
-        this.setOpacity(this.options.opacity);
+      this.setOpacity(this.options.opacity);
 
-        map
-            .on('moveend', this._onMoveEnd, this)
-            .on('viewreset', this._onViewReset, this);
+      map
+        .on("moveend", this._onMoveEnd, this)
+        .on("viewreset", this._onViewReset, this);
 
-        if (this._animated) {
-            map.on('zoomanim', this._zoomAnimation, this);
-        }
+      if (this._animated) {
+        map.on("zoomanim", this._zoomAnimation, this);
+      }
 
-        if (L.Browser.touch && !this.options.noHide) {
-            L.DomEvent.on(this._container, 'click', this.close, this);
-            map.on('click', this.close, this);
-        }
+      if (L.Browser.touch && !this.options.noHide) {
+        L.DomEvent.on(this._container, "click", this.close, this);
+        map.on("click", this.close, this);
+      }
     },
 
     onRemove: function (map) {
-        this._pane.removeChild(this._container);
-
-        map.off({
-            zoomanim: this._zoomAnimation,
-            moveend: this._onMoveEnd,
-            viewreset: this._onViewReset
-        }, this);
+      this._pane.removeChild(this._container);
+
+      map.off(
+        {
+          zoomanim: this._zoomAnimation,
+          moveend: this._onMoveEnd,
+          viewreset: this._onViewReset,
+        },
+        this
+      );
 
-        this._removeInteraction();
+      this._removeInteraction();
 
-        this._map = null;
+      this._map = null;
     },
 
     setLatLng: function (latlng) {
-        this._latlng = L.latLng(latlng);
-        if (this._map) {
-            this._updatePosition();
-        }
-        return this;
+      this._latlng = L.latLng(latlng);
+      if (this._map) {
+        this._updatePosition();
+      }
+      return this;
     },
 
     setContent: function (content) {
-        // Backup previous content and store new content
-        this._previousContent = this._content;
-        this._content = content;
+      // Backup previous content and store new content
+      this._previousContent = this._content;
+      this._content = content;
 
-        this._updateContent();
+      this._updateContent();
 
-        return this;
+      return this;
     },
 
     close: function () {
-        var map = this._map;
-
-        if (map) {
-            if (L.Browser.touch && !this.options.noHide) {
-                L.DomEvent.off(this._container, 'click', this.close);
-                map.off('click', this.close, this);
-            }
+      var map = this._map;
 
-            map.removeLayer(this);
+      if (map) {
+        if (L.Browser.touch && !this.options.noHide) {
+          L.DomEvent.off(this._container, "click", this.close);
+          map.off("click", this.close, this);
         }
+
+        map.removeLayer(this);
+      }
     },
 
     updateZIndex: function (zIndex) {
-        this._zIndex = zIndex;
+      this._zIndex = zIndex;
 
-        if (this._container && this._zIndex) {
-            this._container.style.zIndex = zIndex;
-        }
+      if (this._container && this._zIndex) {
+        this._container.style.zIndex = zIndex;
+      }
     },
 
     setOpacity: function (opacity) {
-        this.options.opacity = opacity;
+      this.options.opacity = opacity;
 
-        if (this._container) {
-            L.DomUtil.setOpacity(this._container, opacity);
-        }
+      if (this._container) {
+        L.DomUtil.setOpacity(this._container, opacity);
+      }
     },
 
     _initLayout: function () {
-        this._container = L.DomUtil.create('div', 'leaflet-label ' + this.options.className + ' leaflet-zoom-animated');
-        this.updateZIndex(this._zIndex);
+      this._container = L.DomUtil.create(
+        "div",
+        "leaflet-label " + this.options.className + " leaflet-zoom-animated"
+      );
+      this.updateZIndex(this._zIndex);
     },
 
     _update: function () {
-        if (!this._map) { return; }
+      if (!this._map) {
+        return;
+      }
 
-        this._container.style.visibility = 'hidden';
+      this._container.style.visibility = "hidden";
 
-        this._updateContent();
-        this._updatePosition();
+      this._updateContent();
+      this._updatePosition();
 
-        this._container.style.visibility = '';
+      this._container.style.visibility = "";
     },
 
     _updateContent: function () {
-        if (!this._content || !this._map || this._prevContent === this._content) {
-            return;
-        }
-
-        if (typeof this._content === 'string') {
-            this._container.innerHTML = this._content;
-            this._prevContent = this._content;
-            this._labelWidth = this._container.offsetWidth;
-        }else {
-            this._container.innerHTML = "";
-            this._container.appendChild(this._content);
-            this._prevContent = this._content;
-            this._labelWidth = this._container.offsetWidth;
-        }
-//==S== 修改标记
-        L.DomUtil.create('div','leaflet-label-tips',this._container);
-//==E== 修改标记        
+      if (!this._content || !this._map || this._prevContent === this._content) {
+        return;
+      }
+
+      if (typeof this._content === "string") {
+        this._container.innerHTML = this._content;
+        this._prevContent = this._content;
+        this._labelWidth = this._container.offsetWidth;
+      } else {
+        this._container.innerHTML = "";
+        this._container.appendChild(this._content);
+        this._prevContent = this._content;
+        this._labelWidth = this._container.offsetWidth;
+      }
+      //==S== 修改标记
+      L.DomUtil.create("div", "leaflet-label-tips", this._container);
+      //==E== 修改标记
     },
 
     _updatePosition: function () {
-        var pos = this._map.latLngToLayerPoint(this._latlng);
+      var pos = this._map.latLngToLayerPoint(this._latlng);
 
-        this._setPosition(pos);
+      this._setPosition(pos);
     },
 
     _setPosition: function (pos) {
-        var map = this._map,
-            container = this._container,
-            centerPoint = map.latLngToContainerPoint(map.getCenter()),
-            labelPoint = map.layerPointToContainerPoint(pos),
-            direction = this.options.direction,
-            labelWidth = this._labelWidth,
-            offset = L.point(this.options.offset);
-
-        // position to the right (right or auto & needs to)
-        if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
-            L.DomUtil.addClass(container, 'leaflet-label-right');
-            L.DomUtil.removeClass(container, 'leaflet-label-left');
-
-            pos = pos.add(offset);
-        } else { // position to the left
-            L.DomUtil.addClass(container, 'leaflet-label-left');
-            L.DomUtil.removeClass(container, 'leaflet-label-right');
-
-            pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
-        }
-
-        L.DomUtil.setPosition(container, pos);
+      var map = this._map,
+        container = this._container,
+        centerPoint = map.latLngToContainerPoint(map.getCenter()),
+        labelPoint = map.layerPointToContainerPoint(pos),
+        direction = this.options.direction,
+        labelWidth = this._labelWidth,
+        offset = L.point(this.options.offset);
+
+      // position to the right (right or auto & needs to)
+      if (
+        direction === "right" ||
+        (direction === "auto" && labelPoint.x < centerPoint.x)
+      ) {
+        L.DomUtil.addClass(container, "leaflet-label-right");
+        L.DomUtil.removeClass(container, "leaflet-label-left");
+
+        pos = pos.add(offset);
+      } else {
+        // position to the left
+        L.DomUtil.addClass(container, "leaflet-label-left");
+        L.DomUtil.removeClass(container, "leaflet-label-right");
+
+        pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
+      }
+
+      L.DomUtil.setPosition(container, pos);
     },
 
     _zoomAnimation: function (opt) {
-        var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
+      var pos = this._map
+        ._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center)
+        .round();
 
-        this._setPosition(pos);
+      this._setPosition(pos);
     },
 
     _onMoveEnd: function () {
-        if (!this._animated || this.options.direction === 'auto') {
-            this._updatePosition();
-        }
+      if (!this._animated || this.options.direction === "auto") {
+        this._updatePosition();
+      }
     },
 
     _onViewReset: function (e) {
-        /* if map resets hard, we must update the label */
-        if (e && e.hard) {
-            this._update();
-        }
+      /* if map resets hard, we must update the label */
+      if (e && e.hard) {
+        this._update();
+      }
     },
 
     _initInteraction: function () {
-        if (!this.options.clickable) { return; }
+      if (!this.options.clickable) {
+        return;
+      }
 
-        var container = this._container,
-            events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+      var container = this._container,
+        events = [
+          "dblclick",
+          "mousedown",
+          "mouseover",
+          "mouseout",
+          "contextmenu",
+        ];
 
-        L.DomUtil.addClass(container, 'leaflet-clickable');
-        L.DomEvent.on(container, 'click', this._onMouseClick, this);
+      L.DomUtil.addClass(container, "leaflet-clickable");
+      L.DomEvent.on(container, "click", this._onMouseClick, this);
 
-        for (var i = 0; i < events.length; i++) {
-            L.DomEvent.on(container, events[i], this._fireMouseEvent, this);
-        }
+      for (var i = 0; i < events.length; i++) {
+        L.DomEvent.on(container, events[i], this._fireMouseEvent, this);
+      }
     },
 
     _removeInteraction: function () {
-        if (!this.options.clickable) { return; }
+      if (!this.options.clickable) {
+        return;
+      }
 
-        var container = this._container,
-            events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+      var container = this._container,
+        events = [
+          "dblclick",
+          "mousedown",
+          "mouseover",
+          "mouseout",
+          "contextmenu",
+        ];
 
-        L.DomUtil.removeClass(container, 'leaflet-clickable');
-        L.DomEvent.off(container, 'click', this._onMouseClick, this);
+      L.DomUtil.removeClass(container, "leaflet-clickable");
+      L.DomEvent.off(container, "click", this._onMouseClick, this);
 
-        for (var i = 0; i < events.length; i++) {
-            L.DomEvent.off(container, events[i], this._fireMouseEvent, this);
-        }
+      for (var i = 0; i < events.length; i++) {
+        L.DomEvent.off(container, events[i], this._fireMouseEvent, this);
+      }
     },
 
     _onMouseClick: function (e) {
-        if (this.hasEventListeners(e.type)) {
-            L.DomEvent.stopPropagation(e);
-        }
+      if (this.hasEventListeners(e.type)) {
+        L.DomEvent.stopPropagation(e);
+      }
 
-        this.fire(e.type, {
-            originalEvent: e
-        });
+      this.fire(e.type, {
+        originalEvent: e,
+      });
     },
 
     _fireMouseEvent: function (e) {
-        this.fire(e.type, {
-            originalEvent: e
-        });
-
-        // TODO proper custom event propagation
-        // this line will always be called if marker is in a FeatureGroup
-        if (e.type === 'contextmenu' && this.hasEventListeners(e.type)) {
-            L.DomEvent.preventDefault(e);
-        }
-        if (e.type !== 'mousedown') {
-            L.DomEvent.stopPropagation(e);
-        } else {
-            L.DomEvent.preventDefault(e);
-        }
-    }
-});
-
-
-// This object is a mixin for L.Marker and L.CircleMarker. We declare it here as both need to include the contents.
-L.BaseMarkerMethods = {
+      this.fire(e.type, {
+        originalEvent: e,
+      });
+
+      // TODO proper custom event propagation
+      // this line will always be called if marker is in a FeatureGroup
+      if (e.type === "contextmenu" && this.hasEventListeners(e.type)) {
+        L.DomEvent.preventDefault(e);
+      }
+      if (e.type !== "mousedown") {
+        L.DomEvent.stopPropagation(e);
+      } else {
+        L.DomEvent.preventDefault(e);
+      }
+    },
+  });
+
+  // This object is a mixin for L.Marker and L.CircleMarker. We declare it here as both need to include the contents.
+  L.BaseMarkerMethods = {
     showLabel: function () {
-        if (this.label && this._map) {
-            this.label.setLatLng(this._latlng);
-            this._map.showLabel(this.label);
-        }
+      if (this.label && this._map) {
+        this.label.setLatLng(this._latlng);
+        this._map.showLabel(this.label);
+      }
 
-        return this;
+      return this;
     },
 
     hideLabel: function () {
-        if (this.label) {
-            this.label.close();
-        }
-        return this;
+      if (this.label) {
+        this.label.close();
+      }
+      return this;
     },
 
     setLabelNoHide: function (noHide) {
-        if (this._labelNoHide === noHide) {
-            return;
-        }
+      if (this._labelNoHide === noHide) {
+        return;
+      }
 
-        this._labelNoHide = noHide;
+      this._labelNoHide = noHide;
 
-        if (noHide) {
-            this._removeLabelRevealHandlers();
-            this.showLabel();
-        } else {
-            this._addLabelRevealHandlers();
-            this.hideLabel();
-        }
+      if (noHide) {
+        this._removeLabelRevealHandlers();
+        this.showLabel();
+      } else {
+        this._addLabelRevealHandlers();
+        this.hideLabel();
+      }
     },
 
     bindLabel: function (content, options) {
-        if(this.label){
-            return false;
-        }
-        var labelAnchor = this.options.icon ? this.options.icon.options.labelAnchor : this.options.labelAnchor,
-            anchor = L.point(labelAnchor) || L.point(0, 0);
+      if (this.label) {
+        return false;
+      }
+      var labelAnchor = this.options.icon
+          ? this.options.icon.options.labelAnchor
+          : this.options.labelAnchor,
+        anchor = L.point(labelAnchor) || L.point(0, 0);
 
-        anchor = anchor.add(L.Label.prototype.options.offset);
+      anchor = anchor.add(L.Label.prototype.options.offset);
 
-        if (options && options.offset) {
-            anchor = anchor.add(options.offset);
-        }
+      if (options && options.offset) {
+        anchor = anchor.add(options.offset);
+      }
 
-        options = L.Util.extend({offset: anchor}, options);
+      options = L.Util.extend({ offset: anchor }, options);
 
-        this._labelNoHide = options.noHide;
+      this._labelNoHide = options.noHide;
 
-        if (!this.label) {
-            if (!this._labelNoHide) {
-                this._addLabelRevealHandlers();
-            }
+      if (!this.label) {
+        if (!this._labelNoHide) {
+          this._addLabelRevealHandlers();
+        }
 
-            this
-                .on('remove', this.hideLabel, this)
-                .on('move', this._moveLabel, this)
-                .on('add', this._onMarkerAdd, this);
+        this.on("remove", this.hideLabel, this)
+          .on("move", this._moveLabel, this)
+          .on("add", this._onMarkerAdd, this);
 
-            this._hasLabelHandlers = true;
-        }
+        this._hasLabelHandlers = true;
+      }
 
-        this.label = new L.Label(options, this)
-            .setContent(content);
+      this.label = new L.Label(options, this).setContent(content);
 
-        return this;
+      return this;
     },
 
     unbindLabel: function () {
-        if (this.label) {
-            this.hideLabel();
-
-            this.label = null;
+      if (this.label) {
+        this.hideLabel();
 
-            if (this._hasLabelHandlers) {
-                if (!this._labelNoHide) {
-                    this._removeLabelRevealHandlers();
-                }
+        this.label = null;
 
-                this
-                    .off('remove', this.hideLabel, this)
-                    .off('move', this._moveLabel, this)
-                    .off('add', this._onMarkerAdd, this);
-            }
+        if (this._hasLabelHandlers) {
+          if (!this._labelNoHide) {
+            this._removeLabelRevealHandlers();
+          }
 
-            this._hasLabelHandlers = false;
+          this.off("remove", this.hideLabel, this)
+            .off("move", this._moveLabel, this)
+            .off("add", this._onMarkerAdd, this);
         }
-        return this;
+
+        this._hasLabelHandlers = false;
+      }
+      return this;
     },
 
     updateLabelContent: function (content) {
-        if (this.label) {
-            this.label.setContent(content);
-        }
+      if (this.label) {
+        this.label.setContent(content);
+      }
     },
 
     getLabel: function () {
-        return this.label;
+      return this.label;
     },
 
     _onMarkerAdd: function () {
-        if (this._labelNoHide) {
-            this.showLabel();
-        }
+      if (this._labelNoHide) {
+        this.showLabel();
+      }
     },
 
     _addLabelRevealHandlers: function () {
+      this.on("mouseover", this.showLabel, this).on(
+        "mouseout",
+        this.hideLabel,
         this
-            .on('mouseover', this.showLabel, this)
-            .on('mouseout', this.hideLabel, this);
+      );
 
-        if (L.Browser.touch) {
-            this.on('click', this.showLabel, this);
-        }
+      if (L.Browser.touch) {
+        this.on("click", this.showLabel, this);
+      }
     },
 
     _removeLabelRevealHandlers: function () {
+      this.off("mouseover", this.showLabel, this).off(
+        "mouseout",
+        this.hideLabel,
         this
-            .off('mouseover', this.showLabel, this)
-            .off('mouseout', this.hideLabel, this);
+      );
 
-        if (L.Browser.touch) {
-            this.off('click', this.showLabel, this);
-        }
+      if (L.Browser.touch) {
+        this.off("click", this.showLabel, this);
+      }
     },
 
     _moveLabel: function (e) {
-        this.label.setLatLng(e.latlng);
-    }
-};
-
-// Add in an option to icon that is used to set where the label anchor is
-L.Icon.Default.mergeOptions({
-    labelAnchor: new L.Point(4, -15)
-});
-
-// Have to do this since Leaflet is loaded before this plugin and initializes
-// L.Marker.options.icon therefore missing our mixin above.
-L.Marker.mergeOptions({
-    icon: new L.Icon.Default()
-});
-
-L.Marker.include(L.BaseMarkerMethods);
-L.Marker.include({
+      this.label.setLatLng(e.latlng);
+    },
+  };
+
+  // Add in an option to icon that is used to set where the label anchor is
+  L.Icon.Default.mergeOptions({
+    labelAnchor: new L.Point(4, -15),
+  });
+
+  // Have to do this since Leaflet is loaded before this plugin and initializes
+  // L.Marker.options.icon therefore missing our mixin above.
+  L.Marker.mergeOptions({
+    icon: new L.Icon.Default(),
+  });
+
+  L.Marker.include(L.BaseMarkerMethods);
+  L.Marker.include({
     _originalUpdateZIndex: L.Marker.prototype._updateZIndex,
 
     _updateZIndex: function (offset) {
-        var zIndex = this._zIndex + offset;
+      var zIndex = this._zIndex + offset;
 
-        this._originalUpdateZIndex(offset);
+      this._originalUpdateZIndex(offset);
 
-        if (this.label) {
-            this.label.updateZIndex(zIndex);
-        }
+      if (this.label) {
+        this.label.updateZIndex(zIndex);
+      }
     },
 
     _originalSetOpacity: L.Marker.prototype.setOpacity,
 
     setOpacity: function (opacity, labelHasSemiTransparency) {
-        this.options.labelHasSemiTransparency = labelHasSemiTransparency;
+      this.options.labelHasSemiTransparency = labelHasSemiTransparency;
 
-        this._originalSetOpacity(opacity);
+      this._originalSetOpacity(opacity);
     },
 
     _originalUpdateOpacity: L.Marker.prototype._updateOpacity,
 
     _updateOpacity: function () {
-        var absoluteOpacity = this.options.opacity === 0 ? 0 : 1;
+      var absoluteOpacity = this.options.opacity === 0 ? 0 : 1;
 
-        this._originalUpdateOpacity();
+      this._originalUpdateOpacity();
 
-        if (this.label) {
-            this.label.setOpacity(this.options.labelHasSemiTransparency ? this.options.opacity : absoluteOpacity);
-        }
+      if (this.label) {
+        this.label.setOpacity(
+          this.options.labelHasSemiTransparency
+            ? this.options.opacity
+            : absoluteOpacity
+        );
+      }
     },
 
     _originalSetLatLng: L.Marker.prototype.setLatLng,
 
     setLatLng: function (latlng) {
-        if (this.label && !this._labelNoHide) {
-            this.hideLabel();
-        }
-
-        return this._originalSetLatLng(latlng);
-    }
-});
+      if (this.label && !this._labelNoHide) {
+        this.hideLabel();
+      }
 
-// Add in an option to icon that is used to set where the label anchor is
-L.CircleMarker.mergeOptions({
-    labelAnchor: new L.Point(-5, 5)
-});
+      return this._originalSetLatLng(latlng);
+    },
+  });
 
+  // Add in an option to icon that is used to set where the label anchor is
+  L.CircleMarker.mergeOptions({
+    labelAnchor: new L.Point(-5, 5),
+  });
 
-L.CircleMarker.include(L.BaseMarkerMethods);
+  L.CircleMarker.include(L.BaseMarkerMethods);
 
-L.Path.include({
+  L.Path.include({
     bindLabel: function (content, options) {
-        if (!this.label || this.label.options !== options) {
-            this.label = new L.Label(options, this);
-        }
+      if (!this.label || this.label.options !== options) {
+        this.label = new L.Label(options, this);
+      }
 
-        this.label.setContent(content);
+      this.label.setContent(content);
 
-        if (!this._showLabelAdded) {
-            this
-                .on('mouseover', this._showLabel, this)
-                .on('mousemove', this._moveLabel, this)
-                .on('mouseout remove', this._hideLabel, this);
+      if (!this._showLabelAdded) {
+        this.on("mouseover", this._showLabel, this)
+          .on("mousemove", this._moveLabel, this)
+          .on("mouseout remove", this._hideLabel, this);
 
-            if (L.Browser.touch) {
-                this.on('click', this._showLabel, this);
-            }
-            this._showLabelAdded = true;
+        if (L.Browser.touch) {
+          this.on("click", this._showLabel, this);
         }
+        this._showLabelAdded = true;
+      }
 
-        return this;
+      return this;
     },
 
     unbindLabel: function () {
-        if (this.label) {
-            this._hideLabel();
-            this.label = null;
-            this._showLabelAdded = false;
-            this
-                .off('mouseover', this._showLabel, this)
-                .off('mousemove', this._moveLabel, this)
-                .off('mouseout remove', this._hideLabel, this);
-        }
-        return this;
+      if (this.label) {
+        this._hideLabel();
+        this.label = null;
+        this._showLabelAdded = false;
+        this.off("mouseover", this._showLabel, this)
+          .off("mousemove", this._moveLabel, this)
+          .off("mouseout remove", this._hideLabel, this);
+      }
+      return this;
     },
 
     updateLabelContent: function (content) {
-        if (this.label) {
-            this.label.setContent(content);
-        }
+      if (this.label) {
+        this.label.setContent(content);
+      }
     },
 
     _showLabel: function (e) {
-        this.label.setLatLng(e.latlng);
-        this._map.showLabel(this.label);
+      this.label.setLatLng(e.latlng);
+      this._map.showLabel(this.label);
     },
 
     _moveLabel: function (e) {
-        this.label.setLatLng(e.latlng);
+      this.label.setLatLng(e.latlng);
     },
 
     _hideLabel: function () {
-        this.label.close();
-    }
-});
+      this.label.close();
+    },
+  });
 
-L.Map.include({
+  L.Map.include({
     showLabel: function (label) {
-        return this.addLayer(label);
-    }
-});
+      return this.addLayer(label);
+    },
+  });
 
-L.FeatureGroup.include({
+  L.FeatureGroup.include({
     // TODO: remove this when AOP is supported in Leaflet, need this as we cannot put code in removeLayer()
     clearLayers: function () {
-        this.unbindLabel();
-        this.eachLayer(this.removeLayer, this);
-        return this;
+      this.unbindLabel();
+      this.eachLayer(this.removeLayer, this);
+      return this;
     },
 
     bindLabel: function (content, options) {
-        return this.invoke('bindLabel', content, options);
+      return this.invoke("bindLabel", content, options);
     },
 
     unbindLabel: function () {
-        return this.invoke('unbindLabel');
+      return this.invoke("unbindLabel");
     },
 
     updateLabelContent: function (content) {
-        this.invoke('updateLabelContent', content);
-    }
-});
-
-}(window, document));
+      this.invoke("updateLabelContent", content);
+    },
+  });
+})(window, document);

src/components/chart/BarChart.vue

@@ -73,11 +73,21 @@ export default {
             type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
           },
         },
-        legend: {},
+        legend: {
+          bottom: "0%",
+          right: "-1%",
+          orient: "vertical",
+          textStyle: {
+            color: "#FFF",
+            fontSize: "14",
+            fontFamily: "PingFang SC",
+          },
+        },
         grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
+          top: "5%",
+          left: "0",
+          right: "19%",
+          bottom: "-5%",
           containLabel: true,
         },
         xAxis: {
@@ -85,6 +95,11 @@ export default {
           show: false,
         },
         yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: "#FFF",
+            },
+          },
           // axisLine: "none",
           axisTick: "none",
           axisLabel: {
@@ -96,7 +111,7 @@ export default {
         },
         series: [
           {
-            name: "土地资源",
+            name: "土地",
             type: "bar",
             stack: "total",
             // label: {
@@ -109,7 +124,7 @@ export default {
             // data: [320, 302, 301, 334, 390, 330, 320],
           },
           {
-            name: "水资源",
+            name: "水",
             type: "bar",
             stack: "total",
             // label: {
@@ -122,7 +137,7 @@ export default {
             // data: [120, 132, 101, 134, 90, 230, 210],
           },
           {
-            name: "林地资源",
+            name: "林地",
             type: "bar",
             stack: "total",
             // label: {

src/components/chart/LineChart.vue

@@ -7,7 +7,7 @@ export default {
   name: "LineChart",
   data() {
     return {
-      lineChart: null
+      lineChart: null,
     };
   },
   props: {
@@ -15,22 +15,22 @@ export default {
       type: Array,
       default() {
         return [];
-      }
+      },
     },
     valueData: {
       type: Array,
       default() {
         return [];
-      }
-    }
+      },
+    },
   },
   watch: {
     categoryData: {
       handler(val) {
-        console.log(val, "categoryData");
+        // console.log(val, "categoryData");
       },
-      immediate: true
-    }
+      immediate: true,
+    },
     // categoryData(val){
     //   console.log(val,"categoryData");
     // }
@@ -48,36 +48,38 @@ export default {
       let option = {
         tooltip: {
           show: true,
-          trigger: "axis"
+          trigger: "axis",
         },
         grid: {
           left: "3%",
           right: "4%",
           bottom: "3%",
           top: "20px",
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: "category",
           data: xData,
           axisTick: {
-            show: false // 不显示坐标轴刻度线
+            show: false, // 不显示坐标轴刻度线
           },
           axisLine: {
             show: true,
             lineStyle: {
               color: "rgba(219,225,255,1)",
               width: 1,
-              type: "solid"
-            }
+              type: "solid",
+            },
           },
           axisLabel: {
             //x轴文字的配置
             show: true,
-            textStyle: {
-              color: "rgba(219,225,255,1)"
-            }
-          }
+            color: "rgba(219,225,255,1)",
+            // 旧版textStyle写法
+            // textStyle: {
+            //   color: "rgba(219,225,255,1)"
+            // }
+          },
         },
         yAxis: {
           // min: 1000,
@@ -91,19 +93,22 @@ export default {
           type: "value",
           scale: true,
           splitLine: {
-            show: false // 不显示网格线
+            show: false, // 不显示网格线
           },
           axisLine: {
-            show: false // 不显示坐标轴线
+            show: false, // 不显示坐标轴线
           },
           axisLabel: {
             //y轴文字的配置
-            textStyle: {
-              color: "rgba(219,225,255,1)",
-              margin: 15
-            }
+            color: "rgba(219,225,255,1)",
+            margin: 15,
+            // 旧版textStyle写法
+            // textStyle: {
+            //   color: "rgba(219,225,255,1)",
+            //   margin: 15
+            // }
             // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-          }
+          },
         },
         series: [
           {
@@ -112,26 +117,26 @@ export default {
             type: "line",
             smooth: true,
             itemStyle: {
-              color: "#00aaff"
+              color: "#00aaff",
             },
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: "#00aaff"
+                  color: "#00aaff",
                 },
                 {
                   offset: 1,
-                  color: "#00aaff00"
-                }
-              ])
-            }
-          }
-        ]
+                  color: "#00aaff00",
+                },
+              ]),
+            },
+          },
+        ],
       };
       this.lineChart.setOption(option);
-    }
-  }
+    },
+  },
 };
 </script>
 <style>

src/components/common/NewSelect.vue

@@ -47,7 +47,7 @@ export default {
     },
   },
   created() {
-    console.log(this.imgValue);
+    // console.log(this.imgValue);
   },
   mounted() {},
   methods: {

src/components/map/MapHolder.vue

@@ -31,6 +31,12 @@ export default {
                   .addTo(map2DViewer.map);
             layer.guid = guid;
             map2DViewer.layers[guid] = layer;
+        },
+        setView:function(coord,zoom){
+            console.log(coord,"位置");
+            let center = L.latLng(coord[0],coord[1])
+            map2DViewer.map.setView(center,zoom)
+
         }
     }
 }

src/views/HomeView.vue

@@ -1,10 +1,14 @@
 <template>
   <div id="LayoutContent">
-    <MapHolder></MapHolder>
+    <MapHolder ref="mapLoaderRef"></MapHolder>
     <Header @navSelect="navSelect"></Header>
     <!-- 左侧菜单列 1 -- 首页 -->
-    <div id="leftMenus" v-if="$ifMenu('1','')">
-      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
+    <div id="leftMenus" v-if="$ifMenu('1', '')">
+      <MenuCard
+        :type="menus.left[0].type"
+        :title="menus.left[0].title"
+        :boxHeight="menus.left[0].height"
+      >
         <template slot="top">
           <TagTableCard :data="tagCardData2" />
         </template>
@@ -45,13 +49,14 @@
       </MenuCard>
     </div>
     <!-- 中部菜单列 -->
-    <div id="mainMenus" v-if="$ifMenu('1','')">
+    <div id="mainMenus" v-if="$ifMenu('1', '')">
       <div id="mainMenus_topLeft">所属街道</div>
       <NewSelect
         id="mainMenus_topSelect"
         v-model="streetSelectVal"
         :options="streetOptions"
         :value="streetSelectVal"
+        @selectEvent="selectEvent"
       />
       <div id="mainMenus_topRight">
         <MenuCard
@@ -84,12 +89,14 @@
           </div>
         </MenuCard>
       </div>
+      <div class="legend-line"></div>
       <MenuCard
         id="mainMenus_bottomLegend"
         :type="'chart'"
         :title="'图例'"
-        :boxWidth="'150'"
+        :boxWidth="'160'"
         :boxHeight="'180'"
+        :boxBackground="'rgba(255,255,255,0.1)'"
         ><div class="legend-container">
           <div class="left-container">
             <div
@@ -108,7 +115,7 @@
       </MenuCard>
     </div>
     <!-- 右侧菜单列 -->
-    <div id="rightMenus" v-if="$ifMenu('1','')">
+    <div id="rightMenus" v-if="$ifMenu('1', '')">
       <MenuCard
         :type="menus.right[0].type"
         :titleWidth="menus.right[0].titleWidth"
@@ -158,7 +165,13 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
@@ -174,7 +187,7 @@ export default {
     TagCard,
     ChartCard,
     TagTableCard,
-    TopCard
+    TopCard,
   },
   data() {
     return {
@@ -265,6 +278,10 @@ export default {
           break;
       }
     },
+    selectEvent(val) {
+      console.log(val, "current street");
+      this.$refs.mapLoaderRef.setView(streetLocation[val],11);
+    },
   },
   created() {
     // 目录
@@ -347,10 +364,19 @@ export default {
     z-index: 99999;
     color: #fff;
   }
+  .legend-line {
+    position: absolute;
+    left: 20px;
+    bottom: 211px;
+    width: 104px;
+    height: 20px;
+    background: url("../assets/home/legend_line.png") no-repeat center;
+    z-index: 99999;
+  }
   &_bottomLegend {
     position: absolute;
     left: 20px;
-    bottom: 20px;
+    bottom: 30px;
     color: #fff;
     z-index: 99999;
     .legend-container {
@@ -430,9 +456,9 @@ export default {
     .bar-content {
       width: 100%;
       height: 90%;
-      background: rgba(100, 100, 100, 0.3);
+      background: rgba(100, 100, 100, 0);
       .bar {
-        width: 95%;
+        width: 100%;
         height: 98%;
       }
     }