vue2-tmap/dist/vue-tmap.umd.js

基于腾讯地图 JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库

(function(d,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],n):(d=typeof globalThis!="undefined"?globalThis:d||self,n(d["vue-tmap"]={},d.vueDemi))})(this,function(d,n){"use strict";var K=Object.defineProperty,H=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var B=(d,n,y)=>n in d?K(d,n,{enumerable:!0,configurable:!0,writable:!0,value:y}):d[n]=y,g=(d,n)=>{for(var y in n||(n={}))Y.call(n,y)&&B(d,y,n[y]);if(G)for(var y of G(n))Q.call(n,y)&&B(d,y,n[y]);return d},p=(d,n)=>H(d,J(n));function y(e,a,r){const l=["visualization","tools","geometry",...r||[]];return new Promise(s=>{if(window.TMap){s(window.TMap);return}window.tmapCallback=function(){s(window.TMap)},window.__POWERED_BY_QIANKUN__&&top&&(top.tmapCallback=function(){s(TMap)});const o=document.createElement("script");o.type="text/javascript",o.src=`https://map.qq.com/api/gljs?v=${e}&key=${a}&libraries=${l.join(",")}&callback=tmapCallback`,document.body.appendChild(o)})}function M(e,a,r,l){if(!r){e.removeControl(a);return}const s=e.getControl(a),{position:o,className:t}=r;l[o]&&s.setPosition(l[o]),s.setClassName(t)}var C=n.defineComponent({name:"tmap-map",props:{version:{type:String,default:"1.exp"},mapKey:{type:String,default:""},libraries:{type:Array,default:()=>[]},class:{type:String,default:""},style:{type:Object,default:()=>({})},center:{type:Object,default:()=>({lat:40.040452,lng:116.273486})},zoom:{type:Number,default:17},minZoom:{type:Number,default:3},maxZoom:{type:Number,default:20},rotation:{type:Number,default:0},pitch:{type:Number,default:0},scale:{type:Number,default:1},offset:{type:Object,default:()=>({x:0,y:0})},draggable:{type:Boolean,default:!0},scrollable:{type:Boolean,default:!0},doubleClickZoom:{type:Boolean,default:!0},boundary:{type:Object,default:null},mapStyleId:{type:String},baseMap:{type:Object},viewMode:{type:String,default:"3D"},control:{type:Object,default:()=>({scale:{},zoom:{},rotation:{}})},events:{type:Object,default:()=>({})}},setup(e){const a=n.ref(null),r=n.ref(null);let l,s;const o=[];return Object.keys(e.events).forEach(t=>{o.push(t)}),n.onMounted(async()=>{await y(e.version,e.mapKey,e.libraries),s={topLeft:TMap.constants.CONTROL_POSITION.TOP_LEFT,topCenter:TMap.constants.CONTROL_POSITION.TOP_CENTER,topRight:TMap.constants.CONTROL_POSITION.TOP_RIGHT,centerLeft:TMap.constants.CONTROL_POSITION.CENTER_LEFT,center:TMap.constants.CONTROL_POSITION.CENTER,centerRight:TMap.constants.CONTROL_POSITION.CENTER_RIGHT,bottomLeft:TMap.constants.CONTROL_POSITION.BOTTOM_LEFT,bottomCenter:TMap.constants.CONTROL_POSITION.BOTTOM_CENTER,bottomRight:TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT};const t=new TMap.LatLng(e.center.lat,e.center.lng);a.value&&(l=new TMap.Map(a.value,{center:t,zoom:e.zoom,minZoom:e.minZoom,maxZoom:e.maxZoom,rotation:e.rotation,pitch:e.pitch,scale:e.scale,offset:e.offset,draggable:e.draggable,scrollable:e.scrollable,doubleClickZoom:e.doubleClickZoom,boundary:e.boundary,mapStyleId:e.mapStyleId,baseMap:e.baseMap,viewMode:e.viewMode,showControl:!0}),M(l,TMap.constants.DEFAULT_CONTROL_ID.SCALE,e.control.scale,s),M(l,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,e.control.zoom,s),M(l,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,e.control.rotation,s),o.forEach(i=>{l.on(i,e.events[i])}),r.value=l)}),n.onUnmounted(()=>{l&&(o.forEach(t=>{l.off(t,e.events[t])}),l.destroy())}),n.watch(()=>[e.center,e.zoom,e.rotation,e.pitch],([t,i,c,u])=>{l&&l.easeTo({center:new TMap.LatLng(t.lat,t.lng),zoom:i,rotation:c,pitch:u},{duration:500})}),n.watch(()=>e.scale,t=>l&&l.setScale(t)),n.watch(()=>e.offset,t=>l&&l.setOffset(t)),n.watch(()=>e.draggable,t=>l&&l.setDraggable(t)),n.watch(()=>e.scrollable,t=>l&&l.setScrollable(t)),n.watch(()=>e.doubleClickZoom,t=>l&&l.setDoubleClickZoom(t)),n.watch(()=>e.boundary,t=>l&&l.setBoundary(t)),n.watch(()=>e.control,t=>{M(l,TMap.constants.DEFAULT_CONTROL_ID.SCALE,t.scale,s),M(l,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,t.zoom,s),M(l,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,t.rotation,s)}),n.provide("map",r),{map:r,el:a,getCenter:()=>l==null?void 0:l.getCenter(),getZoom:()=>l==null?void 0:l.getZoom()}},render(){const e=n.isVue3?this.$slots:this.$scopedSlots;return n.h("div",{class:this.class,style:p(g({},this.style),{height:"100%",width:"100%"}),ref:"el"},e.default&&this.map?e.default():[])}});function O(e,a,r){const l=[],s=[];Object.keys(a).forEach(o=>{if(o.indexOf("on")===0){const t=o[2].toLowerCase()+o.slice(3);l.push(t),s.push(r.bind(null,t))}}),l.forEach((o,t)=>{e.on(o,s[t])}),n.onUnmounted(()=>{l.forEach((o,t)=>{e.off(o,s[t])})})}function f(e,a){const r=e.getLayer(a);r&&r.setMap(null);const l=e.getLayer(`${a}_border_line`);l&&l.setMap(null);const s=e.getLayer(`${a}_border`);s&&s.setMap(null)}function S(e){const a={};return Object.keys(e).forEach(r=>{a[r]=new TMap.MarkerStyle(e[r])}),a}function b(e){return e.map(a=>p(g({},a),{position:new TMap.LatLng(a.position.lat,a.position.lng)}))}var I=n.defineComponent({name:"tmap-multi-marker",props:{id:{type:String,default:"default"},styles:{type:Object,required:!0},geometries:{type:Array,required:!0}},setup(e,{attrs:a,emit:r}){const l=n.inject("map");if(!l)return{};const s=n.toRaw(l.value);f(s,e.id);const o=new TMap.MultiMarker({id:e.id,map:s,styles:S(e.styles),geometries:b(e.geometries)});return O(o,a,r),n.watch(()=>e.styles,t=>{o.setStyles(S(t))}),n.watch(()=>e.geometries,t=>{o.setGeometries(b(t))}),n.onUnmounted(()=>{o.setMap(null)}),{getStyles:o.getStyles,moveAlong:o.moveAlong.bind(o),stopMove:o.stopMove.bind(o),pauseMove:o.pauseMove.bind(o),resumeMove:o.resumeMove.bind(o),on:o.on.bind(o)}},render(){return null}}),L=n.defineComponent({name:"tmap-marker-cluster",props:{id:{type:String,default:"default"},enableDefaultStyle:{type:Boolean,default:!0},minimumClusterSize:{type:Number,default:2},geometries:{type:Array,required:!0},zoomOnClick:{type:Boolean,default:!0},gridSize:{type:Number,default:60},averageCenter:{type:Boolean,default:!1},maxZoom:{type:Number,default:20}},setup(e){const a=n.inject("map");if(!a)return{};const r=new TMap.MarkerCluster({id:e.id,map:n.toRaw(a.value),enableDefaultStyle:e.enableDefaultStyle,minimumClusterSize:e.minimumClusterSize,geometries:b(e.geometries),zoomOnClick:e.zoomOnClick,gridSize:e.gridSize,averageCenter:e.averageCenter,maxZoom:e.maxZoom});return n.watch(()=>e.geometries,l=>{r.setGeometries(b(l))}),{}},render(){return null}});function N(e){const a={};return Object.keys(e).forEach(r=>{a[r]=new TMap.PolylineStyle(e[r])}),a}function R(e){return e.map(a=>p(g({},a),{paths:a.paths.map(r=>new TMap.LatLng(r.lat,r.lng))}))}var _=n.defineComponent({name:"tmap-multi-polyline",props:{id:{type:String,default:"default"},zIndex:{type:Number,default:1},styles:{type:Object,required:!0},geometries:{type:Array,required:!0}},setup(e,{attrs:a,emit:r}){const l=n.inject("map");if(!l)return{};const s=n.toRaw(l.value);f(s,e.id);const o=new TMap.MultiPolyline({id:e.id,map:s,zIndex:e.zIndex,styles:N(e.styles),geometries:R(e.geometries)});return O(o,a,r),n.watch(()=>e.zIndex,t=>{o.setZIndex(t)}),n.watch(()=>e.styles,t=>{o.setStyles(N(t))}),n.watch(()=>e.geometries,t=>{o.setGeometries(R(t))}),n.onUnmounted(()=>{o.setMap(null)}),{}},render(){return null}});function U(e,a){return e.reduce((r,l)=>{const s=l[a];return r[s]=l,r},{})}function V(e,a){var r,l;if(e.id!==a.id||e.styleId!==a.styleId||e.rank!==a.rank)return!1;if(e.paths.length===a.paths.length){if(JSON.stringify(e.paths)!==JSON.stringify(a.paths))return!1}else return!1;if(e.properties!==void 0&&a.properties!==void 0){const s=Object.keys(e.properties||{}),o=Object.keys(a.properties||{});if(s.length!==o.length)return!1;for(let t=s.length-1;t>=0;t-=1){const i=s[t];if(((r=e.properties)==null?void 0:r[i])!==((l=a.properties)==null?void 0:l[i]))return!1}}else if(e.properties!==a.properties)return!1;return!0}function h(e){const a={};return Object.keys(e).forEach(r=>{a[r]=new TMap.PolygonStyle(e[r])}),a}function w(e){return e.map(a=>p(g({},a),{paths:a.paths.map(r=>new TMap.LatLng(r.lat,r.lng))}))}var E=n.defineComponent({name:"tmap-multi-polygon",props:{id:{type:String,default:"default"},zIndex:{type:Number,default:1},styles:{type:Object,required:!0},geometries:{type:Array,required:!0}},setup(e,{attrs:a,emit:r}){const l=n.inject("map");if(!l)return{};const s=n.toRaw(l.value);let o=e.geometries;f(s,e.id);const t=new TMap.MultiPolygon({id:e.id,map:s,zIndex:e.zIndex,styles:h(e.styles),geometries:w(o)});return O(t,a,r),n.watch(()=>e.zIndex,i=>{t.setZIndex(i)}),n.watch(()=>e.styles,i=>{t.setStyles(h(i))}),n.watch(()=>e.geometries,i=>{const c=U(o,"id"),u=new Set(Object.keys(c)),T=[];i.forEach(m=>{c[m.id]?(u.delete(m.id),V(c[m.id],m)||T.push(m)):T.push(m)}),o=i,u.size>0&&t.remove([...u]),T.length>0&&t.updateGeometries(w(i))}),n.provide("geometry",t),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return this.$slots.default?this.$slots.default():null}});function j(e){const a={};return Object.keys(e).forEach(r=>{a[r]=new TMap.LabelStyle(e[r])}),a}var k=n.defineComponent({name:"tmap-multi-label",props:{id:{type:String,default:"default"},styles:{type:Object,required:!0},geometries:{type:Array,required:!0},enableCollision:{type:Boolean,required:!1,default:!1}},setup(e,{attrs:a,emit:r}){const l=n.inject("map");if(!l)return{};const s=n.toRaw(l.value);f(s,e.id);const o=i=>i.map(c=>p(g({},c),{position:new TMap.LatLng(c.position.lat,c.position.lng)})),t=new TMap.MultiLabel({id:e.id,map:n.toRaw(l.value),styles:j(e.styles),geometries:o(e.geometries),enableCollision:e.enableCollision});return O(t,a,r),n.watch(()=>e.styles,i=>{t.setStyles(j(i))}),n.watch(()=>e.geometries,i=>{t.setGeometries(o(i))}),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}});function z(e){const a={};return Object.keys(e).forEach(r=>{a[r]=new TMap.CircleStyle(e[r])}),a}var A=n.defineComponent({name:"tmap-multi-circle",props:{id:{type:String,default:"default"},zIndex:{type:Number,default:1},styles:{type:Object,required:!0},geometries:{type:Array,required:!0}},setup(e,{attrs:a,emit:r}){const l=n.inject("map");if(!l)return{};const s=n.toRaw(l.value);f(s,e.id);const o=i=>i.map(c=>p(g({},c),{center:new TMap.LatLng(c.center.lat,c.center.lng)})),t=new TMap.MultiCircle({id:e.id,map:s,styles:z(e.styles),geometries:o(e.geometries),zIndex:1});return O(t,a,r),n.watch(()=>e.zIndex,i=>{t.setZIndex(i)}),n.watch(()=>e.styles,i=>{t.setStyles(z(i))}),n.watch(()=>e.geometries,i=>{t.setGeometries(o(i))}),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}});const P=e=>new TMap.LatLng(e.lat,e.lng);var x=n.defineComponent({name:"tmap-info-window",props:{id:{type:String,default:"default"},visible:{type:Boolean,required:!0},position:{type:Object,required:!0},content:{type:String,required:!0},zIndex:{type:Number,required:!1,default:0},offset:{type:Object,required:!1,default:()=>({x:0,y:0})},enableCustom:{type:Boolean,required:!1,default:!1}},emits:["close-click"],setup(e,{emit:a}){const r=n.inject("map");if(!r)return{};const l=n.toRaw(r.value);f(l,e.id);const s=P(e.position),o=new TMap.InfoWindow({map:n.toRaw(r.value),position:s,content:e.content,zIndex:e.zIndex,offset:e.offset,enableCustom:e.enableCustom});return o.on("closeclick",()=>{a("close-click")}),n.watch(()=>e.visible,t=>{t?o.open():o.close()}),n.watch(()=>e.content,t=>{o.setContent(t)}),n.watch(()=>e.position,t=>{o.setPosition(P(t))}),n.onUnmounted(()=>{o.destroy()}),{}},render(){return null}}),q=n.defineComponent({name:"tmap-polygon-editor",props:{id:{type:String,default:"default"},zIndex:{type:Number,default:2},snappable:{type:Boolean,default:!0},drawingStyleId:{type:String,default:"drawing"},selectedStyleId:{type:String,default:"selected"},styles:{type:Object,required:!0},modelValue:{type:Array,required:!0},actionMode:{type:Number}},emits:["update:modelValue","select","error"],setup(e,{emit:a}){const r=n.inject("map");if(!r)return{};const l=n.toRaw(r.value);f(l,e.id);const s=w(e.modelValue),o=new TMap.MultiPolygon({id:e.id,map:l,zIndex:e.zIndex,styles:h(e.styles),geometries:s}),t=new TMap.tools.GeometryEditor({map:l,overlayList:[{overlay:o,id:e.id,drawingStyleId:e.drawingStyleId,selectedStyleId:e.selectedStyleId}],actionMode:e.actionMode===1?TMap.tools.constants.EDITOR_ACTION.INTERACT:TMap.tools.constants.EDITOR_ACTION.DRAW,activeOverlayId:e.id,selectable:!0,snappable:e.snappable});return t.on("select",()=>{a("select",t.getSelectedList())}),t.on("draw_complete",i=>{a("update:modelValue",[...e.modelValue,i])}),t.on("adjust_complete",i=>{for(let c=e.modelValue.length-1;c>=0;c-=1)if(e.modelValue[c].id===i.id){Object.assign(e.modelValue[c],i),a("update:modelValue",[...e.modelValue]);break}}),t.on("delete_complete",i=>{const c=i.map(u=>u.id);a("update:modelValue",e.modelValue.filter(u=>c.indexOf(u.id)===-1)),a("select",t.getSelectedList())}),t.on("split_complete",i=>{const c=t.getActiveOverlay();a("update:modelValue",[...c.overlay.getGeometries(),...i]),a("select",t.getSelectedList())}),t.on("union_complete",i=>{const c=t.getActiveOverlay();a("update:modelValue",[...c.overlay.getGeometries(),i]),a("select",t.getSelectedList())}),t.on("split_fail",i=>{a("error",i)}),t.on("union_fail",i=>{a("error",i)}),n.watch(()=>e.actionMode,i=>{const c=i===1?TMap.tools.constants.EDITOR_ACTION.INTERACT:TMap.tools.constants.EDITOR_ACTION.DRAW;t.setActionMode(c)}),n.onUnmounted(()=>{o.setMap(null);try{t.destroy()}catch{}}),{select:t.select.bind(t),stop:t.stop.bind(t),split:t.split.bind(t),union:t.union.bind(t),delete:t.delete.bind(t),destroy:t.destroy.bind(t)}},render(){return null}});const Z=e=>new TMap.LatLng(e.lat,e.lng);var $=n.defineComponent({name:"tmap-dom-overlay",props:{id:{type:String,default:"default"},position:{type:Object,required:!0},offset:{type:Array,required:!1,default:()=>[0,0]}},setup(e,{slots:a}){const r=n.inject("map");if(!r)return{};const l=n.toRaw(r.value);f(l,e.id);const s=n.ref(document.createElement("div")),o=n.computed(()=>Z(Z(e.position)));class t extends TMap.DOMOverlay{constructor(u){super(u),this.map=u.map,this.onInit(u)}onInit(u){this.ele=u.ele}createDOM(){return this.ele}updateDOM(){const u=this.map.projectToContainer(o.value),T=`${u.getX()-this.ele.clientWidth/2+e.offset[0]}px`,m=`${u.getY()-this.ele.clientHeight/2+e.offset[1]}px`;this.ele.setAttribute("style",`top: ${m}; left: ${T}; position: absolute;`)}onDestroy(){this.ele.innerHTML=""}}let i;return n.onMounted(()=>{i=new t({map:r.value,ele:s.value})}),n.watch(()=>e.position,()=>{i&&i.updateDOM()}),n.onUnmounted(()=>{i.onDestroy()}),()=>n.h("span",{ref:s},a.default?a.default():[])}});const F=[C,I,L,_,E,k,A,x,q,$],W=e=>{F.forEach(a=>{e.component(a.name,a)})};d.DOMOverlay=$,d.InfoWindow=x,d.MarkerCluster=L,d.MultiCircle=A,d.MultiLabel=k,d.MultiMarker=I,d.MultiPolygon=_,d.MultiPolyline=E,d.PolygonEditor=q,d.TMap=C,d.default=W,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});