vue3-tmap-new/dist/index.umd.js

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

(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c["vue-tmap"]={},c.vue))})(this,function(c,n){"use strict";var X=Object.defineProperty;var Q=(c,n,h)=>n in c?X(c,n,{enumerable:!0,configurable:!0,writable:!0,value:h}):c[n]=h;var O=(c,n,h)=>(Q(c,typeof n!="symbol"?n+"":n,h),h);function h(e,l,i){const a=["visualization","tools","geometry",...i||[]];return new Promise(r=>{if(window.TMap){r(window.TMap);return}window.tmapCallback=function(){r(window.TMap)},window.__POWERED_BY_QIANKUN__&&top&&(top.tmapCallback=function(){r(TMap)});const o=document.createElement("script");o.type="text/javascript",o.src=`https://map.qq.com/api/gljs?v=${e}&key=${l}&libraries=${a.join(",")}&callback=tmapCallback`,document.body.appendChild(o)})}function M(e,l,i,a){if(!i){e.removeControl(l);return}const r=e.getControl(l),{position:o,className:t}=i;a[o]&&r.setPosition(a[o]),r.setClassName(t)}const L=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:{}})},showControl:{type:Boolean,default:!0},events:{type:Object,default:()=>({})},includePoints:{type:Array,default:()=>[]},fitBoundsOptions:{type:Object,default:()=>({padding:{top:60,bottom:60,left:60,right:60},ease:{duration:0}})}},setup(e){const l=n.ref(null),i=n.ref(null);let a,r;const o=[];return Object.keys(e.events).forEach(t=>{o.push(t)}),n.onMounted(async()=>{await h(e.version,e.mapKey,e.libraries),r={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);l.value&&(a=new TMap.Map(l.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:e.showControl}),M(a,TMap.constants.DEFAULT_CONTROL_ID.SCALE,e.control.scale,r),M(a,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,e.control.zoom,r),M(a,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,e.control.rotation,r),o.forEach(s=>{a.on(s,e.events[s])}),i.value=a)}),n.onUnmounted(()=>{a&&(o.forEach(t=>{a.off(t,e.events[t])}),a.destroy())}),n.watch(()=>[e.center,e.zoom,e.rotation,e.pitch],([t,s,d,y])=>{a&&a.easeTo({center:new TMap.LatLng(t.lat,t.lng),zoom:s,rotation:d,pitch:y},{duration:500})}),n.watch(()=>e.scale,t=>a&&a.setScale(t)),n.watch(()=>e.offset,t=>a&&a.setOffset(t)),n.watch(()=>e.draggable,t=>a&&a.setDraggable(t)),n.watch(()=>e.scrollable,t=>a&&a.setScrollable(t)),n.watch(()=>e.doubleClickZoom,t=>a&&a.setDoubleClickZoom(t)),n.watch(()=>e.boundary,t=>a&&a.setBoundary(t)),n.watch(()=>e.control,t=>{M(a,TMap.constants.DEFAULT_CONTROL_ID.SCALE,t.scale,r),M(a,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,t.zoom,r),M(a,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,t.rotation,r)}),n.watch(()=>e.baseMap,t=>{t&&a&&a.setBaseMap(t)}),n.watchEffect(()=>{if(i.value){const t=new TMap.LatLngBounds;t&&(e.includePoints.forEach(s=>{t&&t.extend(new TMap.LatLng(s.lat,s.lng))}),t.isEmpty()||a.fitBounds(t,e.fitBoundsOptions))}}),n.provide("map",i),{map:i,el:l,getCenter:()=>a==null?void 0:a.getCenter(),getZoom:()=>a==null?void 0:a.getZoom()}},render(){return n.h("div",{class:this.class,style:{height:"100%",width:"100%",...this.style},ref:"el"},this.$slots.default&&this.map?this.$slots.default():[])}});function T(e,l,i){const a=[],r=[];Object.keys(l).forEach(o=>{if(o.indexOf("on")===0){const t=o[2].toLowerCase()+o.slice(3);a.push(t),r.push(i.bind(null,t))}}),a.forEach((o,t)=>{e.on(o,r[t])}),n.onUnmounted(()=>{a.forEach((o,t)=>{e.off(o,r[t])})})}function b(e,l){const i=e.getLayer(l);i&&i.setMap(null);const a=e.getLayer(`${l}_border_line`);a&&a.setMap(null);const r=e.getLayer(`${l}_border`);r&&r.setMap(null)}function N(e){const l={};return Object.keys(e).forEach(i=>{l[i]=new TMap.MarkerStyle(e[i])}),l}function w(e){return e.map(l=>({...l,position:new TMap.LatLng(l.position.lat,l.position.lng)}))}const E=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:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value);b(r,e.id);const o=new TMap.MultiMarker({id:e.id,map:r,styles:N(e.styles),geometries:w(e.geometries)});return T(o,l,i),n.watch(()=>e.styles,t=>{o.setStyles(N(t))}),n.watch(()=>e.geometries,t=>{o.setGeometries(w(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}});function F(e,l,i,a,r){class o extends TMap.DOMOverlay{constructor(u){super(u);O(this,"content","");O(this,"position",null);O(this,"extData",{});this.content=u.content,this.position=u.position,this.extData=u.extData}onInit(u){this.content=u.content,this.position=u.position,this.extData=u.extData}onDestroy(){this.dom.removeEventListener("click",this.onClick),this.removeAllListeners()}onClick(){this.emit("click")}createDOM(){const u=document.createElement("div");if(r){const{cluster:C}=r;C&&n.render(C({content:this.content})[0],u)}return u.style.position="absolute",u}updateDOM(){if(!this.map)return;const u=this.map.projectToContainer(this.position),C=`${u.getX()-this.dom.children[0].clientWidth/2}px`,J=`${u.getY()-this.dom.children[0].clientHeight/2}px`;this.dom.style.transform=`translate(${C}, ${J})`,this.emit("dom_updated")}}class t extends o{createDOM(){const m=document.createElement("div");if(r){const{marker:u}=r;u&&n.render(u({content:this.content,extData:this.extData})[0],m)}return m.style.position="absolute",m}}let s=[],d=[],y=null,f=[];e.on("cluster_changed",()=>{s.length&&(s.forEach(m=>{m.destroy()}),s=[]),d=[],e.getClusters().forEach(m=>{if(m.geometries.length>1){const u=new o({map:l,position:m.center,content:m.geometries.length});s.push(u)}else d.push({...m,position:m.center})}),r!=null&&r.marker?(f.forEach(m=>m.destroy()),f=[],d.forEach(m=>{const u=new t({map:l,position:m.position,content:"",extData:{...m,data:m.geometries}});f.push(u)})):y?y.setGeometries(d):i.markerStyle&&(y=new TMap.MultiMarker({map:l,styles:{default:new TMap.MarkerStyle(i.markerStyle)},geometries:d})),a("change",d.map(m=>m.geometries[0]))});function g(){s.forEach(p=>p.destroy()),f.forEach(p=>p.destroy())}n.watch(()=>i.geometries,p=>{(!p||p.length===0)&&g()}),n.onUnmounted(()=>{g()})}const k=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},markerStyle:{type:Object}},emits:["change"],setup(e,{slots:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value),o=new TMap.MarkerCluster({id:e.id,map:r,enableDefaultStyle:e.enableDefaultStyle,minimumClusterSize:e.minimumClusterSize,geometries:w(e.geometries),zoomOnClick:e.zoomOnClick,gridSize:e.gridSize,averageCenter:e.averageCenter,maxZoom:e.maxZoom});return n.watch(()=>e.geometries,t=>{o.setGeometries(w(t))}),e.enableDefaultStyle||F(o,r,e,i,l),n.onUnmounted(()=>{o.setMap(null)}),{}},render(){return null}});function _(e){const l={};return Object.keys(e).forEach(i=>{l[i]=new TMap.PolylineStyle(e[i])}),l}function R(e){return e.map(l=>({...l,paths:l.paths.map(i=>new TMap.LatLng(i.lat,i.lng))}))}const D=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:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value);b(r,e.id);const o=new TMap.MultiPolyline({id:e.id,map:r,zIndex:e.zIndex,styles:_(e.styles),geometries:R(e.geometries)});return T(o,l,i),n.watch(()=>e.zIndex,t=>{o.setZIndex(t)}),n.watch(()=>e.styles,t=>{o.setStyles(_(t))}),n.watch(()=>e.geometries,t=>{o.setGeometries(R(t))}),n.onUnmounted(()=>{o.setMap(null)}),{}},render(){return null}});function H(e,l){return e.reduce((i,a)=>{const r=a[l];return i[r]=a,i},{})}function W(e,l){var i,a;if(e.id!==l.id||e.styleId!==l.styleId||e.rank!==l.rank)return!1;if(e.paths.length===l.paths.length){if(JSON.stringify(e.paths)!==JSON.stringify(l.paths))return!1}else return!1;if(e.properties!==void 0&&l.properties!==void 0){const r=Object.keys(e.properties||{}),o=Object.keys(l.properties||{});if(r.length!==o.length)return!1;for(let t=r.length-1;t>=0;t-=1){const s=r[t];if(((i=e.properties)==null?void 0:i[s])!==((a=l.properties)==null?void 0:a[s]))return!1}}else if(e.properties!==l.properties)return!1;return!0}function S(e){const l={};return Object.keys(e).forEach(i=>{l[i]=new TMap.PolygonStyle(e[i])}),l}function I(e){return e.map(l=>({...l,paths:l.paths.map(i=>new TMap.LatLng(i.lat,i.lng))}))}const j=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:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value);let o=e.geometries;b(r,e.id);const t=new TMap.MultiPolygon({id:e.id,map:r,zIndex:e.zIndex,styles:S(e.styles),geometries:I(o)});return T(t,l,i),n.watch(()=>e.zIndex,s=>{t.setZIndex(s)}),n.watch(()=>e.styles,s=>{t.setStyles(S(s))}),n.watch(()=>e.geometries,s=>{const d=H(o,"id"),y=new Set(Object.keys(d)),f=[];s.forEach(g=>{d[g.id]?(y.delete(g.id),W(d[g.id],g)||f.push(g)):f.push(g)}),o=s,y.size>0&&t.remove([...y]),f.length>0&&t.updateGeometries(I(s))}),n.provide("geometry",t),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return this.$slots.default?this.$slots.default():null}});function x(e){const l={};return Object.keys(e).forEach(i=>{l[i]=new TMap.LabelStyle(e[i])}),l}const A=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:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value);b(r,e.id);const o=s=>s.map(d=>({...d,position:new TMap.LatLng(d.position.lat,d.position.lng)})),t=new TMap.MultiLabel({id:e.id,map:n.toRaw(a.value),styles:x(e.styles),geometries:o(e.geometries),enableCollision:e.enableCollision});return T(t,l,i),n.watch(()=>e.styles,s=>{t.setStyles(x(s))}),n.watch(()=>e.geometries,s=>{t.setGeometries(o(s))}),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}});function z(e){const l={};return Object.keys(e).forEach(i=>{l[i]=new TMap.CircleStyle(e[i])}),l}const P=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:l,emit:i}){const a=n.inject("map");if(!a)return{};const r=n.toRaw(a.value);b(r,e.id);const o=s=>s.map(d=>({...d,center:new TMap.LatLng(d.center.lat,d.center.lng)})),t=new TMap.MultiCircle({id:e.id,map:r,styles:z(e.styles),geometries:o(e.geometries),zIndex:1});return T(t,l,i),n.watch(()=>e.zIndex,s=>{t.setZIndex(s)}),n.watch(()=>e.styles,s=>{t.setStyles(z(s))}),n.watch(()=>e.geometries,s=>{t.setGeometries(o(s))}),n.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}}),B=e=>new TMap.LatLng(e.lat,e.lng),Z=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:l}){const i=n.inject("map");if(!i)return{};const a=n.toRaw(i.value);b(a,e.id);const r=B(e.position),o=new TMap.InfoWindow({map:n.toRaw(i.value),position:r,content:e.content,zIndex:e.zIndex,offset:e.offset,enableCustom:e.enableCustom});return o.on("closeclick",()=>{l("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(B(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:l}){const i=n.inject("map");if(!i)return{};const a=n.toRaw(i.value);b(a,e.id);const r=I(e.modelValue),o=new TMap.MultiPolygon({id:e.id,map:a,zIndex:e.zIndex,styles:S(e.styles),geometries:r}),t=new TMap.tools.GeometryEditor({map:a,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",()=>{l("select",t.getSelectedList())}),t.on("draw_complete",s=>{l("update:modelValue",[...e.modelValue,s])}),t.on("adjust_complete",s=>{for(let d=e.modelValue.length-1;d>=0;d-=1)if(e.modelValue[d].id===s.id){Object.assign(e.modelValue[d],s),l("update:modelValue",[...e.modelValue]);break}}),t.on("delete_complete",s=>{const d=s.map(y=>y.id);l("update:modelValue",e.modelValue.filter(y=>d.indexOf(y.id)===-1)),l("select",t.getSelectedList())}),t.on("split_complete",s=>{const d=t.getActiveOverlay();l("update:modelValue",[...d.overlay.getGeometries(),...s]),l("select",t.getSelectedList())}),t.on("union_complete",s=>{const d=t.getActiveOverlay();l("update:modelValue",[...d.overlay.getGeometries(),s]),l("select",t.getSelectedList())}),t.on("split_fail",s=>{l("error",s)}),t.on("union_fail",s=>{l("error",s)}),n.watch(()=>e.actionMode,s=>{const d=s===1?TMap.tools.constants.EDITOR_ACTION.INTERACT:TMap.tools.constants.EDITOR_ACTION.DRAW;t.setActionMode(d)}),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),disable:t.disable.bind(t),enable:t.enable.bind(t)}},render(){return null}}),U=e=>new TMap.LatLng(e.lat,e.lng),$=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:l}){const i=n.inject("map");if(!i)return{};const a=n.toRaw(i.value);b(a,e.id);const r=n.ref(document.createElement("div")),o=n.computed(()=>U(U(e.position)));class t extends TMap.DOMOverlay{constructor(f){super(f);O(this,"map");O(this,"ele");this.map=f.map,this.onInit(f)}onInit(f){this.ele=f.ele}createDOM(){return this.ele}updateDOM(){const f=this.map.projectToContainer(o.value),g=`${f.getX()-this.ele.clientWidth/2+e.offset[0]}px`,p=`${f.getY()-this.ele.clientHeight/2+e.offset[1]}px`;this.ele.setAttribute("style",`top: ${p}; left: ${g}; position: absolute;`)}onDestroy(){this.ele.innerHTML=""}}let s;return n.onMounted(()=>{s=new t({map:i.value,ele:r.value}),s.updateDOM()}),n.watch(()=>e.position,()=>{s.updateDOM()},{flush:"post"}),n.onUnmounted(()=>{s.onDestroy()}),()=>n.h("span",{ref:r},l.default?l.default():[])}}),G=n.defineComponent({name:"tmap-measure-tool",props:{enable:{type:Boolean,default:!0},type:{type:String}},emits:{end:e=>!0},setup(e,{emit:l}){const i=n.inject("map"),a=n.ref();a.value=new TMap.tools.MeasureTool({map:n.toRaw(i==null?void 0:i.value)});const r=async()=>{if(!e.enable)return;await a.value.enable();let o;if(e.type==="distance")o=await a.value.measureDistance();else if(e.type==="area")o=await a.value.measureArea();else{a.value.disable();return}l("end",o),await r()};n.watch(()=>[e.type,e.enable],()=>{r()},{immediate:!0}),n.watch(()=>e.enable,o=>{o?a.value.enable():a.value.disable()}),n.onUnmounted(()=>{a.value.disable()})},render(){return null}}),V=n.defineComponent({name:"tmap-heatmap",props:{radius:{type:Number,default:50},height:{type:Number,default:100},gradientColor:{type:Object},min:{type:Number,default:0},max:{type:Number,default:2},opacity:{type:Number,default:.8},enableAggregation:{type:Boolean,default:!1},enableLighting:{type:Boolean,default:!1},zIndex:{type:Number},minZoom:{type:Number,default:3},maxZoom:{type:Number,default:20},offset:{type:Number,default:0},distanceUnit:{type:String,default:"pixel"},points:{type:Array,default:()=>[]}},setup(e){const l=n.inject("map"),i=new TMap.visualization.Heat({radius:e.radius,height:e.height,min:e.min,max:e.max,minZoom:e.minZoom,maxZoom:e.maxZoom,opacity:e.opacity,offset:e.offset,distanceUnit:e.distanceUnit,gradientColor:e.gradientColor}).addTo(l==null?void 0:l.value);n.onMounted(()=>{e.points&&i.setData(e.points)}),n.onUnmounted(()=>{i.destroy()}),n.watch(()=>e.points,a=>{a.length&&i.setData(a)})},render(){return null}}),K=[L,E,k,j,D,A,P,Z,q,$,G,V],Y=e=>{K.forEach(l=>{e.component(l.name,l)})};c.DOMOverlay=$,c.Heatmap=V,c.InfoWindow=Z,c.MarkerCluster=k,c.MeasureTool=G,c.MultiCircle=P,c.MultiLabel=A,c.MultiMarker=E,c.MultiPolygon=j,c.MultiPolyline=D,c.PolygonEditor=q,c.TMap=L,c.default=Y,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});