vue2-openlayers 0.1.4 → 0.1.6

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "vue2-openlayers",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
+  "author": "ifyang",
+  "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -15,7 +17,8 @@
     "@turf/turf": "^7.0.0",
     "core-js": "^3.8.3",
     "ol": "^9.2.4",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.7.16"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -23,15 +26,14 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "echarts": "4.9.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "postcss-pxtorem": "^6.1.0",
-    "vue-template-compiler": "^2.6.14",
-    "vuepress": "^1.9.10",
-    "echarts": "4.9.0",
     "px2rem-loader": "^0.1.9",
     "sass": "^1.43.4",
-    "sass-loader": "^14.2.1"
+    "sass-loader": "^14.2.1",
+    "vuepress": "^1.9.10"
   },
   "eslintConfig": {
     "root": true,

package/vue2-openlayers.common.js

@@ -5887,12 +5887,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/YlMap.vue?vue&type=template&id=d8c9bfda&scoped=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/YlMap.vue?vue&type=template&id=dd63274a&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
-    staticClass: "wapper"
+    staticClass: "yl-map-wapper"
   }, [_c('div', {
     ref: _vm.mapId,
     staticStyle: {
@@ -5902,12 +5902,7 @@ var render = function render() {
     attrs: {
       "id": _vm.mapId
     }
-  }, [_vm._t("yl-map-layers"), _c('div', {
-    staticClass: "ol-popup",
-    attrs: {
-      "id": "popup"
-    }
-  }, [_vm._t("yl-map-overlay")], 2)], 2)]);
+  }, [_vm._t("default")], 2)]);
 };
 var staticRenderFns = [];
 
@@ -42600,20 +42595,9 @@ class Overlay extends ol_Object {
 /* harmony default export */ var YlMapvue_type_script_lang_js = ({
   name: "YlMap",
   props: {
-    baseMap: {
-      type: Object,
-      default: function () {
-        // openlayers叠加mapbox自定义底图
-        let accessToken = 'pk.eyJ1IjoiZ2FwNDE3IiwiYSI6ImNseTlsc2J3ZDBvZGwybHNhanhnbWRibTMifQ.QSQ15RREYt2jYX79hNeMnA';
-        let mapBoxStyleId = 'clybcf4b900dp01pf94zj0mbh';
-        let mapboxUserName = 'gap417';
-        return new layer_Tile({
-          source: new source_XYZ({
-            url: `https://api.mapbox.com/styles/v1/${mapboxUserName}/${mapBoxStyleId}/tiles/256/{z}/{x}/{y}?access_token=${accessToken}`
-          }),
-          name: "底图"
-        });
-      }
+    mapUrl: {
+      type: String,
+      default: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
     },
     center: {
       type: Array,
@@ -42648,28 +42632,28 @@ class Overlay extends ol_Object {
   methods: {
     //弹窗
     showPopup(parms) {
-      // parms.element = document.getElementById('popup');
-      console.info(parms);
-      //弹窗显示方法
-      this.overlay = new ol_Overlay({
-        element: document.getElementById('popup'),
-        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
-        autoPan: parms.duration != null ? true : false,
-        autoPanAnimation: {
-          duration: parms.duration
-        },
-        offset: [5, -25],
-        // 偏移量
-        positioning: "bottom-center",
-        // 对齐方式
-        coordinate: [104.06, 30.67],
-        // 位置
-        ...parms
-      });
-      //设置overlay的显示位置
-      this.overlay.setPosition(parms.position);
-      //显示overlay
-      this.map.addOverlay(this.overlay);
+      if (parms && parms.element) {
+        //弹窗显示方法
+        this.overlay = new ol_Overlay({
+          element: document.getElementById('popup'),
+          //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
+          autoPan: parms.duration != null ? true : false,
+          autoPanAnimation: {
+            duration: parms.duration
+          },
+          offset: [5, -25],
+          // 偏移量
+          positioning: "bottom-center",
+          // 对齐方式
+          coordinate: [104.06, 30.67],
+          // 位置
+          ...parms
+        });
+        //设置overlay的显示位置
+        this.overlay.setPosition(parms.position);
+        //显示overlay
+        this.map.addOverlay(this.overlay);
+      }
     },
     close() {
       //弹窗关闭方法（防止外部调用此方法——所以先要判断是否为空）
@@ -42696,19 +42680,48 @@ class Overlay extends ol_Object {
         box3 = Math.max.apply(null, box3s);
         box4 = Math.max.apply(null, box4s);
         let view = this.map.getView();
-        //   let size = this.map.getSize();
+        // let size = this.map.getSize();
         let mzoom = view.getZoom();
         let coorBox = [box1, box2, box3, box4];
         //fit()其它属性无效--暂定解决方案   animate
         view.fit(coorBox);
         if (state) {
           view.animate({
-            zoom: zoom == undefined ? mzoom : zoom,
-            duration: duration == undefined ? 1000 : duration
+            zoom: zoom ? mzoom : zoom,
+            duration: duration ? 1000 : duration
           });
         }
       }
     },
+    fitViewSource(source) {
+      let view = this.map.getView();
+      var feature = source.getFeatures()[0];
+      var polygon = feature.getGeometry();
+      view.fit(polygon, {
+        padding: [50, 50, 50, 150]
+      });
+    },
+    fitViewfeature(feature) {
+      let view = this.map.getView();
+      var polygon = feature.getGeometry();
+      view.fit(polygon, {
+        padding: [300, 300, 300, 150]
+      });
+    },
+    fitCenter(center, zoom, duration = 700) {
+      let view = this.map.getView();
+      let mzoom = view.getZoom();
+      function flyTo(location) {
+        view.animate({
+          center: location,
+          duration: duration,
+          zoom: mzoom ? mzoom : zoom
+        });
+      }
+      if (center[0] && center[1]) {
+        flyTo(center);
+      }
+    },
     CustomEvent() {
       let _this = this;
       class Drag extends Pointer {
@@ -42764,9 +42777,16 @@ class Overlay extends ol_Object {
           //点击后执行的事件
           function clickEvent() {
             // 点击回调事件
-            _this.$emit("handleDownEvent", evt.coordinate, feature.values_._md_ == undefined ? feature.values_ : feature.values_._md_, feature);
+            _this.$emit("handleDownFeatureEvent", {
+              evtCoordinate: evt.coordinate,
+              value: feature.values_._md_ == undefined ? feature.values_ : feature.values_._md_,
+              feature: feature,
+              evt: evt,
+              featureCoordinate: feature.getGeometry().getCoordinates()
+            });
           }
         });
+        _this.$emit("handleDownEvent", evt);
       }
 
       /**
@@ -42816,12 +42836,12 @@ class Overlay extends ol_Object {
     }
   },
   created() {
-    console.info("map-created");
+    // console.info("map-created");
     this.mapId = "map" + new Date().getTime();
   },
   mounted() {
     let CustomEvent = this.CustomEvent();
-    console.info("地图组件挂载,id:" + this.mapId);
+    // console.info("地图组件挂载,id:" + this.mapId);
     let view = new ol_View({
       center: this.center,
       projection: "EPSG:4326",
@@ -42833,14 +42853,19 @@ class Overlay extends ol_Object {
     const map = new ol_Map({
       interactions: defaults_defaults().extend([new CustomEvent()]),
       target: this.$refs[this.mapId],
-      layers: [this.baseMap],
+      layers: [new layer_Tile({
+        source: new source_XYZ({
+          url: this.mapUrl
+        }),
+        name: "底图"
+      })],
       view: view
     });
     this.map = map;
     // this.$bus.$emit(this.mapId + "ready", {});
   },
   beforeDestroy() {
-    console.info("map-beforeDestroy");
+    // console.info("map-beforeDestroy");
     if (this.map) {
       this.map.setTarget(null);
       this.map = null;
@@ -42849,10 +42874,10 @@ class Overlay extends ol_Object {
 });
 ;// CONCATENATED MODULE: ./packages/yl-map/YlMap.vue?vue&type=script&lang=js
  /* harmony default export */ var yl_map_YlMapvue_type_script_lang_js = (YlMapvue_type_script_lang_js); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/YlMap.vue?vue&type=style&index=0&id=d8c9bfda&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/YlMap.vue?vue&type=style&index=0&id=dd63274a&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./packages/yl-map/YlMap.vue?vue&type=style&index=0&id=d8c9bfda&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./packages/yl-map/YlMap.vue?vue&type=style&index=0&id=dd63274a&prod&scoped=true&lang=css
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -42967,7 +42992,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "d8c9bfda",
+  "dd63274a",
   null
   
 )
@@ -42979,13 +43004,13 @@ YlMap.install = function (Vue) {
   Vue.component(YlMap.name, YlMap);
 };
 /* harmony default export */ var yl_map = (YlMap);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-line/YlLine.vue?vue&type=template&id=015841aa&scoped=true
-var YlLinevue_type_template_id_015841aa_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-line/YlLine.vue?vue&type=template&id=a3ffcf04&scoped=true
+var YlLinevue_type_template_id_a3ffcf04_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div');
 };
-var YlLinevue_type_template_id_015841aa_scoped_true_staticRenderFns = [];
+var YlLinevue_type_template_id_a3ffcf04_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/ol/structs/RBush.js
 /**
@@ -53377,7 +53402,7 @@ function localConvert(list, lngName, latName, usePR) {
         lng: n[lngName]
       };
     });
-    console.info('批量坐标转换数量:' + locations.length);
+    // console.info('批量坐标转换数量:'+locations.length);
     let results = batchGps2gd(locations);
     if (usePR) {
       for (let i = 0; i < results.length; i++) {
@@ -53391,7 +53416,7 @@ function localConvert(list, lngName, latName, usePR) {
       }
     }
   } else if (list instanceof Object && list != null && list != undefined) {
-    console.info('转换坐标1个');
+    // console.info('转换坐标1个');
     let res = gps2gd(list[latName], list[lngName]);
     if (usePR) {
       list.P = res.lat;
@@ -53541,7 +53566,7 @@ function gpsToGd(wgLon, wgLat) {
     setLineStyle(info) {
       // 优化 方法调用 多次调用问题
       let style = this.lineFun(info);
-      if (style && style.color && style.width) {
+      if (style) {
         let lintStyle = new style_Style({
           stroke: new style_Stroke({
             //地图连线的样式
@@ -53602,9 +53627,9 @@ function gpsToGd(wgLon, wgLat) {
     // todo  事件监听  优化
     // 任务调度
     // 兼容 vue3没有bus
-    this.$bus.$on(this.$parent.mapId + "ready", () => {
-      this.initData();
-    });
+    // this.$bus.$on(this.$parent.mapId + "ready", () => {
+    //   this.initData();
+    // });
   },
   beforeMount() {},
   mounted() {},
@@ -53624,11 +53649,11 @@ function gpsToGd(wgLon, wgLat) {
 ;
 var YlLine_component = normalizeComponent(
   yl_line_YlLinevue_type_script_lang_js,
-  YlLinevue_type_template_id_015841aa_scoped_true_render,
-  YlLinevue_type_template_id_015841aa_scoped_true_staticRenderFns,
+  YlLinevue_type_template_id_a3ffcf04_scoped_true_render,
+  YlLinevue_type_template_id_a3ffcf04_scoped_true_staticRenderFns,
   false,
   null,
-  "015841aa",
+  "a3ffcf04",
   null
   
 )
@@ -54059,13 +54084,13 @@ YlPoint.install = function (Vue) {
   Vue.component(YlPoint.name, YlPoint);
 };
 /* harmony default export */ var yl_point = (YlPoint);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-fiy-line/YlFiyLine.vue?vue&type=template&id=4ee1c066&scoped=true
-var YlFiyLinevue_type_template_id_4ee1c066_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-fiy-line/YlFiyLine.vue?vue&type=template&id=568a88e4&scoped=true
+var YlFiyLinevue_type_template_id_568a88e4_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div');
 };
-var YlFiyLinevue_type_template_id_4ee1c066_scoped_true_staticRenderFns = [];
+var YlFiyLinevue_type_template_id_568a88e4_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/ol/geom/MultiPoint.js
 /**
@@ -58388,18 +58413,18 @@ var turf_length_default = (/* unused pure expression or super */ null && (esm_le
   },
   beforeCreate() {},
   created() {
-    this.$bus.$on(this.$parent.mapId + "ready", () => {
-      if (this.map == null) {
-        this.map = this.$parent.map;
-      }
-      if (this.mapLayers.length > 0) {
-        for (let i in this.mapLayers) {
-          this.map.removeLayer(this.mapLayers[i]);
-        }
-        this.mapLayers = [];
-      }
-      this.addPointLayer();
-    });
+    // this.$bus.$on(this.$parent.mapId + "ready", () => {
+    //   if (this.map == null) {
+    //     this.map = this.$parent.map;
+    //   }
+    //   if (this.mapLayers.length > 0) {
+    //     for (let i in this.mapLayers) {
+    //       this.map.removeLayer(this.mapLayers[i]);
+    //     }
+    //     this.mapLayers = [];
+    //   }
+    //   this.addPointLayer();
+    // });
   },
   beforeMount() {},
   mounted() {},
@@ -58420,11 +58445,11 @@ var turf_length_default = (/* unused pure expression or super */ null && (esm_le
 ;
 var YlFiyLine_component = normalizeComponent(
   yl_fiy_line_YlFiyLinevue_type_script_lang_js,
-  YlFiyLinevue_type_template_id_4ee1c066_scoped_true_render,
-  YlFiyLinevue_type_template_id_4ee1c066_scoped_true_staticRenderFns,
+  YlFiyLinevue_type_template_id_568a88e4_scoped_true_render,
+  YlFiyLinevue_type_template_id_568a88e4_scoped_true_staticRenderFns,
   false,
   null,
-  "4ee1c066",
+  "568a88e4",
   null
   
 )
@@ -58436,13 +58461,13 @@ YlFiyLine.install = function (Vue) {
   Vue.component(YlFiyLine.name, YlFiyLine);
 };
 /* harmony default export */ var yl_fiy_line = (YlFiyLine);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=template&id=365d966c&scoped=true
-var YlGeoJsonvue_type_template_id_365d966c_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=template&id=26b6c6d8&scoped=true
+var YlGeoJsonvue_type_template_id_26b6c6d8_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div');
 };
-var YlGeoJsonvue_type_template_id_365d966c_scoped_true_staticRenderFns = [];
+var YlGeoJsonvue_type_template_id_26b6c6d8_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=script&lang=js
 /**
@@ -58558,9 +58583,9 @@ var YlGeoJsonvue_type_template_id_365d966c_scoped_true_staticRenderFns = [];
   },
   beforeCreate() {},
   created() {
-    this.$bus.$on(this.$parent.mapId + "ready", () => {
-      this.initData();
-    });
+    // this.$bus.$on(this.$parent.mapId + "ready", () => {
+    //   this.initData();
+    // });
   },
   beforeMount() {},
   mounted() {},
@@ -58570,10 +58595,10 @@ var YlGeoJsonvue_type_template_id_365d966c_scoped_true_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=script&lang=js
  /* harmony default export */ var yl_geo_json_YlGeoJsonvue_type_script_lang_js = (YlGeoJsonvue_type_script_lang_js); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=style&index=0&id=365d966c&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=style&index=0&id=26b6c6d8&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=style&index=0&id=365d966c&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./packages/yl-map/yl-geo-json/YlGeoJson.vue?vue&type=style&index=0&id=26b6c6d8&prod&scoped=true&lang=css
 
 ;// CONCATENATED MODULE: ./packages/yl-map/yl-geo-json/YlGeoJson.vue
 
@@ -58586,11 +58611,11 @@ var YlGeoJsonvue_type_template_id_365d966c_scoped_true_staticRenderFns = [];
 
 var YlGeoJson_component = normalizeComponent(
   yl_geo_json_YlGeoJsonvue_type_script_lang_js,
-  YlGeoJsonvue_type_template_id_365d966c_scoped_true_render,
-  YlGeoJsonvue_type_template_id_365d966c_scoped_true_staticRenderFns,
+  YlGeoJsonvue_type_template_id_26b6c6d8_scoped_true_render,
+  YlGeoJsonvue_type_template_id_26b6c6d8_scoped_true_staticRenderFns,
   false,
   null,
-  "365d966c",
+  "26b6c6d8",
   null
   
 )