xy-map 1.0.8 → 1.0.10

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "xy-map",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {
     "dev": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "pub": "npm publish"
   },
   "dependencies": {
     "@turf/turf": "^6.5.0",

package/src/layers/Point.js

@@ -4,6 +4,9 @@ import {
   hasLayer,
   setSource
 } from './index'
+import {
+  addLayerText
+} from './Text'
 import {
   mapClick
 } from '../util/mapEvent'
@@ -77,6 +80,11 @@ export const addLayerPoint = (option, layerId) => { // 点
   if (opt.click) {
     mapClick(id, opt.click)
   }
+
+  // 添加文本图层
+  if (opt.text && opt.text.show) {
+    addLayerText('point', opt)
+  }
 }
 
 /**
@@ -248,4 +256,4 @@ export const clusterLayer = (option, style) => {
   mapClick(id + 'clusters', (e) => {
     mapSdk.zoom('in', e.position)
   })
-}
+}

package/src/map.js

@@ -80,7 +80,8 @@ class mapSdk {
    * 地图平移到某个点
    */
   easeTo(position, duration = 1000) {
-    this.map.easeTo({
+    let map = this.map
+    map.easeTo({
       center: position,
       duration
     })
@@ -320,10 +321,12 @@ class mapSdk {
   zoom(type, center = '') {
     const maxZoom = this.options.maxZoom || 18
     const minZoom = this.options.minZoom || 6
-    let zoom = this.map.getZoom()
+    let map = this.map
+    let zoom = map.getZoom()
     if (!center) {
-      center = this.map.getCenter()
+      center = map.getCenter()
     }
+    console.log(center)
     if (type === 'in') {
       // 点击+
       if (zoom < maxZoom) {
@@ -334,7 +337,7 @@ class mapSdk {
         zoom -= 1
       }
     }
-    this.map.flyTo({
+    this.flyTo({
       center,
       zoom
     })

package/src/router/index.js

@@ -2,12 +2,6 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import layout from '../views/layout/index.vue'
-import home from '../views/home.vue'
-import document from '../views/document/index.vue'
-
-import init from '../views/demo/init.vue'
-import flyTo from '../views/demo/flyTo.vue'
-import tools from '../views/demo/tools.vue'
 
 Vue.use(VueRouter)
 
@@ -17,7 +11,7 @@ const routes = [{
     children: [{
       path: '',
       name: '首页',
-      component: home,
+      component: () => import('@/views/home.vue'),
     }]
   },
   {
@@ -26,17 +20,22 @@ const routes = [{
     children: [{
         path: 'init',
         name: '初始化',
-        component: init,
+        component: () => import('@/views/demo/init.vue'),
       },
       {
         path: 'flyTo',
         name: '飞入到指定地点',
-        component: flyTo,
+        component: () => import('@/views/demo/flyTo.vue'),
       },
       {
         path: 'tools',
         name: '获取摄像机位置',
-        component: tools,
+        component: () => import('@/views/demo/tools.vue'),
+      },
+      {
+        path: 'points',
+        name: '点',
+        component: () => import('@/views/demo/points.vue'),
       },
     ]
   },
@@ -46,7 +45,7 @@ const routes = [{
     children: [{
       path: 'index',
       name: '文档',
-      component: document,
+      component: () => import('@/views/document/index.vue'),
     }]
   }
 ]

package/src/views/demo/flyTo.vue

@@ -17,7 +17,9 @@ export default {
         container: 'map',
         zoom: 2,
         minZoom: 2,
-        center: [102.83643451528434, 24.81972792178513]
+        center: [102.83643451528434, 24.81972792178513],
+        pitch: 0,
+        bearing: 0
       },
       view3D: true
     }

package/src/views/demo/init.vue

@@ -3,19 +3,13 @@
        ref="full_el">
     <div id="map"
          class="full-height"></div>
-
-    <show-code title="初始化地图"></show-code>
   </div>
 </template>
 
 <script>
 import { mapSdk } from '@/index.js'
-import showCode from './components/showCode.vue'
 
 export default {
-  components: {
-    showCode
-  },
   data () {
     return {
       config: {
@@ -24,6 +18,8 @@ export default {
         zoom: 2,
         minZoom: 2,
         center: [102.83643451528434, 24.81972792178513],
+        pitch: 0,
+        bearing: 0
       },
       view3D: true
     }
@@ -35,7 +31,6 @@ export default {
     init () {
       mapSdk.initMap(this.config).then(map => {
         this.map = map
-        console.log(map)
       })
     }
   }

package/src/views/demo/points.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="full-height relative overflow">
+    <div id="map"
+         class="full-height"></div>
+  </div>
+</template>
+
+<script>
+import { mapSdk, mapDraw, mapTools } from '@/index.js'
+
+const { addLayerPoint, addLayerImagePoint } = mapDraw
+const { toGeoJson } = mapTools
+
+
+export default {
+  data () {
+    return {
+      config: {
+        accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
+        container: 'map',
+        center: [131.05098966709647, 45.805820772845436],
+        pitch: 62,
+        zoom: 12,
+        bearing: 15.6,
+      },
+      view3D: true,
+      data: [
+        { id: 1, name: '测试点1', lnglat: [131.1515798484043, 45.85405632167139] },
+        { id: 2, name: '测试点2', lnglat: [131.04196826087988, 45.85512848048487] }
+      ]
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      mapSdk.initMap(this.config).then(map => {
+        this.map = map
+
+        this.getPoint2()
+      })
+    },
+    getPoint2 () {
+      let data = toGeoJson(this.data, 'Point', 'lnglat')
+      addLayerPoint({
+        id: 'point2',
+        data: data,
+        text: {
+          show: true,
+          layout: {
+            'text-field': '{name}',
+            'text-offset': [0, 1.2]
+          }
+        },
+        click: (e) => {
+          console.log(e)
+          // 添加弹窗
+          mapSdk.addPopup(e.position, '<div>point</div>')
+
+          // 平移到该坐标
+          mapSdk.easeTo(e.position)
+        }
+      })
+    }
+  }
+}
+</script>

package/src/views/demo/tools.vue

@@ -6,13 +6,18 @@
 
     <!-- 工具 -->
     <div class="tools flex">
-      <button @click="getCamera">获取摄像机</button>
-      <button @click="getLayer">获取所有图层</button>
+      <button @click="flyHome(2000)">默认视角</button>
 
       <button @click="view2D"
               v-if="view3D">2D视角</button>
       <button @click="flyHome(2000)"
               v-else>3D视角</button>
+
+      <button @click="zoom('in')">放大</button>
+      <button @click="zoom('out')">缩小</button>
+
+      <button @click="getCamera">获取摄像机</button>
+      <button @click="getLayer">获取所有图层</button>
     </div>
   </div>
 </template>
@@ -26,7 +31,7 @@ export default {
   data () {
     return {
       config: {
-        accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2t4NzAxZzdvMDZ5MTJ2azN0NzBqZGt0bCJ9.cRDXTquac05DVKJ5wc854w',
+        accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
         container: 'map',
         zoom: 11.2,
         minZoom: 2,
@@ -41,15 +46,17 @@ export default {
     this.init()
   },
   methods: {
+    // 初始化
     init () {
       mapSdk.initMap(this.config).then(map => {
         this.map = map
       })
     },
-    getCamera () {
-      this.$message.info('请按【F12】打开控制台查看')
-      mapSdk.getCamera()
+    // 放大/缩小
+    zoom (type) {
+      mapSdk.zoom(type)
     },
+    // 2D视角
     view2D () {
       this.view3D = false
       mapSdk.flyTo({
@@ -63,6 +70,7 @@ export default {
         mapSdk.pitchWithRotate(false) // 禁用旋转视角
       })
     },
+    // 默认视角
     flyHome (duration = 3000) {
       return new Promise((resolve) => {
         this.view3D = true
@@ -78,6 +86,12 @@ export default {
         })
       })
     },
+    // 获取摄像机
+    getCamera () {
+      this.$message.info('请按【F12】打开控制台查看')
+      mapSdk.getCamera()
+    },
+    // 获取所有图层
     getLayer () {
       this.$message.info('请按【F12】打开控制台查看')
       console.log(getLayerAll())
@@ -90,7 +104,7 @@ export default {
 <style lang="scss" scoped>
 .tools {
   position: absolute;
-  right: 10px;
+  right: 0;
   top: 0;
   margin: 10px;
 

package/src/views/layout/menu.vue

@@ -62,6 +62,11 @@ export default {
               id: '2-3',
               name: '地图工具',
               link: '/demo/tools',
+            },
+            {
+              id: '2-4',
+              name: '点',
+              link: '/demo/points',
             }
           ]
         }

package/src/views/demo/components/showCode.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="code">
-    <el-button @click="show = !show">查看代码</el-button>
-
-    <el-drawer :title="title"
-               :with-header="false"
-               :visible.sync="show"
-               direction="rtl">
-      <div class="code-header flex flex-justify-between border-bottom">
-        <b class="font-15">{{title}}</b>
-        <i class="el-icon-close pointer"
-           title="关闭"
-           @click="show = false"></i>
-      </div>
-      <div>{{code}}</div>
-    </el-drawer>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '查看'
-    },
-    code: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      show: false,
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.code {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  margin: 15px;
-
-  .code-header {
-    padding: 15px;
-  }
-}
-</style>