ESMap SDK

https://www.esmap.cn/docs/sdk3.0
Admin
ESMap SDK is a domestically developed 3D visualization engine and SDK for B/S architecture-based 3D...
Tokens:150,996
Snippets:749
Trust Score:5.5
Update:9 months ago
Show doc for...
Tokens:
Raw
### 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
<script src='./esmap-3.0.min.js'></script>
```

--------------------------------

### 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文件
<script src='./esmap-3.0.min.js'></script>   

// 需使用城市三维场景的瓦片底图功能，添加引入以下文件
<script src='./esplugin-tile-3.0.min.js'></script>
```

--------------------------------

### 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<Object>) - An array of points defining the floor boundary.

#### Success Response (200)
- **boundaryPoints** (Array<Object>) - 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
<template>
  <div id='map-container'></div>
</template>
<script>

import MapApplication from '../MapApplication';
import { onMounted,onUnmounted } from 'vue'
export default {
name: 'MapContainer',
setup() {
    let mapID = 'test666'
    onMounted(() => {
        // 初始化地图
        MapApplication.initMap(mapID)
    })
    onUnmounted(() => {
        // 销毁三维场景
        MapApplication.destroyMap()
    })
    return {}
}
};
</script>

<style>
html,
body,
#map-container {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
</style>
```

--------------------------------

### 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
```
Tokens:
Raw