@karpojs/vue-tmap/dist/index.umd.js

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

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