gisviewer-vue3-arcgis
Version:
在应用中引入私服的包, 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置:
2 lines (1 loc) • 9.66 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("ol/format/GeoJSON"),d=require("ol/layer/Image"),y=require("ol/layer/Tile"),w=require("ol/layer/Vector"),g=require("ol/Map");require("ol/ol.css");const S=require("ol/proj"),h=require("ol/source"),C=require("ol/source/Vector"),M=require("ol/tilegrid"),b=require("ol/tilegrid/WMTS"),A=require("ol/View"),I=require("./style/line-style.js"),L=require("./style/point-style.js"),V=require("./style/polygon-style.js");class F{constructor(){this.mapConfig={},this.pointerMoveRaf=null,this.isCursorCrosshair=!1,this.coordinateClickCallback=null,this.clickListeners=[]}subscribeClick(e,t={}){const s={listener:e,triggerOnBlankClick:t.triggerOnBlankClick??!1};return this.clickListeners.push(s),()=>{const i=this.clickListeners.indexOf(s);i>=0&&this.clickListeners.splice(i,1)}}emitFeatureClick(e,t,s,i){var n;(n=this.markerClick)==null||n.call(this,e,t,s,i);for(const{listener:c}of this.clickListeners)c(e,t,s,i)}emitBlankClick(e){for(const{listener:t,triggerOnBlankClick:s}of this.clickListeners)s&&t("map-blank","",null,e)}initialize(e){return this.mapConfig=e.mapConfig||{},this.markerClick=e.markerClickCallback,this.mapClick=e.mapClickCallback,this.map=this.createMap(e.container),this.mapConfig.baseLayers&&this.loadLayers(this.mapConfig.baseLayers),this.map}processUrl(e){return e&&(e.startsWith("http://")||e.startsWith("https://")?e:e.startsWith("{{")?e.replace("{{geoServer}}",this.mapConfig.geoServer):e)}getRendererSymbol(e,t){var c,a;if(((c=e==null?void 0:e.type)==null?void 0:c.toLowerCase())!=="unique-value")return e==null?void 0:e.symbol;const i=[e.field,e.field2,e.field3].filter(Boolean).map(o=>String((t==null?void 0:t[o])??"")).join(e.fieldDelimiter??","),n=(a=e.uniqueValueInfos)==null?void 0:a.find(o=>String(o.value)===i||Array.isArray(o.value)&&o.value.map(String).join(e.fieldDelimiter??",")===i);return(n==null?void 0:n.symbol)??e.defaultSymbol}loadLayers(e){if(!this.map)return;const t=1/0,s=16384;e.forEach(i=>{var c,a;(c=i.source)!=null&&c.url&&(i.source.url=this.processUrl(i.source.url));let n;switch(i.type.toLowerCase()){case"webtile":{if(n=new y({preload:t,cacheSize:s,source:new h.XYZ({url:i.source.url,projection:i.source.projection,tileSize:i.source.tileSize,minZoom:i.source.minZoom,maxZoom:i.source.maxZoom}),...i.options}),i.source.canvasFilter){const o=i.source.canvasFilter;n.on("prerender",r=>{r.context&&(r.context.filter=o)}),n.on("postrender",r=>{r.context&&(r.context.filter="none")})}break}case"gwc-wms":{if(n=new y({preload:t,cacheSize:s,source:new h.TileWMS({...i.source,tileGrid:new M.TileGrid({...i.source.tileGrid})}),...i.options}),i.source.canvasFilter){const o=i.source.canvasFilter;n.on("prerender",r=>{r.context&&(r.context.filter=o)}),n.on("postrender",r=>{r.context&&(r.context.filter="none")})}break}case"wmts":{const o=i.source.matrixSet||"",r=Array.from({length:22},(l,u)=>`${o}:${u}`);n=new y({preload:t,cacheSize:s,source:new h.WMTS({...i.source,format:"image/png",projection:new S.Projection({code:i.source.projection||"EPSG:4326"}),tileGrid:new b({resolutions:[1.4078260157100582,.703913007855028,.35195650392751515,.17597825196375638,.08798912598187819,.043994562990939096,.021997281495469548,.010998640747734774,.005499320373868577,.0027496601869330985,.001374830093467739,.0006874150467326798,.0003437075233663399,.00017185376168316996,8592688084158498e-20,4296344042198222e-20,2148172021099111e-20,10740860104305824e-21,53704300533426425e-22,2685215025481591e-21,13426075127407955e-22,6713037563703978e-22],matrixIds:r,tileSize:256,origin:[-400,400]})}),...i.options});break}case"image-wms":{n=new d({source:new h.ImageWMS({...i.source}),...i.options});break}case"geojson":{const{renderer:o,...r}=i.options??{},l=i.renderer??o;n=new w({source:new C({url:i.source.url,format:new k}),...r,style:l?u=>{var x;const p=(x=u.getGeometry())==null?void 0:x.getType(),m=u.getProperties(),f=this.getRendererSymbol(l,m);if(f)switch(p){case"Point":case"MultiPoint":return L.getPointStyle(f,m);case"LineString":case"MultiLineString":return I.getLineStyle(f,m);case"Polygon":case"MultiPolygon":return V.getPolygonStyle(f,m,()=>n.changed());default:return}}:void 0});break}}n&&(n.set("id",i.id),n.set("group",i.group),(a=this.map)==null||a.addLayer(n))})}createMap(e){const t=this.mapConfig.view,s={...t};this.mapView=new A(s),this.mapConfig.camera?this.mapConfig.camera.home=t:this.mapConfig.camera={home:t};const i=new g({target:e,view:this.mapView});return Array.isArray(t.extent)&&t.extent.length===4&&this.mapView.fit(t.extent,{size:i.getSize(),padding:[20,20,20,20],duration:0}),i.on("pointermove",n=>{n.dragging||this.pointerMoveRaf===null&&(this.pointerMoveRaf=requestAnimationFrame(()=>{if(this.isCursorCrosshair){this.pointerMoveRaf=null;return}const c=i.hasFeatureAtPixel(n.pixel),a=i.getTargetElement();a&&(a.style.cursor=c?"pointer":""),this.pointerMoveRaf=null}))}),i.on("click",n=>{var a;this.coordinateClickCallback&&this.coordinateClickCallback(n.coordinate,n.pixel,n),(a=this.mapClick)==null||a.call(this,n.coordinate,n.pixel,n);const c=i.forEachFeatureAtPixel(n.pixel,o=>o);if(c){const o=c.get("type")??"",r=c.get("id")??"",l=c.getProperties();this.emitFeatureClick(o,r,l,n)}else this.emitBlankClick(n),this.queryImageWMSFeatureInfo(n)}),i}async queryImageWMSFeatureInfo(e){var i;if(!this.map||!this.markerClick)return;const t=this.mapView.getResolution();if(!t)return;const s=this.map.getLayers().getArray();for(const n of s){if(!(n instanceof d)||!n.getVisible())continue;const c=n.getSource();if(!(c instanceof h.ImageWMS))continue;const a=c.getFeatureInfoUrl(e.coordinate,t,this.mapView.getProjection()||"EPSG:4326",{INFO_FORMAT:"application/json"});if(a)try{const r=await(await fetch(a)).json();if(r.features&&r.features.length>0){const l=r.features[0],u=n.get("id")||"",p=((i=l.geometry)==null?void 0:i.type)||"wms-feature",m=l.id||"",f={...l.properties,layerId:u,geometry:l.geometry};this.markerClick(p,m,f,e);return}}catch(o){console.warn("GetFeatureInfo 请求失败:",o)}}}async setMapCenter(e){if(!this.map)return{status:-1,message:"地图未初始化"};let t,s;if(e.target){const n=this.parseArcGISGeometry(e.target);t=n.center,s=n.extent}const i=e.center||t||this.mapView.getCenter();return new Promise(n=>{if(s&&!e.center){this.mapView.fit(s,{duration:e.duration?e.duration*1e3:0,callback:()=>{n({status:0,message:"成功"})}});return}e.duration&&e.duration>0?this.mapView.animate({center:i,zoom:e.zoom||this.mapView.getZoom(),duration:e.duration*1e3},()=>{n({status:0,message:"成功"})}):(e.zoom&&this.mapView.setZoom(e.zoom),this.mapView.setCenter(i),n({status:0,message:"成功"}))})}parseArcGISGeometry(e){if(!e)return{};if(Array.isArray(e)){if(e.length===2&&typeof e[0]=="number")return{center:e};if(e.length>0&&e[0].x!==void 0)return{center:[e[0].x,e[0].y]}}if(e.type==="point"||e.x!==void 0&&e.y!==void 0)return{center:[e.x,e.y]};if(e.type==="extent"||e.xmin!==void 0&&e.xmax!==void 0){const t=[e.xmin,e.ymin,e.xmax,e.ymax];return{center:[(e.xmin+e.xmax)/2,(e.ymin+e.ymax)/2],extent:t}}if(e.type==="multipoint"||e.points&&Array.isArray(e.points)){const t=this.calculateExtentFromPoints(e.points);if(t)return{center:[(t[0]+t[2])/2,(t[1]+t[3])/2],extent:t}}if(e.extent){const t=e.extent,s=[t.xmin,t.ymin,t.xmax,t.ymax];return{center:[(t.xmin+t.xmax)/2,(t.ymin+t.ymax)/2],extent:s}}if(e.paths&&Array.isArray(e.paths)){const t=this.calculateExtentFromCoordinates(e.paths);if(t)return{center:[(t[0]+t[2])/2,(t[1]+t[3])/2],extent:t}}if(e.rings&&Array.isArray(e.rings)){const t=this.calculateExtentFromCoordinates(e.rings);if(t)return{center:[(t[0]+t[2])/2,(t[1]+t[3])/2],extent:t}}if(e.geometry)return this.parseArcGISGeometry(e.geometry);if(e.center){if(Array.isArray(e.center))return{center:e.center};if(e.center.x!==void 0)return{center:[e.center.x,e.center.y]}}return{}}calculateExtentFromCoordinates(e){let t=1/0,s=1/0,i=-1/0,n=-1/0,c=!1;for(const a of e)if(Array.isArray(a)){for(const o of a)if(Array.isArray(o)&&o.length>=2){const[r,l]=o;typeof r=="number"&&typeof l=="number"&&(t=Math.min(t,r),s=Math.min(s,l),i=Math.max(i,r),n=Math.max(n,l),c=!0)}}return c?[t,s,i,n]:null}calculateExtentFromPoints(e){if(!Array.isArray(e)||e.length===0)return null;let t=1/0,s=1/0,i=-1/0,n=-1/0,c=!1;for(const a of e)if(Array.isArray(a)&&a.length>=2){const[o,r]=a;typeof o=="number"&&typeof r=="number"&&(t=Math.min(t,o),s=Math.min(s,r),i=Math.max(i,o),n=Math.max(n,r),c=!0)}return c?[t,s,i,n]:null}setMapZoom(e){if(!this.map)return{status:-1,message:"地图未初始化"};const t=this.mapView.getMinZoom(),s=this.mapView.getMaxZoom(),i=Math.max(t,Math.min(s,e.zoom));return this.mapView.setZoom(i),{status:0,message:"成功"}}async setMapCamera(e){if(!this.map)return{status:-1,message:"地图未初始化"};const t=this.mapConfig.camera[e.name];return t?await this.setMapCenter({center:t.center,zoom:e.zoom||t.zoom,duration:e.duration||0}):{status:-1,message:`未找到名称为 ${e.name} 的相机视图`}}async setLayerVisibility(e){const t=this.map.getLayers().getArray().filter(s=>s.get("id")===e.id||s.get("group")===e.id);return t.length>0?(t.forEach(s=>s.setVisible(e.visible)),{status:0,message:"成功"}):{status:-1,message:`未找到ID为 ${e.id} 的图层`}}getClickCoordinates(e){if(!this.map)return console.warn("地图未初始化,无法注册点击事件"),()=>{};const{changeCursor:t=!0,callback:s}=e,i=this.map.getTargetElement();return t&&i&&(this.isCursorCrosshair=!0,i.style.cursor="crosshair"),this.coordinateClickCallback=s,()=>{this.coordinateClickCallback=null,t&&i&&(this.isCursorCrosshair=!1,i.style.cursor="")}}}exports.default=F;