gisviewer-vue3-arcgis 1.0.85

package/lib/src/gis-map/utils/sketchViewTool.d.ts

@@ -0,0 +1,259 @@
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';
+import Sketch from '@arcgis/core/widgets/Sketch';
+import Graphic from '@arcgis/core/Graphic.js';
+import * as turf from '@turf/turf';
+interface sketchViewOptions {
+    /**
+     * 最大允许绘制的图形数量
+     */
+    maxAllowedGraphics?: number;
+    /**
+     * 图形图层配置
+     */
+    GraphicsLayer?: {};
+    /**
+     * 绘制工具显示的元素
+     */
+    sketchvisibleElements?: {};
+    /**
+     * 绘制工具显示的位置
+     */
+    sketchPosition?: string;
+    /**
+     * 绘制工具默认是否显示
+     *
+     * @type {boolean}
+     * @memberof sketchViewOptions
+     */
+    defaultsketchVisible?: boolean;
+    sketchViewModelItemSymbol?: {
+        polylineSymbol?: any;
+        polygonSymbol?: any;
+        pointSymbol?: any;
+    };
+}
+interface ITPoint {
+    x: number;
+    y: number;
+}
+declare type LinearUnits = 'meters' | 'feet' | 'kilometers' | 'miles' | 'nautical-miles' | 'yards' | number;
+declare type Direction = 'north' | 'east' | 'south' | 'west';
+declare type dimensionTypeFace = 'distance' | 'area' | 'angle' | null;
+export default class sketchViewTool {
+    private viewer;
+    graphicsLayer: GraphicsLayer;
+    TextgraphicsLayer: GraphicsLayer;
+    sketchViewModel: SketchViewModel;
+    sketch: Sketch;
+    options: sketchViewOptions;
+    /**
+     * 是否正在绘制
+     *
+     * @type {boolean}
+     * @memberof sketchViewTool
+     */
+    isDraw: boolean;
+    /**
+     * 当前绘制的图形
+     */
+    drawStartGraphic: __esri.Geometry | null;
+    /**
+     * 当前绘制的图形的id
+     *
+     * @type {(string | null)}
+     * @memberof sketchViewTool
+     */
+    drawStartGraphicId: string | null;
+    /**
+     * 绘制的提示dom
+     *
+     * @type {(HTMLElement | null)}
+     * @memberof sketchViewTool
+     */
+    tipsDom: HTMLElement | null;
+    drawPointGraphic: Map<string, Graphic>;
+    dimensionType: dimensionTypeFace;
+    constructor(view: MapView | SceneView, options?: sketchViewOptions);
+    init(): void;
+    on(callcack?: (type: string, state: string, event: any) => void): void;
+    onCreate(event: __esri.SketchCreateEvent, callcack?: (type: string, state: string, event?: any) => void): void;
+    onCreateToCancel(): void;
+    onUpdate(event: __esri.SketchUpdateEvent, callcack?: (type: string, state: string, event?: any) => void): void;
+    onDelete(event: __esri.SketchDeleteEvent, callcack?: (type: string, state: string, event: any) => void): void;
+    addpolyline(paths: number[][][]): void;
+    createPolylineGraphic(paths: number[][], lineSymbol: any, attributes: any): Graphic;
+    createDom(): HTMLDivElement | undefined;
+    removeDom(): void;
+    /**
+     *  开始绘制
+     * @param tool  'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'
+     * @param createOptions
+     */
+    sketchCreate(tool: 'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle', createOptions?: __esri.SketchViewModelCreateCreateOptions): void;
+    /**
+     * 退出绘制
+     *
+     * @memberof sketchViewTool
+     */
+    sketchCancel(): void;
+    /**
+     *  获取所有的图形得长度
+     * @param offsetUnit  距离单位
+     * @returns
+     */
+    getCalculateDistance(offsetUnit?: LinearUnits): (string | number)[];
+    /**
+     * 获取所有的图形得航向角
+     *
+     * @returns
+     * @memberof sketchViewTool
+     */
+    getCalculateHeading(direction?: Direction): (string | number)[];
+    /**
+     * 获取所有的线段的路径和长度
+     *
+     * @returns
+     * @memberof sketchViewTool
+     */
+    getAllPolylineGraphicPath(offsetUnit?: LinearUnits): {
+        paths: number[][];
+        distance: number;
+    }[];
+    close(): void;
+    show(): void;
+    removeAll(): void;
+    calculateDistance(geometry: __esri.Geometry, offsetUnit?: LinearUnits): number;
+    /**
+     *  计算geometry的航向角
+     *
+     * @param {__esri.Geometry} geometry
+     * @param {string} [direction='north']
+     * @returns
+     * @memberof sketchViewTool
+     */
+    calculateHeading(geometry: __esri.Geometry, direction?: string): number;
+    /**
+     * 计算路径的航向角
+     *
+     * @param {number[][]} path 路径
+     * @param {string} [direction='north'] 方向
+     * @returns
+     * @memberof sketchViewTool
+     */
+    calculatePointHeading(path: number[][], direction?: string): number;
+    drawPolylinePoint(drawStartGraphic: __esri.Geometry, parentId: string, actions?: string): void;
+    updatePpolylinePoint(drawStartGraphic: Graphic[]): void;
+    delPpolylinePoint(drawStartGraphic: Graphic[]): void;
+    /**
+     * 添加或者更新标记点
+     *
+     * @param {string} text 标记点的文本
+     * @param {ITPoint} point 标记点的坐标
+     * @param {string} id 标记点的id
+     * @param {*} [attributes={}] 标记点的属性
+     * @returns
+     * @memberof sketchViewTool
+     */
+    addOrUpdateMarkPoint(text: string, point: ITPoint, id: string, attributes?: any): void;
+    /**
+     * 获取图形的点位
+     *
+     * @param {__esri.Geometry} geometry
+     * @returns
+     * @memberof sketchViewTool
+     */
+    getGeometryXY(geometry: __esri.Geometry, index?: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * 创建文本图形
+     *
+     * @param {string} text 文本
+     * @param {{ x: number; y: number }} point 坐标
+     * @param {*} [attributes={}] 属性
+     * @returns
+     * @memberof sketchViewTool
+     */
+    createTextGraphic(text: string, point: {
+        x: number;
+        y: number;
+    }, attributes?: any): Graphic;
+    /**
+     *  获取当前绘制的图形的长度
+     * @returns
+     */
+    getDrawgraphicLength(): string | 0;
+    /**
+     *  获取两点的角度
+     *
+     * @param {ITPoint} startPoint
+     * @param {ITPoint} endPoint
+     * @returns
+     * @memberof SketchView
+     */
+    getAngle(startPoint: ITPoint, endPoint: ITPoint): number;
+    /**
+     * 获取两点的方位角
+     *
+     * @param {ITPoint} startPoint
+     * @param {ITPoint} endPoint
+     * @returns
+     * @memberof sketchViewTool
+     */
+    getbearing(startPoint: ITPoint, endPoint: ITPoint): number;
+    /**
+     *  获取两点的距离
+     * @param startPoint
+     * @param endPoint
+     * @param units
+     * @returns
+     */
+    getPointLength(paths: number[][], units?: LinearUnits): number;
+    /**
+     * 获取多个点的中心点
+     *
+     * @param {ITPoint[]} points
+     * @returns
+     * @memberof sketchViewTool
+     */
+    featureCollection(points: ITPoint[]): turf.helpers.Feature<turf.helpers.Point, turf.helpers.Properties>;
+    /**
+     * 获取两点的中心点
+     *
+     * @param {ITPoint} startPoint
+     * @param {ITPoint} endPoint
+     * @returns
+     * @memberof sketchViewTool
+     */
+    midpoint(startPoint: ITPoint, endPoint: ITPoint): turf.helpers.Feature<turf.helpers.Point, turf.helpers.Properties>;
+    /**
+     * 获取方向
+     *
+     * @param {ITPoint} startPoint 起点
+     * @param {ITPoint} endPoint 终点
+     * @returns
+     * @memberof SketchView
+     */
+    getDirection(startPoint: ITPoint, endPoint: ITPoint): 0 | 1 | 3 | 2;
+    findLayerById(id: string): __esri.Layer;
+    /**
+     * 开启图层捕捉
+     */
+    turnonlayerSnap(): void;
+    /**
+     * 关闭图层捕捉
+     */
+    turnofflayerSnap(): void;
+    setDimensionType(Type: dimensionTypeFace): void;
+    /**
+     *  删除指定的图形
+     * @param graphic 删除指定的图形
+     */
+    remove(graphic: any): void;
+    destroy(): void;
+}
+export {};

package/lib/src/gis-map/utils/sketchViewTool.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@arcgis/core/layers/GraphicsLayer"),b=require("@arcgis/core/widgets/Sketch/SketchViewModel"),G=require("@arcgis/core/widgets/Sketch"),M=require("@arcgis/core/geometry/support/webMercatorUtils.js"),D=require("@arcgis/core/geometry/geometryEngine.js"),m=require("@arcgis/core/Graphic.js"),f=require("@arcgis/core/geometry/Polyline.js"),L=require("@turf/turf");function y(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const p=y(M),w=y(D),c=y(L),T={maxAllowedGraphics:0,GraphicsLayer:{},sketchvisibleElements:{},sketchPosition:"top-left",defaultsketchVisible:!0,sketchViewModelItemSymbol:{}},x={type:"simple-line",color:"#556DEA",width:2},k={type:"simple-fill",color:[227,139,79,.4],outline:{color:[255,255,255],width:1}};class S{constructor(t,e){this.isDraw=!1,this.drawStartGraphicId=null,this.drawPointGraphic=new Map,this.dimensionType=null,this.viewer=t,this.options={...T,...e},this.graphicsLayer=new u({...this.options.GraphicsLayer}),this.TextgraphicsLayer=new u,this.viewer.map.layers.add(this.graphicsLayer),this.viewer.map.layers.add(this.TextgraphicsLayer),this.init()}init(){this.sketchViewModel=new b({layer:this.graphicsLayer,view:this.viewer,updateOnGraphicClick:!0,polylineSymbol:x,polygonSymbol:k,...this.options.sketchViewModelItemSymbol});const t=this.findLayerById("TrafficToolMarkings"),e=[];t&&e.push({layer:t,enabled:!0}),this.sketch=new G({view:this.viewer,viewModel:this.sketchViewModel,layer:this.graphicsLayer,visible:this.options.defaultsketchVisible,snappingOptions:{enabled:!0,featureSources:e}}),this.sketch.visibleElements={...this.options.sketchvisibleElements},this.viewer.ui.add(this.sketch,this.options.sketchPosition);const i=this;this.viewer.on("pointer-move",function(s){const r={x:s.x,y:s.y};if(i.isDraw&&i.dimensionType=="distance"){i.tipsDom||(i.tipsDom=i.createDom());const o=i.getDrawgraphicLength();i.tipsDom.innerText=`${o}米`,i.tipsDom.style.left=`${r.x}px`,i.tipsDom.style.top=`${r.y+3}px`,i.tipsDom.style.pointerEvents="none"}})}on(t){const e=this;this.sketch.on("create",function(i){e.onCreate(i,t)}),this.sketch.on("update",function(i){e.onUpdate(i,t)}),this.sketch.on("delete",function(i){e.onDelete(i,t)}),this.sketch.on("redo",function(i){console.log("redo",i),t&&t("redo","complete",i)}),this.sketch.on("undo",function(i){console.log("undo",i),t&&t("undo","complete",i)})}onCreate(t,e){if(console.log("create",t),this.drawStartGraphicId||(this.drawStartGraphicId=new Date().getTime().toString()),t.graphic.getAttribute("id")||(t.graphic.setAttribute("type","draw"),t.graphic.setAttribute("id",this.drawStartGraphicId)),t.state==="start"&&t.graphic.geometry.type==="polyline"&&(this.isDraw=!0,this.drawStartGraphic=p.webMercatorToGeographic(t.graphic.geometry),this.dimensionType=="distance")){const i=this.getGeometryXY(this.drawStartGraphic,0),s=`${this.drawStartGraphicId}-start`;this.addOrUpdateMarkPoint("起点",i,s)}if(t.state==="active"&&t.graphic.geometry.type==="polyline"){const i=p.webMercatorToGeographic(t.graphic.geometry),s=this.drawStartGraphicId;this.dimensionType=="distance"&&(this.drawPolylinePoint(i,s),this.drawStartGraphic=i)}if(t.state==="complete"&&t.graphic.geometry.type==="polyline"&&this.dimensionType=="distance"){const i=this.getDrawgraphicLength(),s=`${this.drawStartGraphicId}-end`,r=p.webMercatorToGeographic(t.graphic.geometry),o=r.paths[0],n=this.getGeometryXY(r,o.length-1);this.addOrUpdateMarkPoint(`总长度：${i}米`,n,s),this.drawStartGraphic=null,this.removeDom(),this.isDraw=!1,this.drawStartGraphicId=null}t.state==="cancel"&&t.graphic.geometry.type==="polyline"&&this.onCreateToCancel(),e&&e("create",t.state,t.graphic)}onCreateToCancel(){this.removeDom(),this.isDraw=!1,this.drawStartGraphic=null;const t=this.drawStartGraphicId;this.drawPointGraphic.forEach((e,i)=>{new RegExp(`^${t}-`).test(i)&&(this.TextgraphicsLayer.remove(e),this.drawPointGraphic.delete(i))}),this.drawStartGraphicId=null}onUpdate(t,e){console.log("update",t),this.updatePpolylinePoint(t.graphics.filter(i=>i.geometry.type==="polyline")),e&&e("update",t.state,t.graphics)}onDelete(t,e){console.log("delete",t),this.delPpolylinePoint(t.graphics.filter(i=>i.geometry.type==="polyline")),e&&e("delete","complete",t.graphics)}addpolyline(t){const e=[],i=x,s={type:"draw",id:new Date().getTime().toString()};t.map(r=>{e.push(this.createPolylineGraphic(r,i,{...s}))}),this.graphicsLayer.addMany(e)}createPolylineGraphic(t,e,i){const s=new f({paths:[t]}),r=p.geographicToWebMercator(s);return new m({geometry:r,symbol:e,attributes:i})}createDom(){const t=document.createElement("div");t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.width="100px",t.style.height="80px",t.style.zIndex="999",t.style.display="flex",t.style.justifyContent="center",t.style.alignItems="center",t.style.color="#fff",t.style.fontSize="20px",t.style.fontWeight="bold",t.innerText="";const e=document.getElementsByClassName("esri-view-root");if(e.length>0)return e[0].appendChild(t),t}removeDom(){this.tipsDom&&(this.tipsDom.remove(),this.tipsDom=null)}sketchCreate(t,e){this.sketchViewModel.create(t,e)}sketchCancel(){this.sketchViewModel.cancel()}getCalculateDistance(t="meters"){const e=[];return this.graphicsLayer.graphics.map(i=>{i.geometry.type==="polyline"&&e.push(this.calculateDistance(i.geometry,t))}),e}getCalculateHeading(t="north"){const e=[];return this.graphicsLayer.graphics.map(i=>{i.geometry.type==="polyline"&&e.push(this.calculateHeading(i.geometry,t))}),e}getAllPolylineGraphicPath(t="meters"){const e=[];return this.graphicsLayer.graphics.map(i=>{i.geometry.type==="polyline"&&e.push({paths:p.webMercatorToGeographic(i.geometry).paths[0],distance:this.calculateDistance(i.geometry,t)})}),e}close(){this.sketch.visible=!1}show(){this.sketch.visible=!0}removeAll(){this.graphicsLayer.removeAll(),this.TextgraphicsLayer.removeAll(),this.drawPointGraphic.clear()}calculateDistance(t,e="meters"){return w.geodesicLength(t,e)}calculateHeading(t,e="north"){const s=p.webMercatorToGeographic(t).paths[0];return this.calculatePointHeading(s,e)}calculatePointHeading(t,e="north"){const i={longitude:t[0][0],latitude:t[0][1]},s={longitude:t[t.length-1][0],latitude:t[t.length-1][1]},r=i.longitude,o=i.latitude,n=s.longitude,a=s.latitude,h=n-r,g=Math.sin(h)*Math.cos(a),P=Math.cos(o)*Math.sin(a)-Math.sin(o)*Math.cos(a)*Math.cos(h);let l=(Math.atan2(g,P)*(180/Math.PI)+360)%360;return e==="east"?l=(l+90)%360:e==="south"?l=(l+180)%360:e==="west"&&(l=(l+270)%360),l}drawPolylinePoint(t,e,i="add"){const s=t==null?void 0:t.paths[0],r=[];for(let o=0;o<s.length-1;o++){const n=s[o];r.push([...n]);const a={x:n[0],y:n[1]};if(o==0){i=="update"&&this.addOrUpdateMarkPoint("起点",a,`${e}-start`);continue}const h=`${e}-${o+1}`,g=this.getPointLength(r,"meters");this.addOrUpdateMarkPoint(`${g.toFixed(2)}米`,a,h)}if(i=="update"&&s.length>1){const o=this.getGeometryXY(t,s.length-1);r.push([o.x,o.y]);const n=this.getPointLength(r,"meters");this.addOrUpdateMarkPoint(`总长度：${n.toFixed(2)}米`,o,`${e}-end`)}}updatePpolylinePoint(t){for(let e=0;e<t.length;e++){console.log(t[e]);const i=t[e].getAttribute("id"),s=p.webMercatorToGeographic(t[e].geometry);this.drawPolylinePoint(s,i,"update")}}delPpolylinePoint(t){var e;for(let i=0;i<t.length;i++){const s=t[i].getAttribute("id"),r=`${s}-start`,o=`${s}-end`,n=[r,o];(e=t[i].geometry)==null||e.paths[0].map((a,h)=>{n.push(`${s}-${h+1}`)}),n.map(a=>{const h=this.drawPointGraphic.get(a);h&&(this.TextgraphicsLayer.remove(h),this.drawPointGraphic.delete(a))})}}addOrUpdateMarkPoint(t,e,i,s={}){if(this.drawPointGraphic.has(i)){const o=this.drawPointGraphic.get(i);this.TextgraphicsLayer.remove(o);const n=this.createTextGraphic(t,e,{...s,id:i});this.drawPointGraphic.set(i,n),this.TextgraphicsLayer.add(n);return}const r=this.createTextGraphic(t,e,{...s,id:i});this.drawPointGraphic.set(i,r),this.TextgraphicsLayer.add(r)}getGeometryXY(t,e=0){const i=t==null?void 0:t.paths[0];return{x:i[e][0],y:i[e][1]}}createTextGraphic(t,e,i={}){return new m({geometry:{type:"point",x:e.x,y:e.y},symbol:{type:"text",text:t,color:"white",haloColor:"black",haloSize:"1px",xoffset:3,yoffset:3},attributes:{...i}})}getDrawgraphicLength(){return this.drawStartGraphic?this.calculateDistance(this.drawStartGraphic,"meters").toFixed(2):0}getAngle(t,e){const i=e.x-t.x,s=e.y-t.y;return Math.atan2(s,i)*180/Math.PI}getbearing(t,e){return c.bearing(c.point([t.x,t.y]),c.point([e.x,e.y]))}getPointLength(t,e="meters"){const i=new f({paths:[t]});return w.geodesicLength(i,e)}featureCollection(t){const e=c.featureCollection(t.map(s=>c.point([s.x,s.y])));return c.center(e)}midpoint(t,e){return c.midpoint(c.point([t.x,t.y]),c.point([e.x,e.y]))}getDirection(t,e){const i=e.x-t.x,s=e.y-t.y,o=Math.atan2(s,i)*180/Math.PI;return o>=-45&&o<=45?0:o>45&&o<=135?1:o>135||o<=-135?2:3}findLayerById(t){return this.viewer.map.findLayerById(t)}turnonlayerSnap(){this.sketchViewModel.snappingOptions.enabled=!0}turnofflayerSnap(){this.sketchViewModel.snappingOptions.enabled=!1}setDimensionType(t){this.dimensionType=t}remove(t){this.graphicsLayer.remove(t)}destroy(){var t,e;this.viewer.map.remove(this.graphicsLayer),this.viewer.map.remove(this.TextgraphicsLayer),(t=this.sketch)==null||t.destroy(),(e=this.sketchViewModel)==null||e.destroy()}}exports.default=S;

package/lib/src/gis-map/utils/syncMapView.d.ts

@@ -0,0 +1,43 @@
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+export default class syncMapView {
+    private mainMapView;
+    private targetMapViews;
+    private syncHandles;
+    private isSync;
+    constructor(targetMapViews: MapView[] | SceneView[]);
+    /**
+     * 设置是否同步
+     *
+     * @param {boolean} isSync
+     * @memberof syncMapView
+     */
+    setSync(isSync: boolean): void;
+    /**
+     *设置主视图
+     *
+     * @private
+     * @param {(MapView | SceneView)} mainMapView
+     * @memberof syncMapView
+     */
+    private setMainMapView;
+    /**
+     *开始同步视角
+     *
+     * @private
+     * @memberof syncMapView
+     */
+    private startSync;
+    /**
+     * 暂停同步视角
+     *
+     * @memberof syncMapView
+     */
+    pauseSync(): void;
+    /**
+     *销毁同步
+     *
+     * @memberof syncMapView
+     */
+    destroy(): void;
+}

package/lib/src/gis-map/utils/syncMapView.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class e{constructor(s){if(this.syncHandles=[],this.isSync=!1,s.length<2)throw new Error("At least two viewers are required for synchronization.");this.mainMapView=null,this.targetMapViews=s,s.forEach(i=>{i.on("drag",()=>{this.setMainMapView(i)})})}setSync(s){this.isSync=s}setMainMapView(s){this.mainMapView!==s&&(this.pauseSync(),this.mainMapView=s,this.startSync())}startSync(){this.syncHandles=this.targetMapViews.map(s=>s.watch("viewpoint",i=>{this.mainMapView===s&&this.isSync&&this.targetMapViews.forEach(t=>{t!==s&&(t.viewpoint=i.clone())})}))}pauseSync(){this.syncHandles.forEach(s=>{s.remove()}),this.syncHandles=[]}destroy(){this.pauseSync(),this.mainMapView=null,this.targetMapViews=[]}}exports.default=e;

package/lib/src/gis-map/utils/traffic-flow.d.ts

@@ -0,0 +1,66 @@
+import View from '@arcgis/core/views/View';
+export default class TrafficFlow {
+    private view;
+    private mapConfig;
+    private objectsLayer;
+    private webSocket;
+    /** 交通对象最大坚持帧数（连续多少个数据包没有数据就删除） */
+    private readonly maxMissCount;
+    /** 记录每个交通对象连续多少个数据包没收到数据 */
+    private objectMissCount;
+    /** 是否显示车牌号码 */
+    private showVehiclePlate;
+    private showLog;
+    constructor(view: View);
+    /**
+     * 开始显示交通流数据
+     * @param url
+     * @param options
+     */
+    connectTrafficFlow(url: string, options?: any): void;
+    /**
+     * 停止显示交通流数据
+     */
+    disconnectTrafficFlow(): void;
+    /**
+     * 控制车辆号牌是否显示
+     * @param visible
+     */
+    toggleVehiclePlate(visible: boolean): void;
+    private focusVehNo;
+    private handleTrafficFlowData;
+    /**
+     * 新增交通对象
+     * @param objects
+     */
+    private addTrafficObjects;
+    /**
+     * 更新交通对象
+     * @param objects
+     */
+    private updateTrafficObjects;
+    /**
+     * 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
+     * @param vehTrack
+     * @returns
+     */
+    private createCIMSymbol;
+    /**
+     * 删除交通对象
+     * @param ids
+     */
+    private deleteTrafficObjects;
+    private buildVehicleTrackData;
+    /**
+     * 根据车身颜色属性返回对应的车辆图标
+     * @param carColor
+     * @returns
+     */
+    private getCarPic;
+    /**
+     * 根据号牌颜色属性获取填充色和背景色
+     * @param plateColor
+     * @returns
+     */
+    private getPlateFontColor;
+}

package/lib/src/gis-map/utils/traffic-flow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@arcgis/core/Graphic"),b=require("@arcgis/core/geometry"),f=require("@arcgis/core/layers/GraphicsLayer"),y=require("../stores/index.js"),d=require("./common-utils.js");class m{constructor(o){this.maxMissCount=2,this.objectMissCount=new Map,this.showVehiclePlate=!0,this.showLog=!1,this.focusVehNo="",this.view=o;const e=y.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.objectsLayer=new f,this.view.map.add(this.objectsLayer)}connectTrafficFlow(o,e){var t;this.showVehiclePlate=(e==null?void 0:e.showVehiclePlate)!==!1,this.showLog=(e==null?void 0:e.showTraceLog)===!0,(t=this.webSocket)==null||t.close(),this.webSocket=new WebSocket(o),this.webSocket.onopen=()=>{console.log("websocket连接成功"),this.objectMissCount.clear()},this.webSocket.onclose=()=>{console.log("websocket连接关闭")},this.webSocket.onmessage=a=>{this.handleTrafficFlowData(a.data)}}disconnectTrafficFlow(){var o;(o=this.webSocket)==null||o.close(),this.objectsLayer.removeAll(),this.objectMissCount.clear()}toggleVehiclePlate(o){this.showVehiclePlate=o}handleTrafficFlowData(o){const e=d.default.unzip(o);if(!e)return;const t=[],a=[],n=[],l=JSON.parse(e);this.showLog&&console.log(l);const i=l.data||l.rtPositionList;if(!i||i.length===0)return;const h=new Date(l.jgsj).getTime();for(const r of i){const s=this.buildVehicleTrackData(r,h);s&&(this.objectMissCount.has(s.ptcId)?t.push(s):a.push(s),this.objectMissCount.set(s.ptcId,0))}for(const r of this.objectMissCount){const s=r[0];let c=r[1];i.findIndex(u=>u.vehno===s)<0&&(c++,this.objectMissCount.set(s,c),c===this.maxMissCount&&n.push(s))}for(const r of n)this.objectMissCount.delete(r);this.addTrafficObjects(a),this.updateTrafficObjects(t),this.deleteTrafficObjects(n)}addTrafficObjects(o){const e=o.map(t=>new p({geometry:new b.Point({longitude:t.x,latitude:t.y}),symbol:this.createCIMSymbol(t),attributes:t}));this.objectsLayer.addMany(e)}updateTrafficObjects(o){o.forEach(e=>{const t=this.objectsLayer.graphics.find(a=>a.getAttribute("ptcId")===e.ptcId);t&&(t.geometry=new b.Point({longitude:e.x,latitude:e.y}),t.symbol=this.createCIMSymbol(e))})}createCIMSymbol(o){const e=this.getPlateFontColor(o.plateColor);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:30,rotation:o.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(o.vehicleColor).pic}`}]}}}}deleteTrafficObjects(o){o.forEach(e=>{const t=this.objectsLayer.graphics.find(a=>a.getAttribute("ptcId")===e);t&&this.objectsLayer.remove(t)})}buildVehicleTrackData(o,e){const{hpys:t,csys:a,lng:n,angle:l,hphm:i,lat:h,cx:r}=o,s=o.vehno||o.vehNo;if(!s)return;let c;if(i&&i!=="0"&&i!==0?c=i.includes("-")?i.split("-")[1]:i:c=s.includes("-")?s.split("-")[1]:s,!["1","2","3","4","5","6",1,2,3,4,5,6].includes(r)){console.log("车辆类型错误",r);return}return{ptcId:s,timestamp:e,localTimestamp:e,x:n,y:h,ptcType:Number(r),heading:l,vehicleColor:a||"z",plateColor:i?t:"99",showName:c,vehicleType:99}}getCarPic(o){if(this.view.zoom<=15)return{pic:"point.png",color:[128,128,128,255]};let e="grey",t=[128,128,128,255];switch(o.toLowerCase()){case"a":e="white",t=[200,200,200,255];break;case"b":e="grey",t=[128,128,128,255];break;case"c":e="yellow",t=[255,215,0,255];break;case"d":e="pink",t=[255,182,193,255];break;case"e":e="red",t=[255,0,0,255];break;case"f":e="purple",t=[128,0,128,255];break;case"g":e="green",t=[124,252,0,255];break;case"h":e="blue",t=[0,191,255,255];break;case"i":e="brown",t=[244,164,96,255];break;case"j":e="black",t=[0,0,0,255];break}return{pic:e+".png",color:t}}getPlateFontColor(o){let e=[255,255,255,255],t=[169,169,169,255];switch(o){case 0:e=[0,0,0,255],t=[255,255,255,255];break;case 1:e=[0,0,0,255],t=[244,164,96,255];break;case 2:e=[255,255,255,255],t=[65,105,225,255];break;case 3:e=[255,255,255,255],t=[0,0,0,255];break;case 15:e=[244,164,96,255],t=[0,250,154,255];break;case 16:e=[0,0,0,255],t=[0,250,154,255];break}return{fillColor:e,backgroundColor:t}}}exports.default=m;

package/lib/src/index.d.ts

@@ -0,0 +1 @@
+export * from './gis-map';

package/lib/src/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./gis-map/index.js");exports.GisMap=e.GisMap;

package/lib/src/types/index.d.ts

@@ -0,0 +1,142 @@
+/**
+ * 路口象限，路口中心点为坐标轴原点，正北方向为0°。
+ * 225° ~ 315°：西象限。
+ * 315° ~ 45°：北象限。
+ * 45° ~ 135°：东象限。
+ * 135° ~ 225°：南象限。
+ */
+export declare enum QuadrantCode {
+    West = "1",
+    North = "2",
+    East = "3",
+    South = "4"
+}
+export interface IResult {
+    status: number;
+    message: string;
+    result?: any;
+}
+export interface IVehicleTrack {
+    time?: string;
+    timestamp: number;
+    localTimestamp: number;
+    crossId?: string;
+    ptcId: string;
+    x: number;
+    y: number;
+    ptcType: number;
+    vehicleType: number;
+    heading: number;
+    vehicleColor: number | string;
+    plateColor: number;
+    showName?: string;
+    state?: string;
+    fixAngle?: number;
+    speed?: number;
+    plateNo?: string;
+}
+export interface ILaneNumberParams {
+    lanes: {
+        crossId: string;
+        laneNumber: string;
+        stopLineCenter: number[];
+        laneDirection?: number;
+    }[];
+}
+export interface ISetMapCenterParams {
+    center: number[];
+    camera?: {};
+    zoom?: number;
+    duration?: number;
+}
+export interface ILookAtParams {
+    center: number[];
+    height: number;
+    tilt?: number;
+    heading?: number;
+    duration?: number;
+}
+export interface IStartCrossBufferParam {
+    crossId: string;
+    crossCenter: number[];
+    bufferRadius?: number;
+}
+export interface IPoint {
+    type: string;
+    x: number;
+    y: number;
+    z?: number;
+}
+export interface ILine {
+    type: string;
+    paths: number[][][];
+}
+export interface IPolygon {
+    type: string;
+    rings: number[][][];
+}
+export interface IPointSymbol {
+    type: string;
+    style?: string;
+    url?: string;
+    width?: number;
+    height?: number;
+    horizontalOrigin?: string;
+    verticalOrigin?: string;
+    color?: string;
+    size?: number;
+}
+export interface ILineSymbol {
+    type: string;
+    color?: string | number[];
+    width?: number;
+    height?: number;
+    extrudeHeight?: number;
+    cornerType?: string;
+}
+export interface IPolygonSymbol {
+    type: string;
+    style?: string;
+    color?: string | number[];
+    outline?: {
+        color?: string | number[];
+        width?: number;
+    };
+}
+export interface IOverlay {
+    geometry: IPoint | ILine | IPolygon;
+    id?: string;
+    visible?: boolean;
+    symbol?: IPointSymbol | ILineSymbol | IPolygonSymbol;
+    properties?: any;
+}
+export interface IOverlayParam {
+    type?: string;
+    defaultSymbol?: IPointSymbol | ILineSymbol | IPolygonSymbol;
+    defaultVisible?: boolean;
+    overlays: Array<IOverlay>;
+    visible?: boolean;
+}
+export interface ISetMapCameraParams {
+    crossId: string;
+    zoom?: number;
+    duration?: number;
+}
+export interface IQueueLengthParams {
+    crossNo: string;
+    laneId: number;
+    queueLength: number;
+}
+export interface ITraceRendererInterface {
+    addVehicles(objects: IVehicleTrack[]): void;
+    updateVehicles(objects: IVehicleTrack[]): void;
+    deleteVehicles(idList: string[]): void;
+    clearVehicles(): void;
+    updatePanelContent(contentType: EVehiclePlateState): void;
+}
+export declare enum EVehiclePlateState {
+    None = 0,
+    PlateNumber = 1,
+    Id = 2,
+    Mix = 3
+}

package/lib/src/types/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var o=(r=>(r.West="1",r.North="2",r.East="3",r.South="4",r))(o||{}),u=(r=>(r[r.None=0]="None",r[r.PlateNumber=1]="PlateNumber",r[r.Id=2]="Id",r[r.Mix=3]="Mix",r))(u||{});exports.EVehiclePlateState=u;exports.QuadrantCode=o;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "gisviewer-vue3-arcgis",
+  "version": "1.0.85",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "files": [
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "arcgis",
+    "vue3组件库"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "author": "shi xiao qing",
+  "license": "MIT",
+  "description": "",
+  "typings": "lib/index.d.ts",
+  "dependencies": {
+    "@arcgis/core": "^4.28.6",
+    "@easyest/utils": "1.0.2",
+    "@turf/area": "^6.5.0",
+    "@turf/bearing": "^6.5.0",
+    "@turf/buffer": "^6.5.0",
+    "@turf/destination": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
+    "@turf/intersect": "^6.5.0",
+    "@turf/turf": "6.5.0",
+    "@types/pako": "^2.0.0",
+    "@vitest/coverage-c8": "^0.29.2",
+    "axios": "^1.4.0",
+    "pako": "^2.1.0",
+    "pinia": "^2.0.33",
+    "three": "^0.156.1",
+    "uuid": "^9.0.0",
+    "gl-matrix": "^3.4.3",
+    "pixi.js": "7.3.2"
+  }
+}