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