@map-component/vue-tmap/dist/index.umd.js

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

(function(u,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(u=typeof globalThis!="undefined"?globalThis:u||self,a(u["vue-tmap"]={},u.vue))})(this,function(u,a){"use strict";function x(e,n,i){const l=["visualization","tools","geometry",...i||[]];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=${n}&libraries=${l.join(",")}&callback=tmapCallback`,document.body.appendChild(o)})}function f(e,n,i,l){if(!i){e.removeControl(n);return}const s=e.getControl(n),{position:o,className:t}=i;l[o]&&s.setPosition(l[o]),s.setClassName(t)}var b=a.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 n=a.ref(null),i=a.ref(null);let l,s;const o=[];return Object.keys(e.events).forEach(t=>{o.push(t)}),a.onMounted(async()=>{await x(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);n.value&&(l=new TMap.Map(n.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}),f(l,TMap.constants.DEFAULT_CONTROL_ID.SCALE,e.control.scale,s),f(l,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,e.control.zoom,s),f(l,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,e.control.rotation,s),o.forEach(r=>{l.on(r,e.events[r])}),i.value=l)}),a.onUnmounted(()=>{l&&(o.forEach(t=>{l.off(t,e.events[t])}),l.destroy())}),a.watch(()=>[e.center,e.zoom,e.rotation,e.pitch],([t,r,d,c])=>{l&&l.easeTo({center:new TMap.LatLng(t.lat,t.lng),zoom:r,rotation:d,pitch:c},{duration:500})}),a.watch(()=>e.scale,t=>l&&l.setScale(t)),a.watch(()=>e.offset,t=>l&&l.setOffset(t)),a.watch(()=>e.draggable,t=>l&&l.setDraggable(t)),a.watch(()=>e.scrollable,t=>l&&l.setScrollable(t)),a.watch(()=>e.doubleClickZoom,t=>l&&l.setDoubleClickZoom(t)),a.watch(()=>e.boundary,t=>l&&l.setBoundary(t)),a.watch(()=>e.control,t=>{f(l,TMap.constants.DEFAULT_CONTROL_ID.SCALE,t.scale,s),f(l,TMap.constants.DEFAULT_CONTROL_ID.ZOOM,t.zoom,s),f(l,TMap.constants.DEFAULT_CONTROL_ID.ROTATION,t.rotation,s)}),a.provide("map",i),{map:i,el:n,getCenter:()=>l==null?void 0:l.getCenter(),getZoom:()=>l==null?void 0:l.getZoom()}},render(){return a.h("div",{class:this.class,style:{...this.style,height:"100%",width:"100%"},ref:"el"},this.$slots.default&&this.map?this.$slots.default():[])}});function g(e,n,i){const l=[],s=[];Object.keys(n).forEach(o=>{if(o.indexOf("on")===0){const t=o[2].toLowerCase()+o.slice(3);l.push(t),s.push(i.bind(null,t))}}),l.forEach((o,t)=>{e.on(o,s[t])}),a.onUnmounted(()=>{l.forEach((o,t)=>{e.off(o,s[t])})})}function m(e,n){const i=e.getLayer(n);i&&i.setMap(null);const l=e.getLayer(`${n}_border_line`);l&&l.setMap(null);const s=e.getLayer(`${n}_border`);s&&s.setMap(null)}function h(e){const n={};return Object.keys(e).forEach(i=>{n[i]=new TMap.MarkerStyle(e[i])}),n}function M(e){return e.map(n=>({...n,position:new TMap.LatLng(n.position.lat,n.position.lng)}))}var w=a.defineComponent({name:"tmap-multi-marker",props:{id:{type:String,default:"default"},styles:{type:Object,required:!0},geometries:{type:Array,required:!0}},setup(e,{attrs:n,emit:i}){const l=a.inject("map");if(!l)return{};const s=a.toRaw(l.value);m(s,e.id);const o=new TMap.MultiMarker({id:e.id,map:s,styles:h(e.styles),geometries:M(e.geometries)});return g(o,n,i),a.watch(()=>e.styles,t=>{o.setStyles(h(t))}),a.watch(()=>e.geometries,t=>{o.setGeometries(M(t))}),a.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}}),C=a.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 n=a.inject("map");if(!n)return{};const i=new TMap.MarkerCluster({id:e.id,map:a.toRaw(n.value),enableDefaultStyle:e.enableDefaultStyle,minimumClusterSize:e.minimumClusterSize,geometries:M(e.geometries),zoomOnClick:e.zoomOnClick,gridSize:e.gridSize,averageCenter:e.averageCenter,maxZoom:e.maxZoom});return a.watch(()=>e.geometries,l=>{i.setGeometries(M(l))}),{}},render(){return null}});function I(e){const n={};return Object.keys(e).forEach(i=>{n[i]=new TMap.PolylineStyle(e[i])}),n}function S(e){return e.map(n=>({...n,paths:n.paths.map(i=>new TMap.LatLng(i.lat,i.lng))}))}var L=a.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:n,emit:i}){const l=a.inject("map");if(!l)return{};const s=a.toRaw(l.value);m(s,e.id);const o=new TMap.MultiPolyline({id:e.id,map:s,zIndex:e.zIndex,styles:I(e.styles),geometries:S(e.geometries)});return g(o,n,i),a.watch(()=>e.zIndex,t=>{o.setZIndex(t)}),a.watch(()=>e.styles,t=>{o.setStyles(I(t))}),a.watch(()=>e.geometries,t=>{o.setGeometries(S(t))}),a.onUnmounted(()=>{o.setMap(null)}),{}},render(){return null}});function q(e,n){return e.reduce((i,l)=>{const s=l[n];return i[s]=l,i},{})}function Z(e,n){var i,l;if(e.id!==n.id||e.styleId!==n.styleId||e.rank!==n.rank)return!1;if(e.paths.length===n.paths.length){if(JSON.stringify(e.paths)!==JSON.stringify(n.paths))return!1}else return!1;if(e.properties!==void 0&&n.properties!==void 0){const s=Object.keys(e.properties||{}),o=Object.keys(n.properties||{});if(s.length!==o.length)return!1;for(let t=s.length-1;t>=0;t-=1){const r=s[t];if(((i=e.properties)==null?void 0:i[r])!==((l=n.properties)==null?void 0:l[r]))return!1}}else if(e.properties!==n.properties)return!1;return!0}function O(e){const n={};return Object.keys(e).forEach(i=>{n[i]=new TMap.PolygonStyle(e[i])}),n}function T(e){return e.map(n=>({...n,paths:n.paths.map(i=>new TMap.LatLng(i.lat,i.lng))}))}var N=a.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:n,emit:i}){const l=a.inject("map");if(!l)return{};const s=a.toRaw(l.value);let o=e.geometries;m(s,e.id);const t=new TMap.MultiPolygon({id:e.id,map:s,zIndex:e.zIndex,styles:O(e.styles),geometries:T(o)});return g(t,n,i),a.watch(()=>e.zIndex,r=>{t.setZIndex(r)}),a.watch(()=>e.styles,r=>{t.setStyles(O(r))}),a.watch(()=>e.geometries,r=>{const d=q(o,"id"),c=new Set(Object.keys(d)),p=[];r.forEach(y=>{d[y.id]?(c.delete(y.id),Z(d[y.id],y)||p.push(y)):p.push(y)}),o=r,c.size>0&&t.remove([...c]),p.length>0&&t.updateGeometries(T(r))}),a.provide("geometry",t),a.onUnmounted(()=>{t.setMap(null)}),{}},render(){return this.$slots.default?this.$slots.default():null}});function R(e){const n={};return Object.keys(e).forEach(i=>{n[i]=new TMap.LabelStyle(e[i])}),n}var _=a.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:n,emit:i}){const l=a.inject("map");if(!l)return{};const s=a.toRaw(l.value);m(s,e.id);const o=r=>r.map(d=>({...d,position:new TMap.LatLng(d.position.lat,d.position.lng)})),t=new TMap.MultiLabel({id:e.id,map:a.toRaw(l.value),styles:R(e.styles),geometries:o(e.geometries),enableCollision:e.enableCollision});return g(t,n,i),a.watch(()=>e.styles,r=>{t.setStyles(R(r))}),a.watch(()=>e.geometries,r=>{t.setGeometries(o(r))}),a.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}});function E(e){const n={};return Object.keys(e).forEach(i=>{n[i]=new TMap.CircleStyle(e[i])}),n}var j=a.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:n,emit:i}){const l=a.inject("map");if(!l)return{};const s=a.toRaw(l.value);m(s,e.id);const o=r=>r.map(d=>({...d,center:new TMap.LatLng(d.center.lat,d.center.lng)})),t=new TMap.MultiCircle({id:e.id,map:s,styles:E(e.styles),geometries:o(e.geometries),zIndex:1});return g(t,n,i),a.watch(()=>e.zIndex,r=>{t.setZIndex(r)}),a.watch(()=>e.styles,r=>{t.setStyles(E(r))}),a.watch(()=>e.geometries,r=>{t.setGeometries(o(r))}),a.onUnmounted(()=>{t.setMap(null)}),{}},render(){return null}});const k=e=>new TMap.LatLng(e.lat,e.lng);var z=a.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:n}){const i=a.inject("map");if(!i)return{};const l=a.toRaw(i.value);m(l,e.id);const s=k(e.position),o=new TMap.InfoWindow({map:a.toRaw(i.value),position:s,content:e.content,zIndex:e.zIndex,offset:e.offset,enableCustom:e.enableCustom});return o.on("closeclick",()=>{n("close-click")}),a.watch(()=>e.visible,t=>{t?o.open():o.close()}),a.watch(()=>e.content,t=>{o.setContent(t)}),a.watch(()=>e.position,t=>{o.setPosition(k(t))}),a.onUnmounted(()=>{o.destroy()}),{}},render(){return null}}),A=a.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:n}){const i=a.inject("map");if(!i)return{};const l=a.toRaw(i.value);m(l,e.id);const s=T(e.modelValue),o=new TMap.MultiPolygon({id:e.id,map:l,zIndex:e.zIndex,styles:O(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",()=>{n("select",t.getSelectedList())}),t.on("draw_complete",r=>{n("update:modelValue",[...e.modelValue,r])}),t.on("adjust_complete",r=>{for(let d=e.modelValue.length-1;d>=0;d-=1)if(e.modelValue[d].id===r.id){Object.assign(e.modelValue[d],r),n("update:modelValue",[...e.modelValue]);break}}),t.on("delete_complete",r=>{const d=r.map(c=>c.id);n("update:modelValue",e.modelValue.filter(c=>d.indexOf(c.id)===-1)),n("select",t.getSelectedList())}),t.on("split_complete",r=>{const d=t.getActiveOverlay();n("update:modelValue",[...d.overlay.getGeometries(),...r]),n("select",t.getSelectedList())}),t.on("union_complete",r=>{const d=t.getActiveOverlay();n("update:modelValue",[...d.overlay.getGeometries(),r]),n("select",t.getSelectedList())}),t.on("split_fail",r=>{n("error",r)}),t.on("union_fail",r=>{n("error",r)}),a.watch(()=>e.actionMode,r=>{const d=r===1?TMap.tools.constants.EDITOR_ACTION.INTERACT:TMap.tools.constants.EDITOR_ACTION.DRAW;t.setActionMode(d)}),a.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 D=e=>new TMap.LatLng(e.lat,e.lng);var P=a.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:n}){const i=a.inject("map");if(!i)return{};const l=a.toRaw(i.value);m(l,e.id);const s=a.ref(document.createElement("div")),o=a.computed(()=>D(D(e.position)));class t extends TMap.DOMOverlay{constructor(c){super(c),this.map=c.map,this.onInit(c)}onInit(c){this.ele=c.ele}createDOM(){return this.ele}updateDOM(){const c=this.map.projectToContainer(o.value),p=`${c.getX()-this.ele.clientWidth/2+e.offset[0]}px`,y=`${c.getY()-this.ele.clientHeight/2+e.offset[1]}px`;this.ele.setAttribute("style",`top: ${y}; left: ${p}; position: absolute;`)}onDestroy(){this.ele.innerHTML=""}}let r;return a.onMounted(()=>{r=new t({map:i.value,ele:s.value})}),a.watch(()=>e.position,()=>{r.updateDOM()}),a.onUnmounted(()=>{r.onDestroy()}),()=>a.h("span",{ref:s},n.default?n.default():[])}});const $=[b,w,C,N,L,_,j,z,A,P],G=e=>{$.forEach(n=>{e.component(n.name,n)})};u.DOMOverlay=P,u.InfoWindow=z,u.MarkerCluster=C,u.MultiCircle=j,u.MultiLabel=_,u.MultiMarker=w,u.MultiPolygon=N,u.MultiPolyline=L,u.PolygonEditor=A,u.TMap=b,u.default=G,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});