xy-map 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import mapSdk from './map.js'
 
 import {
@@ -110,11 +111,14 @@ const mapEvent = {
   mapHoverHtml
 }
 
+// 地图组件
+import mapMarker from '@/package/mapMarker.vue'
+Vue.component('mapMarker', mapMarker)
 
 export {
   mapSdk,
   mapLayers,
   mapDraw,
   mapTools,
-  mapEvent
+  mapEvent,
 }

package/src/layers/model.js

@@ -94,11 +94,13 @@ export const addLayerModel = (option, layerId) => {
 				scene = new THREE.Scene()
 
 				// 创建灯光
-				opt.directionalLight.forEach((item, index) => {
-					const directionalLight = new THREE.DirectionalLight(item.color, item.opacity)
-					directionalLight.position.set(item.position[0], item.position[1], item.position[2]).normalize()
-					scene.add(directionalLight)
-				})
+				if (opt.directionalLight && opt.directionalLight.length > 0) {
+					opt.directionalLight.forEach(item => {
+						const directionalLight = new THREE.DirectionalLight(item.color, item.opacity)
+						directionalLight.position.set(item.position[0], item.position[1], item.position[2]).normalize()
+						scene.add(directionalLight)
+					})
+				}
 
 				if (opt.ambientLight) {
 					const light = new THREE.AmbientLight(0xffffff, 0.8)

package/src/map.js

@@ -9,6 +9,7 @@ var defaultOptions = {
   pitchWithRotate: true, // 禁止绕x轴旋转 false禁止
   attributionControl: true, // 隐藏地图所属信息
   projection: 'globe',
+  fog: true, // 雾
   style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',
   defaultLanguage: 'zh'
   // style: 'mapbox://styles/mapbox/streets-v9',
@@ -96,8 +97,8 @@ class mapSdk {
     let map = this.map
     map.addSource('mapbox-dem', {
       'type': 'raster-dem',
-      // 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
-      'url': 'mapbox://mapbox.terrain-rgb',
+      'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
+      // 'url': 'mapbox://mapbox.terrain-rgb',
       'tileSize': 512,
       'maxzoom': 14
     })
@@ -111,6 +112,7 @@ class mapSdk {
    * 添加雾
    */
   addFog(night = false) {
+    if (!this.options.fog) return
     let map = this.map
     if (night || this.options.night) {
       // 晚上

package/src/package/mapMarker.vue

@@ -0,0 +1,44 @@
+<template>
+  <div ref="dom">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import mapBoxGl from 'mapbox-gl'
+
+export default {
+  props: {
+    map: {
+      type: Object,
+      default: () => { }
+    },
+    position: {
+      type: Array,
+      default: () => []
+    },
+    drag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {}
+  },
+  watch: {
+    map () {
+      let el = this.$refs.dom
+      const marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(this.map)
+      if (this.drag) {
+        marker.on('dragend', () => {
+          const lngLat = marker.getLngLat()
+          this.$emit('dragEnd', lngLat)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>