### Handle Mouse Control Start Event (JavaScript) Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-event Listens for the 'controlstart' event, which fires when a user begins interacting with the 3D scene using mouse controls such as clicking or rotating. This event can be used to prepare the scene or UI for user input. ```javascript map.on('controlstart', function () { // 鼠标开始操作三维场景后触发,例如点击、旋转等。 }); ``` -------------------------------- ### Creating and Adding Effect Markers Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/effects-marker Illustrates how to create an instance of an effect marker and add it to an effect layer. This example uses the CIRCLE_ROTATE type but can be adapted for others. A callback function can be provided for actions upon successful creation. The marker is then added to the layer using `layer.addMarker()`. ```javascript // 创建一个特效标注 var marker = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.CIRCLE_ROTATE, { x: 12629907.4, y: 2580180.5, height: 1, callback: function(){} }); layer.addMarker(marker); // 将特效marker添加到特效层 ``` -------------------------------- ### Include Unified SDK for Indoor Mode - JavaScript Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-upgrade This snippet shows how to include the unified SDK file for indoor mode in version 3.0. It replaces older specific SDK inclusions with a single, consolidated file. ```html ``` -------------------------------- ### 3D Path Planning Initialization and Drawing Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-routeAnalysis This section details how to initialize the navigation object, set start and end points, and draw the planned route in a 3D scene. It's crucial to call these functions after the 'map.on('loadComplete')' event. ```APIDOC ## POST /websites/esmap_cn_sdk3_0/path-planning ### Description Initializes the navigation object, sets the start and end points for path planning, and draws the calculated route on the 3D map. This process should be triggered after the map has fully loaded. ### Method POST ### Endpoint /websites/esmap_cn_sdk3_0/path-planning ### Parameters #### Request Body - **navi_options** (object) - Optional - Configuration for the navigation line style. - **lineStyle** (object) - Optional - Styles for the navigation line. - **color** (string) - Optional - Color of the navigation line (e.g., '#33cc61'). - **lineType** (string) - Optional - Type of the navigation line (e.g., 'ESARROW'). Refer to 'Drawing Line Annotation' page for more types. - **lineWidth** (number) - Optional - Width of the navigation line. - **offsetHeight** (number) - Optional - Height offset for the navigation line. - **smooth** (boolean) - Optional - Enables smooth transitions for route turns. - **seeThrough** (boolean) - Optional - Makes the line always visible, even through floors. - **noAnimate** (boolean) - Optional - Disables animation effects on the navigation line. - **godEdgeColor** (string) - Optional - Color for the edge of the line. - **godArrowColor** (string) - Optional - Color for the arrows on the line. - **start_point** (object) - Required - Configuration for the starting point. - **name** (string) - Required - Name of the starting point. - **x** (number) - Required - X-coordinate of the starting point. - **y** (number) - Required - Y-coordinate of the starting point. - **fnum** (number) - Required - Floor number. - **height** (number) - Required - Height from the ground. - **url** (string) - Optional - Path to the image marker for the start point. - **size** (number) - Optional - Size of the image marker. - **showLevel** (number) - Optional - Zoom level at which the marker becomes hidden. - **text** (string) - Optional - Text label for the start point. - **textStyle** (object) - Optional - Styling for the text label. - **fontSize** (number) - Optional - Font size of the text. - **fillStyle** (string) - Optional - Fill color of the text. - **imageStyle** (object) - Optional - Styling for the image marker. - **align** (string) - Optional - Alignment of the image (e.g., 'bottom'). - **scale** (number) - Optional - Scaling factor for the image. - **renderOrder** (number) - Optional - Rendering order. - **pickable** (boolean) - Optional - Whether the marker is clickable. - **callback** (function) - Optional - Callback function executed when the marker is created. - **end_point** (object) - Required - Configuration for the ending point (same structure as start_point). ### Request Example ```json { "navi_options": { "lineStyle": { "color": "#33cc61", "lineType": "ESARROW", "lineWidth": 6, "offsetHeight": 0.5, "smooth": true, "seeThrough": false, "noAnimate": false, "godEdgeColor": "#920000", "godArrowColor": "#ff0000" } }, "start_point": { "name": "Start Point 1", "x": 100, "y": 200, "fnum": 1, "height": 10, "url": "./image/start.png", "size": 64, "showLevel": 23 }, "end_point": { "name": "End Point 1", "x": 150, "y": 250, "fnum": 1, "height": 10, "url": "./image/end.png", "size": 64, "showLevel": 23 } } ``` ### Response #### Success Response (200) - **route_result** (object) - Contains the calculated path data. - **navi_descriptions** (array) - Textual descriptions for navigation steps. #### Response Example ```json { "route_result": [ { "point": {"x": 100, "y": 200, "fnum": 1}, "distance": 0, "duration": 0 }, { "point": {"x": 120, "y": 220, "fnum": 1}, "distance": 28.28, "duration": 5 }, { "point": {"x": 150, "y": 250, "fnum": 1}, "distance": 70.71, "duration": 12 } ], "navi_descriptions": [ "Start at your current location.", "Proceed straight for 28 meters.", "Turn slightly right and proceed for 42 meters to reach your destination." ] } ``` ``` -------------------------------- ### Include SDKs for City Mode - JavaScript Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-upgrade Illustrates including the necessary SDK files for city mode in ESMap 3.0. This includes the unified SDK and the `esplugin-tile-3.0.min.js` plugin for tile base map functionality. ```html // 引入统一SDk文件 // 需使用城市三维场景的瓦片底图功能,添加引入以下文件 ``` -------------------------------- ### Get Floor Object by Number (JavaScript) Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESBuilding Provides an example of how to retrieve a specific floor object from a building using its floor number. The function returns an object representing the floor. ```javascript var floor = building.getFloor(1) ``` -------------------------------- ### ESLineMarker Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESLineMarker Initializes a new ESLineMarker instance with the provided configuration. ```APIDOC ## new ESLineMarker(config) ### Description Creates a line marker. ### Method `new` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **config** (object) - Required - Configuration object for the line marker. - **id** (number | string) - Required - The ID of the line marker. - **points** (Array) - Required - The collection of points defining the line marker. - **style** (object) - Required - The style object for the line marker. ### Request Example ```json { "config": { "id": 123, "points": [[10, 20], [30, 40]], "style": { "color": "#FF0000", "width": 2 } } } ``` ### Response #### Success Response (200) This constructor does not return a value, it initializes the object. #### Response Example N/A ``` -------------------------------- ### ESNavigation Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESNavigation Initializes a new ESNavigation object with optional configuration settings. ```APIDOC ## new ESNavigation(configs) ### Description Creates a navigation object. ### Method Constructor ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **configs** (object) - Optional - Configuration object for the navigation. - **appKey** (string) - Optional - The appKey for calling Gaode 3D scene API. - **speed** (number) - Optional - Simulated navigation speed. Defaults to 4. - **followAngle** (boolean) - Optional - Whether to automatically rotate the 3D scene during simulated navigation. Defaults to true. - **followPosition** (boolean) - Optional - Whether to automatically follow the viewpoint during simulated navigation. Defaults to true. - **audioPlay** (boolean) - Optional - Whether to play audio. Defaults to false. - **mode** (number) - Optional - Navigation mode (1: Pedestrian, 2: Vehicle). Defaults to 1. - **lineStyle** (object) - Optional - Style for the navigation line. - **scaleAnimate** (boolean) - Optional - Whether to enable zoom animation. Defaults to true. - **locationMarkerUrl** (string) - Required - URL of the location marker icon. - **locationMarkerSize** (number) - Optional - Size of the location marker icon. Defaults to 50. ### Request Example ```json { "configs": { "appKey": "YOUR_APP_KEY", "speed": 5, "followAngle": false, "followPosition": false, "audioPlay": true, "mode": 2, "lineStyle": {}, "scaleAnimate": false, "locationMarkerUrl": "path/to/marker.png", "locationMarkerSize": 60 } } ``` ### Response #### Success Response (200) - **ESNavigation object** - The newly created navigation object. #### Response Example ```json { "message": "ESNavigation object created successfully." } ``` ``` -------------------------------- ### Get Building Object Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Retrieve the building object for indoor scenes. You can get the default building or specify a building by its ID. ```APIDOC ## Get Building Object ### Description Retrieve the building object for indoor scenes. You can get the default building or specify a building by its ID. ### Method JavaScript ### Endpoint N/A (Client-side function) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Method 1: Get the default Building object in indoor mode let building = map.getBuilding(); // Method 2: Get Building object by scene ID let building = map.getBuildingById('test666'); ``` ### Response #### Success Response (200) - **building** (object) - The building object. #### Response Example ```json { "building": "[Building Object]" } ``` ``` -------------------------------- ### Set Navigation Start and End Points Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-navi This code segment illustrates how to define the starting and ending points for navigation. It includes parameters for point names, coordinates, floor number, height, custom marker images, and visibility settings. These methods are typically called after initializing the navigation object. ```javascript // 确定起点 avi.setStartPoint({ name: '起点1', x: map.center.x + 10, y: map.center.y + 10, fnum: 1, // 楼层 height: 10, // 起点距离地面的高度 url: './image/start.png', // 图片路径, size: 64, // 图片尺寸 showLevel: 23, // 到达三维场景缩放等级隐藏导航对象 // text: '起点位置', // 场景中展示的文字内容 // textStyle:{ // fontSize: 20, // 字体大小 // fillStyle: '#ff0000', // 填充色 // } // imageStyle:{ // align:'bottom' // 图片位置 // scale: 1, // 单独设置图片缩放比例 // }, // renderOrder: 79, // 渲染等级 // pickable: false, // 是否可被点击 // callback: (marker)=> { // console.log(marker) // 输出起点实例 // } }); // 确定终点 avi.setEndPoint({ name: '终点1', x: map.center.x - 10, y: map.center.y - 10, fnum: 1, height: 10, url: './image/end.png', size: 64, showLevel: 23, // text: '终点位置', // textStyle:{ // fontSize: 20, // fillStyle: '#ff0000', // } // imageStyle:{ // align:'bottom' // scale: 1, // }, // renderOrder: 79, // pickable: false, // callback: (marker)=> { // console.log(marker) // } }); ``` -------------------------------- ### ESImageMarker Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESImageMarker Initializes a new ESImageMarker instance with specified options. ```APIDOC ## new ESImageMarker(options) ### Description Creates an image marker. ### Method Constructor ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body ##### options (object) - Required Parameters for the image marker. ###### Properties - **url** (string) - Required - The URL of the image. - **x** (number) - Required - The x-coordinate. - **y** (number) - Required - The y-coordinate. - **z** (number) - Required - The z-coordinate. - **showLevel** (number) - Required - The display level. - **size** (number) - Required - The size of the image. ### Request Example ```json { "url": "http://example.com/image.png", "x": 100, "y": 200, "z": 10, "showLevel": 5, "size": 50 } ``` ### Response #### Success Response (200) This is a constructor, no direct response. #### Response Example N/A ``` -------------------------------- ### ESControlOptions Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESControlOptions Initializes a new instance of ESControlOptions with specified configuration options. ```APIDOC ## new ESControlOptions(options) ### Description Initializes a new instance of ESControlOptions with specified configuration options. ### Method Constructor ### Endpoint N/A ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body ##### `options` (object) - Required Control configuration options. ###### Properties - **`size`** (string) - Optional - Control size. - **`position`** (esmap.ESControlPositon) - Optional - Control position. - **`offset`** (object) - Optional - Control offset. ###### Properties - **`x`** (number) - Optional - Control offset x. - **`y`** (number) - Optional - Control offset y. - **`expandSpan`** (string) - Optional - Spacing when the floor expands. ``` -------------------------------- ### Get Indoor Building Floor Height Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Retrieve the height of a specific floor within an indoor building. ```APIDOC ## Get Indoor Building Floor Height ### Description Retrieve the height of a specific floor within an indoor building. ### Method JavaScript ### Endpoint N/A (Client-side method) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const floorHeight = building.getFloorHeight(fnum); // Pass the floor number (fnum) ``` ### Response #### Success Response (200) - **floorHeight** (number) - The height of the specified floor. #### Response Example ```json { "floorHeight": 3.5 } ``` ``` -------------------------------- ### Get Floor Boundary Data Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-ordinary Obtain the boundary data points for a specified floor within an indoor building. ```APIDOC ## Get Floor Boundary Data ### Description Obtain the boundary data points for a specified floor within an indoor building. ### Method JavaScript (Function call) ### Endpoint N/A (Client-side function call) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const floorNumber = 1; // Example: 1st floor const boundaryPoints = building.getFloorBounds(floorNumber)[0].points; ``` ### Response - **boundaryPoints** (Array) - An array of points defining the floor boundary. #### Success Response (200) - **boundaryPoints** (Array) - The boundary points for the specified floor. #### Response Example ```json { "boundaryPoints": [ {"x": 10, "y": 20}, {"x": 30, "y": 40} // ... more points ] } ``` ``` -------------------------------- ### ESCardMarker Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESCardMarker Creates a new ESCardMarker instance with the specified options. ```APIDOC ## new ESCardMarker(options) ### Description Creates a card marker. ### Method Constructor ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **options** (object) - Required - Options for the ESCardMarker. - **id** (string) - Optional - Marker ID. - **name** (string) - Optional - Marker name. - **url** (string) - Optional - Marker image URL. - **x** (string) - Optional - Marker x-coordinate. - **y** (string) - Optional - Marker y-coordinate. - **scale** (number) - Optional - Marker scale. - **showLevel** (number | Array) - Optional - Display level, can be an array (range display) or a number (display at a specific level). - **offsetHeight** (number) - Optional - Marker height offset. - **opacity** (number) - Optional - Marker opacity. ### Request Example ```json { "options": { "id": "marker1", "name": "Example Marker", "url": "http://example.com/image.png", "x": "100", "y": "200", "scale": 1.0, "showLevel": 5, "offsetHeight": 10, "opacity": 0.8 } } ``` ### Response #### Success Response (200) This constructor does not return a value directly, but initializes an ESCardMarker object. #### Response Example N/A ``` -------------------------------- ### ESMap Search Functionality Examples Source: https://www.esmap.cn/docs/sdk3.0/esmap.module_ESMapUtil Demonstrates various ways to use the `esmap.ESMapUtil.searchJson` function for searching data. It covers searching by name, ID, and a combination of building ID, category, and keyword. It also illustrates advanced keyword matching techniques like fuzzy search, exact match, inclusion, exclusion, and pattern matching for beginnings and endings of strings, along with logical operators for combining search criteria. ```javascript esmap.ESMapUtil.searchJson({ name: "电梯", onComplete: (e)=>console.log(e) }); esmap.ESMapUtil.searchJson({ id: 2900, onComplete: (e)=>console.log(e) }); esmap.ESMapUtil.searchJson({ bid: "test666", keyword: "车位", typeID: 40004, onComplete: (e)=>console.log(e) }); esmap.ESMapUtil.searchJson({ keyword: "办事处$ | ^管理处", onComplete: (e)=>console.log(e) }); ``` -------------------------------- ### Get Indoor Building Floor Height Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-ordinary Retrieve the height of a specific floor within an indoor building model. ```APIDOC ## Get Indoor Building Floor Height ### Description Retrieve the height of a specific floor within an indoor building model. ### Method JavaScript (Function call) ### Endpoint N/A (Client-side function call) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const floorHeight = building.getFloorHeight(fnum); // Pass the floor number (fnum) ``` ### Response - **floorHeight** (number) - The height of the specified floor. #### Success Response (200) - **floorHeight** (number) - The height of the specified floor. #### Response Example ```json { "floorHeight": 3.5 // Example floor height in meters } ``` ``` -------------------------------- ### Get Floor Boundary Data Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Obtain the boundary data points for a specified floor within an indoor building. ```APIDOC ## Get Floor Boundary Data ### Description Obtain the boundary data points for a specified floor within an indoor building. ### Method JavaScript ### Endpoint N/A (Client-side method) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const floorNumber = 1; // Example: 1st floor const boundaryPoints = building.getFloorBounds(floorNumber)[0].points; ``` ### Response #### Success Response (200) - **boundaryPoints** (array) - An array of points defining the floor boundary. #### Response Example ```json { "boundaryPoints": [ {"x": 10, "y": 20}, {"x": 30, "y": 40} ] } ``` ``` -------------------------------- ### Create ESPolygonMarker (JavaScript) Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESPolygonMarker Demonstrates how to create a new ESPolygonMarker instance with various configuration options. This includes setting the marker's ID, name, color, opacity, height, and defining its shape and dimensions using the 'points' property. ```javascript var polygon = new esmap.ESPolygonMarker({ id: 'polygon1', name: '多边形标注', color: '#ff0000', opacity: 0.5, height: 0, points: { type: "rectangle", center:this.map.center, width: 30, height: 30 }) ``` -------------------------------- ### Get Floor Boundary Data Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Obtain the boundary points for a specified floor in an indoor building. This is useful for geometric analysis or rendering. ```javascript const fnum = 1; building.getFloorBounds(fnum)[0].points // Get boundary points for the specified floor number ``` -------------------------------- ### ESLocationMarker Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESLocationMarker Creates a new ESLocationMarker instance with specified options. ```APIDOC ## new ESLocationMarker(options) ### Description Creates a location marker. ### Method Constructor ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body ##### options (Object) - Required Configuration parameters for the marker. - **x** (Number) - x-coordinate - **y** (Number) - y-coordinate - **url** (String) - Image URL - **name** (String) - Name - **id** (Number) - ID - **size** (Number) - Image size - **height** (Number) - Height - **direction** (Number) - Direction - **spritify** (Boolean) - Whether to use sprite - **fixedAngle** (Boolean) - Whether to fix the angle - **arrow** (Boolean) - Whether to display the arrow - **arrowSize** (Number) - Arrow size - **arrowColor** (String) - Arrow color - **arrowOffset** (Number) - Arrow offset - **seeThrough** (Boolean) - Whether to use perspective - **clip** (Boolean) - Whether to clip - **callback** (function) - Callback function ### Request Example ```json { "x": 100, "y": 200, "url": "http://example.com/marker.png", "name": "My Marker", "id": 1, "size": 32, "height": 10, "direction": 90, "spritify": true, "fixedAngle": false, "arrow": true, "arrowSize": 10, "arrowColor": "#FF0000", "arrowOffset": 5, "seeThrough": false, "clip": false, "callback": function() { console.log('Marker created'); } } ``` ### Response #### Success Response (N/A) This is a constructor, it does not return a value directly but creates an instance. #### Response Example N/A ``` -------------------------------- ### Get Indoor Building Floor Height Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Retrieve the height of a specific floor within an indoor building by providing the floor number. ```javascript building.getFloorHeight(fnum) // Pass the floor number fnum ``` -------------------------------- ### ESTextMarker Constructor Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESTextMarker Creates a new text marker instance with specified options. ```APIDOC ## new ESTextMarker(options) ### Description Creates a text marker. ### Method Constructor ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body ##### options (object) - Required Parameters for the text marker. ###### Properties - **x** (number) - x-coordinate - **y** (number) - y-coordinate - **height** (number) - height - **name** (string) - marker name - **text** (string) - text content - **id** (string) - marker id - **fontsize** (string) - font size - **fillcolor** (string) - font color - **strokecolor** (string) - stroke color - **shadow** (boolean) - whether to enable font shadow - **strokewidth** (string) - stroke width - **showLevel** (number) - display level - **scale** (number) - zoom ratio - **image** (string) - image path - **imageSize** (number) - image size - **imageAlign** (string) - image alignment (left, right, top, bottom) ### Request Example ```json { "x": 100, "y": 100, "height": 50, "name": "MyMarker", "text": "Hello World", "id": "marker1", "fontsize": "16px", "fillcolor": "#FF0000", "strokecolor": "#000000", "shadow": true, "strokewidth": "2px", "showLevel": 1, "scale": 1, "image": "path/to/image.png", "imageSize": 30, "imageAlign": "left" } ``` ### Response #### Success Response (200) None (Constructor does not return a value directly, it initializes an object). #### Response Example None ``` -------------------------------- ### Create ESLayer Instance Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESLayer Demonstrates how to create a new ESLayer instance with a specified layer type. This is the fundamental step to initialize a layer for map objects. ```javascript var layer = new esmap.ESLayer(esmap.ESLayerType.IMAGE_MARKER); ``` -------------------------------- ### Get Indoor Building Object Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-ordinary Retrieve the building object for indoor scenes. This can be done using the default method or by specifying the building ID. ```APIDOC ## Get Indoor Building Object ### Description Retrieve the building object for indoor scenes. This can be done using the default method or by specifying the building ID. ### Method JavaScript (Function calls) ### Endpoint N/A (Client-side function calls) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Method 1: Get the Building object in indoor mode let building = map.getBuilding(); // Method 2: Get the Building object by scene ID let building = map.getBuildingById('test666'); ``` ### Response - **building** (object) - The building object. #### Success Response (200) - **building** (object) - The retrieved building object. #### Response Example ```json { "building": { ... } // Building object details } ``` ``` -------------------------------- ### Vue3: 初始化和销毁三维场景 Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-applet-uniapp 使用 Vue3 的 setup 函数和 onMounted/onUnmounted 生命周期钩子来初始化和销毁 esmap 三维场景。与 Vue2 类似,也使用 MapApplication 类来管理 esmap 实例。 ```javascript ``` -------------------------------- ### Configure Directional and Ambient Lighting Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/effect-edit Sets up lighting in the 3D scene, including replacing existing lights with new configurations and adding new light sources. Parameters include light intensity, direction, and color. ```json { "directLight": [ { "replaceLight": "mainLight", "intensity": 0.3, "direction": { "x": -0.2, "y": 0.71, "z": 0.6 } }, { "color": "#888888", "intensity": 0.7, "direction": { "x": 0, "y": 0.25, "z": 0.5 } } ] } ``` -------------------------------- ### Indoor Building Floor Focus Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-ordinary Manage floor focus within an indoor building. This includes getting floor numbers by name and changing the focused floor. ```APIDOC ## Indoor Building Floor Focus ### Description Manage floor focus within an indoor building. This includes getting floor numbers by name and changing the focused floor. ### Method JavaScript (Function calls and property assignment) ### Endpoint N/A (Client-side function calls) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Get floor number by floor name var fnum = building.getFloorNumByName('F1'); // Method 1: Change focus to a specific floor (hides other floors if multiple are displayed) // fnum must be a number, not a string building.changeFocusFloor(fnum); // Method 2: Change focus to a specific floor (other floors remain visible) building.focusFloorNum = fnum; building.visibleFloorNums = [fnum1, fnum2]; // Set visible floors ``` ### Response N/A (Configuration changes are immediate) #### Success Response (200) N/A #### Response Example N/A ``` -------------------------------- ### Initialize Indoor 3D Scene - JavaScript Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-upgrade Demonstrates initializing an indoor 3D scene using the ESMap 3.0 SDK. Key changes include using `new esmap.ESMap`, specifying `esmap.MapMode.Building`, and using an object for the `center` parameter. Opening the scene now requires `openMapById()`. ```javascript var map = new esmap.ESMap({ mode: esmap.MapMode.Building, container: document.getElementById('map-container'), mapDataSrc: './data/', token: 'escope', center:{ x:123456.111, y:12345.123 } ... }); map.openMapById('test666'); ``` -------------------------------- ### City Scene Camera Zoom Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Adjust the camera zoom level for city scenes. You can get the current zoom level and smoothly transition to a specified level. ```APIDOC ## City Scene Camera Zoom ### Description Adjust the camera zoom level for city scenes. You can get the current zoom level and smoothly transition to a specified level. ### Method JavaScript ### Endpoint N/A (Client-side property/method) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Get the current zoom level of the 3D scene let currentZoom = map.zoomLevel; // Zoom to a specific level with animation map.zoomLevelTo({ value: 10, // Target zoom level time: 1, // Animation duration in seconds onComplete: () => { console.log('Zoom to level 10 completed (out of 24 levels). Animation time can be modified.'); } }); ``` ### Response #### Success Response (200) - **zoomLevel** (number) - The current zoom level. #### Response Example ```json { "zoomLevel": 10 } ``` ``` -------------------------------- ### ESNavigation Initialization and Usage Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-navi This section details how to initialize the ESNavigation object, set start and end points, draw the navigation route, and initiate the simulation. It also covers common methods for controlling the navigation process. ```APIDOC ## ESNavigation Initialization and Usage ### Description Initialize the ESNavigation object with various configuration options, set the starting and ending points for navigation, draw the route, and begin the simulation. This also includes methods to pause, stop, reset, and clear the navigation. ### Method JavaScript (Client-side) ### Endpoint N/A (Client-side JavaScript API) ### Parameters #### Initialization Parameters (for `new esmap.ESNavigation({...})`) - **locationMarkerUrl** (string) - Optional - URL of the location marker image. - **locationMarkerSize** (number) - Optional - Size of the location marker image. - **locationMarkerSeeThough** (boolean) - Optional - Whether the location marker should be see-through. - **speed** (number) - Optional - Simulation speed (default: 5). - **maxEnd** (number) - Optional - Distance from the end point in meters to end navigation (default: 5). - **followAngle** (boolean) - Optional - Whether the 3D scene camera should follow the rotation direction. - **followPosition** (boolean) - Optional - Whether the 3D scene camera should follow the position movement. - **followGap** (number) - Optional - Navigation camera follow interval in seconds (default: 3). - **scaleAnimate** (boolean) - Optional - Whether to automatically zoom and adjust the camera during simulation. - **tiltAngle** (number) - Optional - Tilt angle during simulation (default: 30). - **audioPlay** (boolean) - Optional - Whether to enable voice broadcast (default: true). - **offsetHeight** (number) - Optional - Height of the location marker above the ground during simulation (default: 1). - **ladderType** (number) - Optional - Selection for cross-floor solutions (refer to table for other options). - **tipDistance** (number) - Optional - Distance in meters to broadcast turning instructions in advance (default: 3). - **reRouteDis** (number) - Optional - Distance in meters to trigger re-routing (default: 10). - **linkStartEnd** (boolean) - Optional - Whether to link the start and end points with the navigation line when setting them. - **showMultiFloor** (boolean) - Optional - Whether to display multiple floors in third-person navigation (added 2024-04-18). #### `setStartPoint` Parameters - **name** (string) - Required - Name of the start point. - **x** (number) - Required - X coordinate. - **y** (number) - Required - Y coordinate. - **fnum** (number) - Required - Floor number. - **height** (number) - Optional - Height of the start point from the ground. - **url** (string) - Optional - URL of the image for the start point marker. - **size** (number) - Optional - Size of the image marker. - **showLevel** (number) - Optional - Zoom level at which to hide the navigation object in the 3D scene. - **text** (string) - Optional - Text content to display in the scene. - **textStyle** (object) - Optional - Styling for the text. - **fontSize** (number) - Font size. - **fillStyle** (string) - Fill color. - **imageStyle** (object) - Optional - Styling for the image. - **align** (string) - Image alignment (e.g., 'bottom'). - **scale** (number) - Individual image scaling. - **renderOrder** (number) - Optional - Rendering order. - **pickable** (boolean) - Optional - Whether the marker is clickable. - **callback** (function) - Optional - Callback function when the marker is created. #### `setEndPoint` Parameters (Same as `setStartPoint` parameters) #### `getRouteResult` Parameters - **drawRoute** (boolean) - Required - Whether to draw the navigation route. ### Common Methods - **`navi.pause = true;`**: Pause navigation. - **`navi.pause = false;`**: Resume navigation. - **`navi.stop()`**: Stop navigation. - **`navi.clearAll()`**: Clear all navigation models and effects. - **`navi.reset()`**: Reset navigation route (recommended to call `stop()` first). - **`navi.getRouteResult({ drawRoute: true })`**: Redraw the navigation route. - **`navi.simulate()`**: Start navigation simulation. ### Request Example ```javascript // Initialize navigation object const navi = new esmap.ESNavigation({ locationMarkerUrl: './image/pointer.png', speed: 5, followPosition: true, audioPlay: true, offsetHeight: 1, ladderType: 1, tipDistance: 3, reRouteDis: 10, linkStartEnd: false, showMultiFloor: true }); // Set start point avi.setStartPoint({ name: '起点1', x: map.center.x + 10, y: map.center.y + 10, fnum: 1, height: 10, url: './image/start.png', size: 64, showLevel: 23 }); // Set end point avi.setEndPoint({ name: '终点1', x: map.center.x - 10, y: map.center.y - 10, fnum: 1, height: 10, url: './image/end.png', size: 64, showLevel: 23 }); // Get route result and draw avi.getRouteResult({ drawRoute: true }); // Start simulation if (navi.mode === 1) { map.ESAudioTool.playSoundByName('startNaving'); } else { map.ESAudioTool.playSoundByName('startCarNaving'); } avi.simulate(); ``` ### Response N/A (This is a client-side API usage example, not a server response) ### Error Handling Refer to the event listeners for error handling. ``` -------------------------------- ### Create ESCardMarker Instance Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-cardMarker Demonstrates how to create an ESCardMarker instance with various properties like ID, name, position, scale, and URL. It also shows how to add the marker to a specific floor's layer after the map is loaded. This requires the esmap library. ```javascript const cardMarker = new esmap.ESCardMarker({ id: 1, name: "myCardMarker", x: map.center.x, y: map.center.y, scale: 2, showLevel: 20, height: 10, opacity: 1, url: "./image/cardMarker.png", text: '文字动态生成', textStyle: { fontSize: 12, } }); floor = map.getBuildingById(0).getFloor(1); carLayer = floor.getOrCreateLayerByName('cardLayer',esmap.ESLayerType.CARD_MARKER); carLayer.addMarker(cardMarker); ``` -------------------------------- ### Indoor Scene Camera Zoom Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Adjust the camera zoom level for indoor scenes. You can get the current zoom level and smoothly transition to a specified level. ```APIDOC ## Indoor Scene Camera Zoom ### Description Adjust the camera zoom level for indoor scenes. You can get the current zoom level and smoothly transition to a specified level. ### Method JavaScript ### Endpoint N/A (Client-side property/method) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Get the current zoom level of the 3D scene let currentZoom = map.scaleLevel; // Zoom to a specific level with animation map.scaleLevelTo({ value: 10, // Target zoom level time: 1, // Animation duration in seconds onComplete: () => { console.log('Zoom to level 10 completed (out of 24 levels). Animation time can be modified.'); } }); ``` ### Response #### Success Response (200) - **scaleLevel** (number) - The current zoom level. #### Response Example ```json { "scaleLevel": 10 } ``` ``` -------------------------------- ### Indoor Building Floor Focus Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Manage floor focus within an indoor building. This includes getting floor numbers by name and changing the focused floor. ```APIDOC ## Indoor Building Floor Focus ### Description Manage floor focus within an indoor building. This includes getting floor numbers by name and changing the focused floor. ### Method JavaScript ### Endpoint N/A (Client-side function) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // Get floor number by floor name var fnum = building.getFloorNumByName('F1'); // Method 1: Switch to focused floor (hides other floors if multiple are displayed) // fnum must be a number, not a string building.changeFocusFloor(fnum); // Method 2: Set focused floor (other floors remain visible) building.focusFloorNum = fnum; building.visibleFloorNums = [fnum1, fnum2]; // Set visible floors ``` ### Response #### Success Response (200) N/A (Client-side function) #### Response Example N/A ``` -------------------------------- ### Implement Building Scan Lights (Horizon and Center Spread) Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/effect-edit Adds scanning light effects to buildings, supporting both horizontal and center-spread types. Configurations include scan center, color, speed, extent, width, and maximum radius. ```json { "buildingScanLight": [ { "type": "horizon_scan", "lineScanCenter": { "x": 0, "y": 0 }, "scanColor": "#aad5ff", "scanSpeed": 150, "scanExtent": [500, -500], "scanLightWidth": 25 }, { "type": "center_spread", "lineScanCenter": { "x": 0, "y": 0 }, "scanColor": "#FFFFFF", "scanSpeed": 800, "maxRadius": 2500 } ] } ``` -------------------------------- ### Get Indoor Building Object Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr Retrieve a building object from the 3D scene. This can be done using the default method when in indoor mode or by specifying a building ID. ```javascript let building = map.getBuilding(); // Method 1: Get Building object in indoor mode let building = map.getBuildingById('test666'); // Method 2: Get Building object by scene ID ```