map_view_vue2 0.0.2 → 0.0.3

package/README.md

@@ -12,6 +12,14 @@ npm install map_view_vue2 --save
 yarn add map_view_vue2
 ```
 
+```bash
+// main.js
+import MapView from 'map_view_vue2'
+import 'map_view_vue2/map_view_vue2.css'
+Vue.use(MapView)
+
+```
+
 ## 快速上手
 
 完整绑定示例（全部 props 与全部事件）：
@@ -30,9 +38,6 @@ yarn add map_view_vue2
       :height="viewerHeight"
       :map-background="mapBackground"
       :auto-load="autoLoad"
-      @map-added="onMapAdded"
-      @active-map-changed="onActiveMapChanged"
-      @map-removed="onMapRemoved"
       @layer-removed="onLayerRemoved"
       @view-changed="onViewChanged"
       @theme-changed="onThemeChanged" />
@@ -40,37 +45,27 @@ yarn add map_view_vue2
 </template>
 
 <script>
-import mapView from 'map_view_vue2'
-import 'map_view_vue2/map_view_vue2.css'
-
 export default {
-  components: { mapView },
   data () {
     return {
-      theme: 'light',              // light | dark
-      dataCrs: 'EPSG:3857',        // 初始数据坐标系
-      zoom: 4.2,                   // 初始缩放级别
-      hidePanels: false,           // 嵌入模式隐藏两侧面板
-      showLoader: true,            // 显示「加载地图」按钮与对话框
-      viewerWidth: '1000px',       // 查看器宽度：数字按 px，字符串原样使用；null 铺满父容器
-      viewerHeight: '800px',       // 查看器高度：数字按 px，字符串原样使用；null 铺满父容器
-      mapBackground: '#ffffff',    // 地图画布背景色；null 跟随明暗主题默认背景
+      theme: 'light',       // light | dark
+      dataCrs: 'EPSG:3857', // 初始数据坐标系
+      zoom: 4.2,            // 初始缩放级别
+      hidePanels: false,     // 嵌入模式隐藏两侧面板
+      viewerWidth: '1000px',  // 查看器宽度：数字按 px，字符串原样使用；null 铺满父容器
+      viewerHeight: '800px',  // 查看器高度：数字按 px，字符串原样使用；null 铺满父容器
+      mapBackground: '#ffffff', // 地图画布背景色；null 跟随明暗主题默认背景
       autoLoad: {
-        type: 'manifest',          // manifest=矢量清单 / image=PNG 栅格地图
+        type: 'manifest',   // manifest=矢量清单 / image=PNG 栅格地图
         url: 'http://your-server.com/geojson/metadata.json',
         baseUrl: 'http://your-server.com/geojson'
       }
     };
   },
   methods: {
-    // 地图新增：info = { id, name, kind, extent, projection }
-    onMapAdded (info) {},
-    // 活动地图切换：info = { id, name, kind }
-    onActiveMapChanged (info) {},
-    // 地图删除：info = { id, name, kind }
-    onMapRemoved (info) {},
     // 图层删除：info = { isGroup, name, layerCount, group }
     onLayerRemoved ({ isGroup, name, layerCount, group }) {
+      // isGroup :true --- 点击的是图层组的删除， false----点击的是图层组下面的删除
       if (isGroup) {
         console.log('删除了图层组：' + name + '，包含 ' + layerCount + ' 个图层');
       } else {
@@ -85,9 +80,6 @@ export default {
 };
 </script>
 ```
-
-也可以通过 `$refs.viewer` 调用组件方法，例如 `this.$refs.viewer.addXyzLayer({...})`、`this.$refs.viewer.loadImageFromUrl({...})`、`this.$refs.viewer.loadGeoJsonFromFiles(files)`。
-
 ## Props
 
 | Prop | 类型 | 默认值 | 说明 |
@@ -96,7 +88,6 @@ export default {
 | dataCrs | String | 'EPSG:3857' | 初始数据坐标系（EPSG 代码）。 |
 | zoom | Number | 4.2 | 初始缩放级别。 |
 | hidePanels | Boolean | false | 隐藏两侧面板（嵌入模式）。 |
-| showLoader | Boolean | true | 是否显示「加载地图」按钮与加载对话框。 |
 | width | String / Number | null | 固定查看器宽度：数字按 px，字符串原样使用（如 600 → 600px、100% → 100%）。不传则铺满父容器。 |
 | height | String / Number | null | 固定查看器高度：同上（如 800 → 800px、100vh）。不传则铺满父容器。 |
 | mapBackground | String | null | 地图画布背景色（任意 CSS 颜色值）。不传则跟随明暗主题默认背景。 |
@@ -111,8 +102,8 @@ export default {
 ```js
 autoLoad: {
   type: 'manifest',
-  url: 'http://your-server.com/geojson/metadata.json',   // 清单接口地址
-  baseUrl: 'http://your-server.com/geojson'               // 清单内相对文件名的前缀
+  url: 'http://xxx.xxx.xxx.xx:xx/geojson/metadata.json',   // 清单接口地址
+  baseUrl: 'http://xxx.xxx.xxx.xx:xx/geojson'               // 清单内相对文件名的前缀
 }
 ```
 
@@ -125,10 +116,9 @@ autoLoad: {
 ```js
 autoLoad: {
   type: 'image',
-  url: 'http://your-server.com/map/333.png',        // PNG 图片地址
-  worldFile: 'http://your-server.com/map/333.pgw',   // 世界文件地址
-  crs: 'EPSG:3857',                                  // 数据坐标系（世界文件不含坐标系信息，必须指定）
-  name: '矿区底图'                                   // 可选：地图条目显示名称
+  url: 'http://xxx.xxx.xxx.xx:xx/333.png',        // PNG 图片地址
+  worldFile: 'http://xxx.xxx.xxx.xx:xx/333.pgw',   // 世界文件地址
+  name: '矿区底图'                                 // 可选：地图条目显示名称
 }
 ```
 
@@ -156,8 +146,8 @@ import mapView from 'map_view_vue2'
 // autoLoad / 事件载荷等均有完整类型提示
 const autoLoad: import('map_view_vue2').AutoLoadSource = {
   type: 'manifest',
-  url: 'http://your-server.com/geojson/metadata.json',
-  baseUrl: 'http://your-server.com/geojson'
+  url: 'http://xxx.xxx.xxx.xx:xx/geojson/metadata.json',
+  baseUrl: 'http://xxx.xxx.xxx.xx:xx/geojson'
 };
 ```
 

package/index.d.ts

@@ -27,7 +27,7 @@ export interface AutoLoadImage {
   worldFile?: string;
   /** 世界文件文本内容（传入时优先于 worldFile） */
   worldText?: string;
-  /** 数据坐标系：世界文件不含坐标系信息，建议必填（如 'EPSG:3857'） */
+  /** 数据坐标系：世界文件不含坐标系信息；不传时自动按范围猜测中国高斯投影带号，未命中默认按 EPSG:3857 解析 */
   crs?: string;
   /** 地图条目显示名称 */
   name?: string;
@@ -135,4 +135,4 @@ export interface MapViewProps {
  */
 declare const MapView: Vue.ComponentOptions<Vue> & MapViewProps;
 
-export default MapView;
+export default MapView;