Map

MapThe object is the map on the page. It gives you access to methods and properties for interacting with the map’s styles and layers, responding to events, and manipulating the user’s perspective with the camera. Developer createdMapAfter the object, pass the specifiedcontainerand other optional parameters,Mapmost SDK Lite will initialize the map on the page and returnMapobject.

new mapmost.Map (options: Object)

parameter

name	type	describe
options	Object	Requiredparameter Name Type Default Description container String|HTMLElement Requiredplace map HTML element, or of that element id。 style Object/String RequiredThe style of the map, it must be one that conforms to mapmost of the pattern described in the style specification JSON object, or something like this JSON of URL。 userId String RequiredUser authorization code information. antialias Boolen false Optionalwill use MSAA Anti-aliasing creation gl Context, this is very useful for anti-aliasing of custom layers, but the performance drops significantly after it is turned on. bearing Number 0 OptionalThe map’s initial orientation, measured in degrees counterclockwise from north. bounds LngLatBoundsLike null OptionalThe initial bounds of the map, if bounds is specified it will override center and zoom Constructor options. center Array [0, 0] OptionalThe initial center point of the map. doubleClickZoom Boolen true Optionalif for true , will be turned on "Double click to zoom map" interactive mode. dragPan Boolen true Optionalif for true , will be turned on "Drag and drop to move map" interactive mode. dragRotate Boolen true Optionalif for true , will be turned on "Drag and drop to rotate map" interactive mode. interactive Boolen true Optionalif for false ，The map will not be bound to monitor mouse, touch, and keyboard events, so the map will not respond to any user interaction. pitch Number 0 OptionalThe initial tilt angle of the map, which represents the angle between the current line of sight and the top-down line of sight, ranging from 0-85，When viewed from above, the tilt angle is 0。 pitchWithRotate Boolen true Optionalif for true ，will be in"Drag and drop to rotate the map"while controlling the tilt of the map. preserveDrawingBuffer Boolen false Optionalif true ，Map canvas available map.getCanvas().toDataURL()。 renderWorldCopies Boolen true Optionalif for true ， Multiple copies of the global map are rendered when the map is zoomed out. scrollZoom Boolen/Object true Optionalif for true ，will be turned on "Wheel zoom map" interactive mode. sipsdCopyright String undefined OptionalHide copyright information, displayed by default, need to be set through sipsdCopyright: "hidden" Hide it. sky Enum undefined OptionalThe map’s initial sky setting, defaults to white, supported "basic"、"light" and "dark" Three sky color settings. touchZoomRotate Boolen/Object true Optionalif for false ，Multi-touch rotation and zoom interaction modes on mobile devices will not be enabled. zoom Number 0 OptionalThe initial zoom level of the map. authConfig Object OptionalIntranet authorization parameters Name Type Default Description authServiceAddress String System default OptionalAuthorized service address. authServiceUseSSL Boolean true OptionalWhether to use when connecting to the authorization serviceSSL。 pluginAddress String System default OptionalAuthorized plug-in address. authInfoPort Number 39026 OptionalAuthorization information port. secretKey Boolean false OptionalWhether to enable dongle authorization mode. pollingInterval String 30000 OptionalPolling interval, in milliseconds.secretKeyfortrueeffective when.

let map = new mapmost.Map({
    container: 'map', // elementalid
    style: "https://www.mapmost.com/cdn/styles/sample_data.json", // map styleURL
    center: [120.72541613154851, 31.31171803927643], // starting coordinates
    zoom: 14, // Starting zoom level
    userId: '***' // Authorization code,This parameter is fromv3.1.0Be sure to add it at the beginning of the version
});

refer to Example。

method

addArcGISDynamicLayer

Support loadingArcGISDynamic layers

parameter

name	type	describe
id	String	RequiredLayer uniqueID。
source	Object	Requiredparameter Name Type Default Description url String RequiredService address, starting with"MapServer"The end. format String PNG OptionalImage format. layers String OptionalLayer to display, via string"show:id,id,···"Format display designationidLayers, if not set, all layers will be displayed by default. transparent Bollean true OptionalWhether the image is transparent. resolutions Array OptionalTile resolution, By default, Google tile resolution is obtained based on the service.
project	String	RequiredThe coordinate system name of the raster service. Supported by default"3857"、"4326"、"4490"and"4528"，Other coordinate systems need to be passed in through customization.

Case

map.on('load', function() {
    map.addArcGISDynamicLayer({
        id: 'layer',
        project:'<myproject>', //coordinate system
        source: {
            url: 'https://IP/***/MapServer', // Service address
            format: 'PNG', // Image format, default isPNG
            layers: 'show:0', // Displayed layers
            transparent: true, // Whether the image is transparent, the default is true
        },
    });
});

refer to Example。

addControl

WillIControlAdd to map, callcontrol.onAdd(this)，Need on map style Add this control after loading is complete.

parameter

Name	Type	Default	Description
control	IControl		Requiredto add IControl。
position	string	top-right	OptionalThe location on the map where the control will be added. Valid values ​​are " " and defaults to string type "top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-right"。

Case

map.on('load', function() {
    // Adds zoom and rotation controls to the map.
    map.addControl(new mapmost.NavigationControl());
});

addImage

Add image resources to the map style. available asicon-image, background-pattern, fill-patternandline-patternShow on the map. ifspriteThere is not enough space to add this image and an error will be reported.

map.addImage(id,image,options)

parameter

name	type	describe
id	String	RequiredImage onlyID
image	String	RequiredImage format supportHTMLImageElement、ImageBitmap、StyleImageInterface、ImageData、{width: number, height: number, data: (Uint8Array | Uint8ClampedArray)}
options	Object	Optionalparameter Name Type Default Description pixelRatio Number 1 OptionalThe ratio of pixels in an image to physical pixels on the screen. sdf Boolen false OptionalShould the image be interpreted asSDFimage.

Case

// If the map style sprite is not already includedIDfor "cat" images,
// convert image "cat-icon.png" ofIDnamed "cat" Added to a map style sprite.
map.loadImage('path/test1.svg.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('cat')) map.addImage('cat', image);
});

// Add one to use `icon-text-fit` stretchable image of
// In this case, the image size is 600*400 pixels.
map.loadImage('path/test2.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('border-image')) {
     map.addImage('border-image', image, {
         content: [16, 16, 300, 384], // Place the text on the left half of the image to avoid 16 pixel boundaries
         stretchX: [[16, 584]], // horizontal stretch 16 Everything except pixel borders
         stretchY: [[16, 384]], // vertical stretch 16 Everything except pixel borders
     });
   }
});

// Define a source and use it to create a new layer
map.addSource('state-data', {
type: 'geojson',
data: 'path/to/data.geojson'
});
 
map.addLayer({
id: 'states',

// Quoting the definition above GeoJSON source
// and don’t need a `source-layer`
source: 'state-data',
type: 'symbol',
layout: {

// Set label content to
// characteristic `name` property
"text-field": ['get', 'name']
}
});

addLayer-basic

Add layers to your map style, including background、circle、line、fill、symbol、raster、fill-extrusion、heatmap and hillshadetype.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description id String RequiredLoading layersid，Defines a unique identifier for the layer. type String RequiredDefine the type of layer to load(must be "background"、"circle"、"line"、"fill"、"symbol"、"raster"、"fill-extrusion"、"heatmap"、"hillshade" one of)。 filter Array OptionalAn expression that specifies the source feature condition. If no filter is provided, all features will be displayed. layout Object OptionalThe layout properties of the layer. For detailed parameters, see the map style document. minzoom Number 0 OptionalThe minimum zoom level of the layer. When the zoom level is less than minzoom , the layer will be hidden. The value can be 0-24（include0and24）any number in between. if not provided minzoom ，The layer will be visible at all zoom levels where tiles are available. paint Object OptionalThe drawing properties of the layer. Please see the map style document for specific parameters. source Object/String OptionalThe layer’s data source, custom and background This layer parameter is optional. sourceLayer String OptionalSpecify layer.source The name of the style layer. Applies only to vector data sources, in layer.source yes "vector" type takes effect.
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

// Add a vector source circle layer
map.addLayer({
id: 'points-of-interest',
source: {
type: 'vector',
url: 'url'
},
'source-layer': 'poi_label',
type: 'circle',
paint: {
// MapMostStyle specification drawing properties
},
layout: {
// MapMostStyle specification layout properties
}
});

// Define a source and use it to create a new layer
map.addSource('state-data', {
type: 'geojson',
data: 'path/to/data.geojson'
});
 
map.addLayer({
id: 'states',
// Quoting the definition above GeoJSON source
// and don’t need a `source-layer`
source: 'state-data',
type: 'symbol',
layout: {
// Set label content to
// characteristic `name` property
"text-field": ['get', 'name']
}
});

// Add a new symbol layer before the existing layer
map.addLayer({
    id: 'states',
    // Reference an already defined source
    source: 'state-data',
    type: 'symbol',
    layout: {
    // Set label content to
    // characteristic `name` property
    "text-field": ['get', 'name']
    }
// in existing `cities` Add layer before layer
}, 'cities');

addLayer-buildings

load3DArchitectural thematic layer. Users can use two-dimensionalGeoJSONData construction3Dmodel, or by loading a prefabricated building model to generate a custom3DThematic layer.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description data Object Requiredtwo-dimensional GeoJSON data. id String RequiredLoading layers id，Defines a unique identifier for the layer. type String RequiredDefine the type of loaded layer, fine model layer type for "building"。 models Array RequiredThe initially loaded 3D model resource. Need to set center。 center Array [0,0,0] OptionalThe geographical space where the world origin of the 3D model is located WGS84 coordinate. If set models，must be set. example:[lng,lat,height]。 defaultLights Bollean true OptionalWhether ambient light is turned on by default. floorHeight Number 4 OptionalSet the height of the building floors, showFloor for true effective when. heightProp String OptionalGeoJSONThe attribute name in the data indicating the height of the building. images Array /String Optionalstickersurl：If it is two textures, such as ["top.png","wall.png"]，Then it is the top and wall textures in sequence; if it is a single texture, such as["material.png"]，It is the texture of all faces; if it is a single texture, such as"material.png"，It is a wall map, and the top of the building is a solid color. material set up. lights Array OptionalSet ambient light parameters,Supports adding natural light, point light source, spotlight light source, directional light and hemispheric light source. Name Type Default Description color String 0xffffff Optionallight source color,type for "hemisphere" , this parameter does not take effect. id String Requiredlight source id，Unique identifier. intensity Number 1 OptionalThe intensity of light irradiation, the value is a positive number. groundColor String 0xffffff OptionalThe color of light emitted from the ground, only in type for "hemisphere" effective when. position Array RequiredThe position of the light source in the scene,type for "ambient" , this parameter does not take effect. skyColor String 0xffffff OptionalThe color of light emitted from the sky, only in type for "hemisphere" effective when. type String RequiredLight source type, must be "ambient"、"point"、"spot"、"directional"、"hemisphere" one of them. material Object OptionalMaterial property settings such as transparency opacity、color color wait. name type describe top Object OptionalMaterial property settings for building top texture. wall Object OptionalArchitectural wall map material property settings. proj String 4326 OptionalSet system coordinate system,support "3857" and "4326"。 showFloor Bollean false OptionalSet whether the building is divided into floor maps.
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

• options.lights Ambient light parameter configuration example

  {
      id: 'light1',   // light sourceid
      type:'ambient', // natural light
      color:0xffffff, // Light source color
      intensity:300   // Light intensity
  },{
      id: 'light2',
      type:'point',   // point light source
      color:0xffffff,
      intensity:0.1,
      position:[0,0,0] // The position of the light source in the scene
  },{
      id: 'light3',
      type:'spot',    // spotlight light source
      color:0xffffff,
      intensity:0.1,
      position:[0,0,0],
  },{
      id: 'light4',
      type:'directional', // parallel light/Directional light
      color:0xffffff,
      intensity:0.3,
      position:[0.5, 0, 0.866],
  },{
      id: 'light5',
      type: 'hemisphere',     // hemispheric light source
      skyColor: 0xccccff,     // The color of light emitted from the sky
      groundColor: 0xff0322,  // Color of light emitted from the ground
      intensity: 2,           
      position: [0, 50, 100]  
  }

Case

（1）According to the buildingGeoJSONbuild

 let op = {
     id: 'b',
     type: 'buildings',
     proj: '4326',
     data: response,
     images: ['../files/images/top.png', '../files/images/wall.png'],
     defaultLights:false,
     heightProp: 'ztykgd',
     lights: [
         {
             id: 'light1',
             type: 'ambient',
             color: 0xccccff,
             intensity: 2
         }, {
             id: 'light2',
             type: 'directional',
             color: 0xffffff,
             intensity: 0.25,
             position: [0, 8000, 10000]
         },
     ],
     material:{
         top:{
             opacity:0.8
         },
         wall:{
             opacity:0.8
         }
     },
 };
 map.addLayer(op);

refer to Example。

（2）Built from an architectural model

Models need to be made according to a specific process based on vector data.

Model loading test:

• Test equipment: Lenovo R9000P（The graphics card is GTX 3070）；
• Model loading test: based on Nanjing165797The model constructed from building data is stable at58fpsabove.

 let op = {
  id: 'sipsd',
  type: 'buildings',
  images: ['./top.png', './wall_reverse.png'], // Ceiling and wall textures
  models: models_obj,
  defaultLights: false,
  center: [120.7464153334825, 31.333162198642274],
  lights: [
    {
      id: 'light1',
      type: 'ambient',
      color: 0xccccff,
      intensity: 2
    }, {
      id: 'light2',
      type: 'directional',
      color: 0xffffff,
      intensity: 0.25,
      position: [0, 8000, 10000]
    },
  ]
};

map.addLayer(op);

refer to Example。

addLayer-geoVideo

After loading the 3D video fusion layer, the user can perform a series of interactive operations on the video object.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description id String RequiredLoading layersid，Defines a unique identifier for the layer. models Array RequiredVideo fusion base model resources. Need to setcenter。 name type describe model Object RequiredSingle 3D model resource, supportglb、gltf、obj、fbxType loading. name type describe mtl String RequiredMaterial file path, onlytypefor"obj"effective when. type String RequiredModel format, value is"gltf"、"glb"、"obj"、"fbx"。 url String RequiredModel file path. dracoUrl String OptionalUnzipped library file path, onlytypefor"glb"and"gltf"effective when. type String RequiredDefine the type of loaded layer, fine model layertypefor"geoVideo" 。 callback Function OptionalThe callback function executed after the model is loaded name type describe geoVideo GeoVideoLayer RequiredVideo fusion layer example. camerasData Object/Array[Object] Optional Camera parameter object or object group during initialization. For specific data format, seeGeoVideoLayerin documentationaddVideoCamerasmethodologicalcamerasDataParameter description. center Array [0, 0, 0] OptionalSet the geographical spatial coordinates of the world origin of the 3D model, and use the coordinate systemWGS84coordinate. If setmodels，must be set. example:[lng, lat, height]，If defaultheight，Default is0。 defaultLights Bollean false OptionalWhether ambient light is turned on by default. exposure Number 2.8 OptionalThe exposure degree of the three-dimensional scene, the value is a positive number. funcOnAdd Function OptionalFunction called when the layer is first loaded. name type describe scene Object RequiredThree-dimensional scene related content. funcRender Function OptionalFunction called when drawing each frame. name type describe gl WebGLRenderingContext Requiredmap gl context. matrix Array RequiredThe map’s camera matrix. project String undefined OptionalThe loaded 3D model coordinate system. Default coordinate system in meters, loaded3857The parameters of the model in the coordinate system are set to"3857"。 sky String undefined OptionalDefine environment mapsurl。
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

GeoVideoLayermethod    Please refer to the specific detailsdocument。

addLayer-heatmap-3d

Load point data and generate3DHeatmap layer.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description data Array Requireddefinition3DInput data for the heat map layer, for example data = [[lon,lat,value]]，The parameters are longitude, latitude, and attribute values. id String RequiredLoading layers id，Defines a unique identifier for the layer. type String RequiredDefine the type of loaded layer, heat map layer type for "heatmap-3d" 。 blur Number 0.85 OptionalThe range is [0,1]，Applies to all point data. The higher the coefficient, the smoother the gradient. callback Function OptionalThe callback function executed after the model is loaded name type describe group Object3D RequiredObject3D Object, containing a series of methods for operating the model (see above for specific usage) addLayer-model middle Object3D method). layer ModelLayer Required3D heat map layer example. updateHeatmap Function OptionalHeatmap update method, with coordinates The items are effective together. Please see the case below for how to use it. coordinates Array Optionaldefinition3DThe data boundary range of the heat map layer, data must be within this boundary, e.g. coordinates = [[lon,lat,alt]]，The parameters are longitude, latitude, and altitude. This activation can be used to update range-wide heatmaps in real time. funcOnAdd Function OptionalFunction called when the layer is first loaded. name type describe scene Object RequiredThree-dimensional scene related content. funcRender Function OptionalFunction called when drawing each frame. name type describe gl WebGLRenderingContext Requiredmap gl context. matrix Array RequiredThe map’s camera matrix. gradient Object OptionalA ribbon object representing a gradient,If not set, the default style will be used. See the example below for the default style. heightRatio Number 100 Optionaldefinition3DHeatmap stretch height. heightSegments Number 300 OptionalThe number of length segments. The larger the value, the more detailed the heat map will be. proj String 4326 Optionaldefinition3DHeat map coordinate system, supported "3857" and "4326"。 radius Number 6 OptionalThe radius of each data point. sky String undefined OptionalDefine environment maps url。 width Number 256 Optionaldefinition3DThe width of the heat map layer canvas. widthSegments Number 300 OptionalThe number of width segments. The larger the value, the more detailed the heat map will be.
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

• Things to note: Before starting the program, you need to passcdnintroduceheatmap.jslibrary.

Case

<script src="heatmap.js"></script> //Download address:https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.js

 let op = {
                id: '3d-heatmap-layer',
                type: 'heatmap-3d',
                data: dataPoints,//dataPoints = [[lon,lat,value]]，The parameters are longitude, latitude, and attribute values.
                width: 256,//Heat map canvas width, default256
                height: 256,//Heat map canvas height, default256
                heightRatio: 200,//3DHeat map stretch height, default200
                // proj:"3857",//Coordinate system support'3857'and'4326'，default'4326'
                blur: 0.85,//[0,1] Optional parameters default = 0.85 ，Applies to all point data. The higher the coefficient, the smoother the gradient. The default is0.85
                radius: 6, //Radius of each data point, default6
                gradient: {
                    '0.1': 'rgb(0,102,255)',
                    '0.2': 'rgb(102,255,255)',
                    '0.3': 'rgb(102,255,153)',
                    '0.4': 'rgb(125,255,0)',
                    '0.5': 'rgb(255,255,0)',
                    '0.6': 'rgb(255,204,0)',
                    '0.7': 'rgb(255,128,0)',
                    '0.8': 'rgb(255,102,0)',
                    '0.9': 'rgb(255,0,0)',
                }, //A ribbon object representing a gradient,If not set, the default style will be used
            };

            map.addLayer(op);

refer to Example 1 3Dheat map。

refer to Example 2 3DReal-time heat map。

addLayer-model

Load a 3D manual model, and the user can perform a series of interactive operations on the model, supporting gltf、glb、obj and fbx Format model loading.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description id String RequiredLoading layers id，Defines a unique identifier for the layer. type String RequiredDefine the type of loaded layer, fine model layer type for "model"。 callback Function OptionalThe callback function executed after the model is loaded name type describe group Object3D RequiredObject3D Object, containing a series of methods for operating the model (see below for specific usage). layer ModelLayer Required3D layer instance. center Array [0, 0, 0] OptionalSet the geographical spatial coordinates of the world origin of the 3D model, and use the coordinate system WGS84 coordinate. If set models，must be set. example:[lng, lat, height]，If defaultheight，Default is0。 defaultLights Bollean false OptionalWhether ambient light is turned on by default. exposure Number 2.8 OptionalThe exposure degree of the three-dimensional scene, the value is a positive number. sky String Optionalenvironment mapurl，supporthdrFormat. funcOnAdd Function OptionalFunction called when the layer is first loaded. name type describe scene Object RequiredThree-dimensional scene related content. funcRender Function OptionalFunction called when drawing each frame. name type describe gl WebGLRenderingContext Requiredmap gl context. matrix Array RequiredThe map’s camera matrix. models Array OptionalThe initially loaded 3D model resource. Need to set center。 name type describe model Object Requiredparameter name type describe mtl String RequiredMaterial file path, only type for "obj" effective when. type String RequiredModel format, value is "gltf"、"glb"、"obj"、"fbx"。 url String RequiredModel file path. dracoUrl String OptionalUnzipped library file path, only type for "glb" and "gltf" effective when. project String undefined OptionalThe loaded 3D model coordinate system. Default coordinate system in meters, loaded3857The parameters of the model in the coordinate system are set to"3857"。 sky String undefined OptionalDefine environment mapsurl。
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

ModelLayermethod    Please refer to the specific detailsdocument。

Object3Dmethod

• setCoords: (LngLatLike) (required) Set the spatial coordinates of the geographical location of the 3D model. The coordinate system is used by default.CGCS2000coordinate(EPSG:4490）。
• setScale: (Number/Object) (optional) Set the zoom ratio of the 3D model on the map, including alongX、Y、ZThe ratio of three-axis scaling,{x:1, y:1, z:1}。
• setRotation: (Number/Object) (optional) Set the spatial rotation matrix of the three-dimensional model on the map, including rotating theX、Y、ZThe angle of three-axis rotation, expressed in degrees.
• setTranslation: (Number/Object) (optional) Set the spatial translation matrix of the three-dimensional model on the map, includingX、Y、ZThe distance of three-axis translation, expressed in meters.
• followPath: ({path: LineGeometry, duration: Number},cb) (optional) To set the 3D model to move along a polyline in ground space, you need to enter the polyline path along the movement and the playback speed of the movement animation.durationIn milliseconds, the animation is executed after execution.cbcallback function.
• stop: (optional) Stops the animation of a 3D model moving in ground space.
• addFrame: (color:String,thresholdAngle:Number) (optional) Add a wireframe of the model in the 3D scene. parameterthresholdAngleOnly if the angle between the normals of adjacent faces(in degrees)When this value is exceeded, the edge will be displayed. Default value= 1Spend.
• removeFrame: (optional) Removes the wireframe of a model from a 3D scene.
• showFrame: (optional) Displays the model wireframe that has been added to the 3D scene.
• hideFrame: (optional) Hide the wireframe of the model that is displayed in the 3D scene.

Model loading test:

• Test Equipment: UseDell xps15Laptop (graphics card is GTX 1050Ti）；
• White model loading test: the loading limit is approximately1.87GWhite model, number of vertices62,831,216，Number of sides25,045,574；
• Precision mold loading test: less than1G，Loading performance is affected by model maps.

Model loading suggestions:

• Model format: Recommendedgltf/glbformat model;
• Model size: It is recommended to split the model into multiple smaller models for loading;
• Model material: It is recommended to use standard material (Standard），The map name and material name of the standard material must be consistent; if a multi-dimensional sub-material is used, the number of multi-dimensional sub-materials must not exceed13, the map name and material name of the standard material contained in the multi-dimensional sub-material must be consistent.

Case

    let models_obj = [{
            type: 'glb',
            url: "../files/models/jinji_plaza_eastern_door_building.glb",
            // dracoUrl:"http://******:8008/gltfDraco/"  //Supports loading of compressed models. The resources have been uploaded and can be used on demand. The absolute path needs to be passed in when using.   
        }];

    let options = {
        id: 'model_id',
        type: 'model',
        models: models_obj,
        center: [120.67727020663829, 31.31997024841401],
        callback: function (group, layer) {
            // aroundyaxis rotation90Spend
            // group.setRotation({y:90});  
            
            // x/y/zMagnify each axis2times
            // group.setScale(2);  
            
            // Add the model to the layer
            // layer.addModel(models_obj,[120.67727020663829, 31.31997024841401]);  
            
            // Click
            // map.on('click',function(e){
            //  let intersect = layer.selectModel(e.point)[0];
            //  if (intersect) {
            //     const obj = intersect.object;
            //    // TODO more
            //  }
            // })
         }
    };
    map.addLayer(options);

refer to Example。

add3dTilesLayer

load in map3DTilesOblique model of format.

parameter

name	type	describe
layer	Object	Requiredparameter Name Type Default Description data String Required3DTiles data resources url。 id String RequiredLoading layers id，Defines a unique identifier for the layer. defaultLights Bollean true OptionalWhether ambient light is turned on by default. lights Array undefined OptionalSet ambient light parameters. Light source types include ambient light"ambient"，point light source "point"，Directional light "directional"，Ambient light and directional light are enabled by default. loadOptions Object OptionalLoader settings for data name type describe draco Object OptionalDecompressor parameter settings are used to load tilt data containing compressed models offline or on an intranet. name type describe libsUrl String OptionalThe absolute path to the resource. pickable Bollean false Optional3DTilesWhether to enable mouse picking function for data layer. transform Matrix4 Optional set up 3DTiles The spatial position transformation parameters when the data is initially loaded can realize operations such as translation, rotation, and scaling of tilt data. Specific referenceMathin the documentationMatrix4usage.
beforeId	String	Optionalon existing layer ID Insert the new layer before so that the new layer appears underneath the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Model loading test:

• Test equipment: using LenovoR9000PNotebook (memory:32G,Graphics card:GTX 3070）；
• Model loading test: area 52.857square kilometers, file size 49.7G；
• Note: Not supported yetcmptFormat

Case

 //Create an initialized identity matrix
let matrix = new window.mapmost.Matrix4();
//Add translation rotation transformation
let matrix4 = matrix.translate([0, 0, 200]).rotateX(Math.PI / 2);
// load3DTiles
map.add3dTilesLayer(
    {
        id: 'tile-3d-layer',
        data: TILESET_URL,
        lights: [
            {
                type: 'ambient',//ambient light
                color: [255, 255, 255],
                intensity: 0.01
            },
            // {
            //   type: 'point',//point light source
            //   color: [255, 0, 0],
            //   intensity: 0.1,
            //   position: [120, 31, 100]
            // },
            // {
            //   type: 'directional',//Directional light
            //   color: [255, 255, 255],
            //   intensity: 0.1,
            //   direction: [120, 31, 1000]
            // }
        ],
        transform: matrix4,
        // loadOptions:{
        //     draco:{//Used to load tilt data containing compressed models offline or on the intranet.
        //      libsUrl:"http://******:8008/draco",//The resource has been uploaded and can be used on demand. You need to pass in the absolute path when using it.   
        //      }
        // }
    }
)
// Remove3DTiles
map.removeLayer('tile-3d-layer')

refer to Example 1。 refer to Example 2。 refer to Example three。

addMigrationLayer

The migration map displays the migration trajectory and magnitude of the data dynamically and in real time on the map, allowing you to visually view the source and destination of the data.

parameter

name	type	describe
options	Object	Requiredparameter Name Type Default Description data Array RequiredLayer data, see the case for detailed format. id String RequiredLoading layers id，Defines a unique identifier for the layer. pointImgUrl String RequiredSports point picture resources url。 steps Number 400 OptionalMovement speed.

Case

  <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> 

 // data

let data = [
  {
    coords: [[120.70254950835465, 31.34452333816192], [120.72899820084962, 31.339048513540533]],
  },
  {
    coords: [[120.71146083590128, 31.328411691268002], [120.72899820084962, 31.339048513540533]],
  },
  {
    coords: [[120.6919983801705, 31.330883608912274], [120.72899820084962, 31.339048513540533]],
  },
  {
    coords: [[120.69473931280976, 31.347288081092003], [120.72899820084962, 31.339048513540533]],
  }];

let a =  map.addMigrationLayer({
    id:'test',
    data:data,
    pointImgUrl:'./point.png'
})

map.on('click',function(){
    a.remove();
})

refer to Example。

addOnlineVideo

Load live video on the map, supporthlsvideo streaming andflvVideo streaming.

parameter

name	type	describe
options	Object	Requiredparameter name type describe coordinates Array RequiredCorner point coordinate array: Specifies that the video container is a two-dimensional or three-dimensional quadrilateral plane, starting from the upper left corner of the video container, clockwise, supported CGCS2000 Coordinates, the height value needs to be added to the three-dimensional plane. id String RequiredLoading layers id，Defines a unique identifier for the layer. type String RequiredLive video streaming type, supported "hls" 、 "flv" and "mp4" 。 url String Requiredreal time video url。 mask String Optionalfor feathering/Cropped pictures url。Feathering is required by setting the degree of transparency distribution of picture pixels/At the cropping position, the larger the transparency setting, the more obvious the feathering effect will be.

Case

    // Add 2D flat video
    map.addOnlineVideo({
        id: 'test',  // with layersidSimilar, need unique
        type: 'hls', //  hlsLive video streaming type
        coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;CGCS2000coordinate
            [120.621, 31.295],
            [120.623, 31.295],
            [120.623, 31.293],
            [120.621, 31.293],
        ],
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'  // hlsvideourl
    });
    // Add stereoscopic video
    map.addOnlineVideo({
        id: 'test-3d',  // with layersidSimilar, need unique
        type: 'flv', //  flvLive video streaming type
        coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;CGCS2000coordinate
            [120.621, 31.296, 100],
            [120.623, 31.296, 100],
            [120.623, 31.296, 0],
            [120.621, 31.296, 0],
        ],
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flvvideourl
    });
    // Add stereoscopic video to add feathering effect
    map.addOnlineVideo({
        id: 'test-3d-mask',  // with layersidSimilar, need unique
        type: 'flv', //  flvLive video streaming type
        coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;CGCS2000coordinate
            [120.624, 31.294, 100],
            [120.626, 31.294, 100],
            [120.626, 31.294, 0],
            [120.624, 31.294, 0],
        ],
        mask: "../example_data/images/mask.png",
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flvvideourl
    });
   // Remove video
    map.removeOnlineVideo('test')

refer to Example。

addRasterLayer2

Load raster services for various coordinate systems.

parameter

name	type	describe
options	Object	Requiredparameter name type describe id String RequiredLoading layers id，Defines a unique identifier for the layer. project String RequiredThe coordinate system name of the raster service. source object RequiredMap service resources. Name Type Default Description tiles Array Requiredgrid tilesurlarray. extent Array OptionalLayer tile request range, for example[minx,miny,maxx,maxy] origin Array [-180,90] OptionalThe starting point for slice calculations. resolutions Array OptionalThe resolution of the slice, meaning on the picture1pxThe distance represents the actual distance. tileSize Number 256/512 OptionalThe size of each image in the sliced ​​map,WMS Service default 512，WMTSService default 256。 zoomOffset Number 0 OptionalLayerszoomoffset. transformRequest Function OptionalTile service request conversion function, please see below for details"transformRequest illustrate"。 paint object OptionalLayer drawing configuration items name type default value describe raster-opacity Number 1.0 OptionalLayer opacity.

• zoomOffset illustrate

  • First check the request tile level:0 of resolution Which of the following full resolutions corresponds to level。

    The full resolution is as follows:
        [
            {
                level: 0,
                resolution: 156367.78906250003,
                scale: 590995186.1175001
            },
            {
                level: 1,
                resolution: 78183.89453125001,
                scale: 295497593.05875003
            },
            {
                level: 2,
                resolution: 39091.94726562501,
                scale: 147748796.52937502
            },
            {
                level: 3,
                resolution: 19545.973632812504,
                scale: 73874398.26468751
                },
            {
                level: 4,
                resolution: 9772.986816406252,
                scale: 36937199.132343754
            },
            {
                level: 5,
                resolution: 4886.493408203126,
                scale: 18468599.566171877
            },
            {
                level: 6,
                resolution: 2443.246704101563,
                scale: 9234299.783085939
            },
            {
                level: 7,
                resolution: 1221.6233520507815,
                scale: 4617149.891542969
            },
            {
                level: 8,
                resolution: 610.8116760253907,
                scale: 2308574.9457714846
            },
            {
                level: 9,
                resolution: 305.40583801269537,
                scale: 1154287.4728857423
            },
            {
                level: 10,
                resolution: 152.70291900634768,
                scale: 577143.7364428712
            },
            {
                level: 11,
                resolution: 76.35145950317384,
                scale: 288571.8682214356
            },
            {
                level: 12,
                resolution: 38.17572975158692,
                scale: 144285.9341107178
            },
            {
                level: 13,
                resolution: 19.08786487579346,
                scale: 72142.9670553589
            },
            {
                level: 14,
                resolution: 9.54393243789673,
                scale: 36071.48352767945
            },
            {
                level: 15,
                resolution: 4.771966218948365,
                scale: 18035.741763839724
            },
            {
                level: 16,
                resolution: 2.3859831094741826,
                scale: 9017.870881919862
            },
            {
                level: 17,
                resolution: 1.1929915547370913,
                scale: 4508.935440959931
            },
            {
                level: 18,
                resolution: 0.5964957773685456,
                scale: 2254.4677204799655
            },
            {
                level: 19,
                resolution: 0.2982478886842728,
                scale: 1127.2338602399827
            },
            {
                level: 20,
                resolution: 0.1491239443421364,
                scale: 563.6169301199914
            }
        ]
  • Then according to the level value setting zoomOffset offset. For example, in the picture below,level 0 The corresponding resolution is 79.375，with complete level middle grade 11 level is close, then set the parameters zoomOffset: -11。
  

• transformRequest illustrate

  • byArcGISStatic slice resource file service as an example
  
  • The tile service request conversion function is as follows

        /* input parameters
           x:OK
           y:List
           z:Zoom level
           zoomOffset:offset
        */
        transformRequest: (x, y, z, zoomOffset) => {
            return url
              .replace('{x}', 'C' + x.toString(16).padStart(8, '0'))
              .replace('{y}', 'R' + y.toString(16).padStart(8, '0'))
              .replace('{z}', 'L' + String(z).padStart(2, '0'));
        }

Case

//load4490coordinate systemWMSServe
    let wms_option = {
        'id': 'wms-test-layer',
        'project': '4490',
        'source': {
            'tiles': [
                'IP:9000/geoserver/geoserver/sip/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&STYLES&LAYERS=sip%3Asip_road&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-4490}'
            ],
            'tileSize': 256
        }
    }
    map.addRasterLayer2(wms_option)

refer to Example 1。 refer to Example 2。 refer to Example three。

addSource

Add a data source to the map style.

map.addSource(id: string,options: Object)

parameter

name	type	describe
id	String	Requireddata source id。
options	Object	RequiredData source properties. name type describe data Object/string Requireddata object or URL。 type String RequiredData source type.

Case

// loadgeojsondata
map.addSource('sourceId', {
   type: 'geojson',
   data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "properties": {},
           "geometry": {
               "type": "Point",
               "coordinates": [
                   -76.53063297271729,
                   39.18174077994108
               ]
           }
       }]
   }
});

// loadgeojson url
map.addSource('some id', {
    type: 'geojson',
    data: 'path/data.geojson'
});

refer to Example。

addSourceView detailed usage source。

add3dTreesLayer

load in map3Dtree model.

parameter

name	type	describe
options	Object	Requiredparameter Name Type Default Description crownMesh String Requiredtree crown model url， drc Format. id String RequiredLoading layers id，Defines a unique identifier for the layer. source String Requiredsource data source id。 crownColor Array [175,216,142] OptionalCrown color array [r,g,b]。 levels Array [15,17.5,18.5] OptionalAccording to data attributes size control in different zoom The visible hierarchical array under 3。 trunkColor Array [219,195,154] OptionalTrunk color array [r,g,b]。

Load test:

• Test equipment: using LenovoR9000PNotebook (memory:32G,Graphics card:GTX 3070）；
• Loading test: million level(Use default parameters)；

Case

// load3DTree
const sourceId = "tree-source"
map.addSource(sourceId, {
    type: 'geojson',
    data: '../example_data/treedata.geojson',//Point layer data, required attributesidandsize，insizeInclude"S"、"L"、"M"Represents small, medium and large tree models, such as"properties": { "id": 215, "size": "S" }
})
map.add3dTreesLayer({
    id: 'trees',
    source: sourceId,
    trunkColor: [219, 195, 154],
    crownColor: [175, 216, 142],
    crownMesh: 'crown.drc',
})
// Remove3DTree
map.remove3dTreesLayer("trees")

refer to Example。

cameraFlyTo

Change any combination of the camera’s center position, azimuth and tilt to dynamically change it along a curve and trigger a flight effect.

parameter

name	type	describe
options	Object	RequiredDescribes options for transition targets and dynamic effects. Name Type Default Description duration Number RequiredFlight duration in milliseconds. position Array RequiredThe center point of the camera after the flight is over,[a,b,c]Array of form. bearing Number OptionalThe camera’s orientation at the end of the flight, measured in degrees clockwise from north. If not specified, this is the current map orientation. complete Function OptionalCallback function after the flight ends. distance Number OptionalThe distance between the camera and the target center point after the flight is over (>0），The unit is meters. pitch Number 0 OptionalThe tilt angle of the map after the flight. If not specified, this is the current map tilt angle.

Case

let options = {
    position: [120.65717659715574, 31.315522851509385, 500],
    pitch: 10,
    bearing: 90,
    duration: 2000,
    complete: function () {
        new mapmost.Marker()
            .setLngLat([120.65717659715574, 31.315522851509385])
            .addTo(map);
    }
}
map.cameraFlyTo(options);

refer to Example。

defineProject

Custom coordinate system, available foraddRasterLayer2The interface loads the corresponding raster service.

parameter

name	type	describe
code	String	RequiredCoordinate system name, the name must be unique and not repeated. like "4236","3857"，"myProject" wait.
desc	String	Required Reference projection parameters for custom projections,Generally includes name, projection, conversion to WGS84 Coordinate system (three parameters, seven parameters), semi-major axis of ellipsoid, oblateness, origin latitude, central meridian, two standard latitudes, east offset, north offset and units, etc. Details can be obtained fromhttps://epsg.ioGet relevant references from the website.

Case

    // Custom coordinate system
    map.defineProject("project0","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
    // Load a custom coordinate system raster service
    let option = {
        'id': 'test-layer',
        'project': 'project0',
        'source': {
            'tiles': [
                '<your tiles url>'
            ],
            'tileSize': 256
        }
    }
    map.addRasterLayer2(option)

easeTo

Change the map’s center, zoom level, azimuth, and tilt angles in any combination with animated transitions between old and new values. The map retains its current values ​​for any details not specified in the options.

parameter

name	type	describe
options	Object	RequiredDescribes options for transition targets and dynamic effects.
eventData	Object/null	OptionalOther properties that need to be added to the event object triggered by this method.

flyTo

center of map(Supports two-dimensional coordinates and three-dimensional coordinates)、Change any combination of zoom level, azimuth and tilt to dynamically change along a curve and trigger flight effects. This dynamic transformation seamlessly introduces zooming and panning, allowing users to maintain azimuth even after traversing long distances.

parameter

name	type	describe
options	Object	RequiredDescribes options for transition targets and dynamic effects. Name Type Default Description bearing Number OptionalThe orientation of the map at the end of the flight, measured in degrees clockwise from north. If not specified, this is the current map orientation. center Array [0,0] OptionalThe initial center point of the map after the flight. curve Number 1.42 OptionalA scaling curve that appears along with the flight path. To get something likeMap#easeToThe effect is that there will be a higher zoom value for large movements and a lower zoom value for smaller movements. The value is1Circular motion will occur. maxDuration Number OptionalThe maximum duration of the animation, in milliseconds. If the duration exceeds this maximum, it will be reset to 0。 minZoom Number 0 Optionallocated at the vertex of the flight path with 0 The zoom level for the starting point. If specifiedoptions.curveThis option can be ignored. pitch Number 0 OptionalThe tilt angle of the map after the flight. If not specified, this is the current map tilt angle. screenSpeed Number OptionalIn the case of a linear time curve, the average rate of dynamic conversion, in terms of movement per second screenful Quantity calculation. If specified options.speed This option is ignored. speed Number 1.2 Optionalandoptions.curveThe average rate of associated dynamic transitions. The rate is 1.2 Refers to the map per second 1.2 timesoptions.curveThe whole screen is visible (screenful）The speed moves with the flight path.screenfulRefers to the map’s visible screen span area, which does not correspond to a fixed physical distance but varies with zoom level. zoom Number 0 OptionalThe map level after the flight. If not specified, the current map level.

Case

// Use the default function to fly to the initial center point
map.flyTo({center: [0, 0], zoom: 9});
// Use the default function to fly to the initial center point
map.flyTo({center: [0, 0，20], zoom: 9});
// use flyTo function
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});

getBearing

Returns the current azimuth of the map. The azimuth is the direction of the compass. For example, the map azimuth is 90° Corresponds to pointing due east.

Case

const bearing = map.getBearing();

getBounds

Returns the geographic boundaries of the map. when bearingorpitchIf nonzero, the viewable area is not an axis-aligned rectangle, and the result is the smallest bounds that contains the viewable area. It consists of two sets of coordinates: the southwest corner and the northeast corner.

Case

const bounds = map.getBounds();

getCameraParameter

Get the current status parameters of the camera, including the camera’s center position, pitch angle and azimuth angle information.

Case

const options = map.getCameraParameter();

refer to Example。

getCanvas

Return to the map’scanvas”element.

Case

const canvas = map.getCanvas();

getCanvasContainer

Returns a map containing "canvas”LabeledHTMLelement. If you want to add non-GLOverlay layers can be appended (append）at the end of this element. This element is used for event binding for map interactivity (such as panning and zooming). It accepts from child elements"canvas”，But it does not accept bubbling events from the map control.

Case

const canvasContainer = map.getCanvasContainer();

getCenter

Returns the geographical center point of the map.

Case

// Returns a latitude and longitude object. For example{longitude:0，latitude:0}。
const center = map.getCenter();
// Get the latitude and longitude values ​​directly.
const {lng, lat} = map.getCenter();

getContainer

Return to map HTML Nested elements.

Case

const container = map.getContainer();

getFeatureState(feature)

getstatea characteristic. characteristicstateIs a set of user-defined key-value pairs that are assigned to attributes at runtime. Characteristics are determined by theiridProperty identifier, which can be any number or string.

parameter

name	type	describe
feature	Object	RequiredfromMap#queryRenderedFeaturesOr a feature object returned by an event handler, which can be used as a feature identifier. name type describe id String/Number Requiredunique element ID。Can be an integer or a string, but only if promoteId String values ​​are only supported if the option applies to the source or can apply a string to an integer. source String Requiredelemental vector or GeoJSON sourceid。 sourceLayer String OptionalFor vector tile sources,sourceLayer is required.

Case

// when mouse leaves my-layer When the layer is selected, get the element under the mousestate
map.on('mousemove', 'my-layer', (e) => {
    if (e.features.length > 0) {
        map.getFeatureState({
            source: 'my-source',
            sourceLayer: 'my-source-layer',
            id: e.features[0].id
        });
    }
});

getFilter

Returns the filter applied to the specified style layer.

parameter

name	type	describe
layerId	String	RequiredNeed to get the style layer of the filter ID。

Case

const filter = map.getFilter('myLayer');

getLayer

Returns the map style specified in ID of layers.

parameter

name	type	describe
id	String	RequiredLayers to be obtained ID。

Case

const stateDataLayer = map.getLayer('state-data');

getLayoutProperty

Returns the value of the layout property in the specified style layer.

parameter

name	type	describe
layerId	String	Requiredof the layer from which to get layout properties ID。
name	String	RequiredThe name of the layout property to get.

Case

const layoutProperty = map.getLayoutProperty('mySymbolLayer', 'icon-anchor');

getMaxBounds

Returns the maximum geographic extent to which the map is restricted, or if not setnull。

Case

const maxBounds = map.getMaxBounds();

getMaxPitch

Returns the maximum pitch angle of the map.

Case

const maxPitch = map.getMaxPitch();

getMaxZoom

Returns the maximum allowed zoom level of the map.

Case

const maxZoom = map.getMaxZoom();

getMinPitch

Returns the minimum pitch angle of the map.

Case

const minPitch = map.getMinPitch();

getMinZoom

Returns the minimum allowed zoom level of the map.

Case

const minZoom = map.getMinZoom();

getPaintProperty

Sets the value of the draw property in the specified style layer.

parameter

name	type	describe
layerId	String	Requiredof the layer to get drawing properties from ID。
name	String	RequiredThe name of the drawing property to get.

Case

const paintProperty = map.getPaintProperty('mySymbolLayer', 'icon-color');

getPitch

Returns the current tilt of the map.

Case

const pitch = map.getPitch();

getRenderWorldCopies

Returned statusrenderWorldCopies。iftrue，then multiple copies of the world will be in-180and180Degrees of longitude are rendered side by side. If set tofalse：

• When the map is shrunk enough that a single representation of the world cannot fill the entire container of the map, in longitude180degree and-180There will be a blank area outside the degree.
• span 180 degree and -180 Features with degrees of longitude will be split in half (one part at the left edge of the map and another at the left edge of the map) at each zoom level.

Case

const worldCopiesRendered = map.getRenderWorldCopies();

getSource

Returns the map style specified inIDdata source.

parameter

name	type	describe
id	String	RequiredData source to be obtained ID。

Case

const sourceObject = map.getSource('points');

getStyle

Returns the map’s style object, a method that can be used to recreate the map style.JSONobject.

Case

map.on('load', () => {
    const styleJson = map.getStyle();
});

getZoom

Returns the current zoom level of the map.

Case

map.getZoom();

hasImage

Checks whether a style exists with a specificIDimage. This will check the style for the image in the original sprite and at runtime useMap#addImageAny images added.

parameter

name	type	describe
id	String	Requiredgraphic ID。

Case

// Check if it exists in the style’s sprite sheet ID for 'cat' image.
const catIconExists = map.hasImage('cat');

isMoving

Returns if the map is panning, zooming, rotating, or tilting due to camera animation or user gesturestrue。

Case

const isMoving = map.isMoving();

isRotating

Returns if the map is rotated due to camera animation or user gesturetrue。

Case

map.isRotating();

isSourceLoaded

Returns a Boolean value indicating whether the source is loaded.trueIf the map style has the givenIDReturns if the source has no outstanding network requests, otherwise returnsfalse。

parameter

name	type	describe
id	String	Requiredof the source to checkID。

Case

const sourceLoaded = map.isSourceLoaded('bathymetry-data');

isStyleLoaded

Returns a Boolean value indicating whether the map’s styles have been fully loaded.

Case

const styleLoadStatus = map.isStyleLoaded();

isZooming

Returns if the map is zoomed due to camera animation or user gesturetrue。

Case

const isZooming = map.isZooming();

jumpTo

Change any combination of center point, zoom level, azimuth and tilt without dynamic transformations. The map will remainoptionsThere is no current value specified.

parameter

name	type	describe
options	Object	RequiredCameraOptions
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.

Case

// Jump to coordinates at the current zoom level
map.jumpTo({center: [0, 0]});
// Jumped zoom levels, azimuths and tilt angles
map.jumpTo({
    center: [0, 0],
    zoom: 8,
    pitch: 45,
    bearing: 90
});

loadImage

from toMap#addImageused together with externalURLLoad images. External domains must supportCORS。

parameter

name	type	describe
url	String	Requiredimage file URL。The image file must be png、webp or jpg Format.

Case

// from outside URL Load images.
map.loadImage('http://placekitten.com/50/50', (error, image) => {
    if (error) throw error;
    // will be loaded ID for 'kitten' The image is added to the styled sprite.
    map.addImage('kitten', image);
});

moveLayer

Move a layer to anotherzaxis position (z-position）。

parameter

name	type	describe
id	String	RequiredLayers that need to be moved ID。
beforeId	String	OptionalThe existing layer used to insert the new layer ID。If this parameter is omitted, the layer will be added to the end of the layers array.

Case

// move one ID for 'polygon' layer to ID for 'country-label' in front of the layer.`polygon` The layer will appear on the map `country-label` underneath the layer.
map.moveLayer('polygon', 'country-label');

off

Remove previously used Map#on Added event listener.

parameter

name	type	describe
listener	Function	RequiredThe previously installed listener function.
type	String	RequiredThe event type used previously to install the listener.
layerId	String	OptionalThe layer previously used to install the listener ID。Only if the layer is "background"、"circle"、"line"、"fill"、"symbol"、"raster"、"fill-extrusion"、"heatmap" and "hillshade" type is used.

Case

// Create a function to print the coordinates as the mouse moves.
function onMove(e) {
    console.log(`The mouse is moving: ${e.lngLat}`);
}
// Create a function to undo 'mousemove' Event binding.
function onUp(e) {
    console.log(`The final coordinates are: ${e.lngLat}`);
    map.off('mousemove', onMove);
}
// Bind both functions to mouse events on click.
map.on('mousedown', (e) => {
    map.on('mousemove', onMove);
    map.once('mouseup', onUp);
});

on

Add listeners for specific types of events.

parameter

name	type	describe
listener	Function	RequiredFunction called when the event is triggered.
type	String	RequiredThe event type to be monitored, any of the following "mousedown"， "mouseup"， "click"， "dblclick"， "mousemove"， "mouseenter"，"mouseleave"，"mouseover"，"mouseout"，"contextmenu"，"touchstart"，"touchend" or "touchcancel"。"mouseenter" and "mouseover" Triggered when the cursor enters the visible area of ​​the specified layer from outside the map canvas. "mouseleave" and "mouseout" Fired when the cursor leaves the map canvas or the visible area of ​​the specified layer.
layerId	String	Optionalstyle layer ID。The listener is only fired when an event occurs on a visible feature of the layer. The event will get a set of matching elements features property. Only if the layer is"background"、"circle"、"line"、"fill"、"symbol"、"raster"、"fill-extrusion"、"heatmap" and "hillshade" type is used.

Case

// Set up an event listener that fires when the map has finished loading.
map.on('load', () => {
    // Add a new layer.
    map.addLayer({
        id: 'points-of-interest',
        source: {
            type: 'vector',
            url: 'mapmost://mapmost.mapmost-streets-v8'
        },
        'source-layer': 'poi_label',
        type: 'circle',
        paint: {
            // Mapmost Style specification drawing properties
        },
        layout: {
            // Mapmost Style specification layout properties
        }
    });
});

// Set up an event listener that fires when a feature on the country layer on the map is clicked.
map.on('click', 'countries', (e) => {
    new mapmost.Popup()
        .setLngLat(e.lngLat)
        .setHTML(`Country name: ${e.features[0].properties.name}`)
        .addTo(map);
});

// Set up an event listener that fires when a feature on the map’s country or background layer is clicked.
map.on('click', ['countries', 'background'], (e) => {
    new mapmost.Popup()
        .setLngLat(e.lngLat)
        .setHTML(`Country name: ${e.features[0].properties.name}`)
        .addTo(map);
});

once(type,listener)

Add a listener that fires only once for a specific type of event. After registration, the listener will be called when the event is triggered for the first time.

parameter

name	type	describe
listener	Function	RequiredThe callback function when the event is triggered for the first time.
type	String	RequiredThe event type to be monitored.

Case

// Record the coordinates of the user’s first contact with the map.
map.once('touchstart', (e) => {
    console.log(`The first map touch was at: ${e.lnglat}`);
});

panTo

Use animation to pan the map to a specified location.

parameter

name	type	describe
lnglat	LngLatLike	RequiredThe location the map needs to be moved to.
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.
options	Object	OptionalAnimationOptions

Case

map.panTo([-74, 38]);

// SpecifypanToAnimation continues5000millisecond.
map.panTo([-74, 38], {duration: 5000});

pick3dTilesCoordinate

Pick up in map3DTilesThe coordinates of the data are required3DTileslayeredpickableThe attributes aretrue。

parameter

name	type	describe
options	Object	Required name type describe id String/Number Requiredunique element ID。 point String Requiredscreen coordinates, such as`{x: 1152, y: 643}`。

Case

    map.add3dTilesLayer(
        {
            id: 'tile-3d-layer',
            data: TILESET_URL,
            pickable: true
        }
    )

    map.on('click', e => {
        let point = e.point;
        let result = map.pick3dTilesCoordinate(point, "tile-3d-layer")
        console.log(result);
    });

refer to Example。

proj

Coordinate system conversion, internal support"4326","3857","4490","4528"Convert between four types of coordinate systems, and support conversion between custom coordinate systems that define projections in the form of strings.

parameter

name	type	describe
coord	Array	RequiredThe coordinate data that needs to be converted.
fromProj	String	RequiredThe coordinate system that needs to be converted, such as:"4326" or "+proj=longlat +datum=WGS84 +no_defs"。
toProj	String	RequiredTarget coordinate system, such as:"3857" or "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"。

queryRenderedFeatures

Returns a representation of the visible characteristics that satisfy the query parameters.GeoJSON Feature Array of objects.

parameter

Name	Type	Default	Description
filter	Array		RequiredFilter to limit query results.
layers	Array		OptionalStyle layers for query inspection IDarray . Only features in these layers are returned. If this parameter is not defined, all layers will be checked.
validate	Boolean	true	OptionalCheck or not [options.filter] Does it comply withGLStyle specifications. Disabling verification provides better performance.

Case

// Find all elements of a point
const features = map.queryRenderedFeatures(
  [20, 35],
  {layers: ['my-layer-name']}
);
// Find all features within a static bounding box
const features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  {layers: ['my-layer-name']}
);
// Find all features of a bounding box around a point
const width = 10;
const height = 20;
const features = map.queryRenderedFeatures([
    [point.x - width / 2, point.y - height / 2],
    [point.x + width / 2, point.y + height / 2]
], {layers: ['my-layer-name']});
// Query all rendering features of a layer
const features = map.queryRenderedFeatures({layers: ['my-layer-name']});

querySourceFeatures

Return aGeoJSON FeatureArray of objects representing the specified vector slice or GeoJSON Characteristics in the source that satisfy the query parameters.

parameter

Name	Type	Default	Description
filter	Array		RequiredFilter to limit query results.
sourceLayer	Array		OptionalThe name of the source layer to query. This parameter is required for vector tile sources. for GeoJSON source, it is ignored.
validate	boolean	true	OptionalCheck or not [parameters.filter] Does it comply withGLStyle specifications. Disabling verification provides better performance.

Case

// Find all features of a source layer in a vector source
const features = map.querySourceFeatures('your-source-id', {
    sourceLayer: 'your-source-layer'
});

removeControl

Remove the control from the map.

parameter

name	type	describe
control	IControl	Requiredto be deleted IControl。

Case

// Define a new navigation control.
const navigation = new mapmost.NavigationControl();
// Adds zoom and rotation controls to the map.
map.addControl(navigation);
// Removed zoom and rotation controls from the map.
map.removeControl(navigation);

removeFeatureState

deletestatefunction to set it back to the default behavior. If onlyfeature.sourcedesignated a，It will remove the status of all features from that source. iffeature.idAlso specifies that it will remove all keys for that feature state. ifkeyAlso specified, it will only remove the key from the function’s state. Characteristics are determined by theirfeature.idProperty identifier, which can be any number or string.

parameter

name	type	describe
feature	Object	RequiredIt can be a data source, a feature, or a specific feature. fromMap#queryRenderedFeaturesOr a feature object returned by an event handler, which can be used as a feature identifier. name type describe id String/Number Requiredunique element ID。Can be an integer or a string, but only if promoteId String values ​​are only supported if the option applies to the source or can apply a string to an integer. source String Requiredelementalvector or GeoJSON sourceid。 sourceLayer String OptionalFor vector tile sources,sourceLayeris required.
key	string	OptionalThe key to reset the functional state.

Case

// reset’my-source’The entire functional status of all features in the source
map.removeFeatureState({
    source: 'my-source'
});
// when mouse leaves’my-layer’Resets the entire functional state of all features under the mouse when layering
map.on('mouseleave', 'my-layer', (e) => {
    map.removeFeatureState({
        source: 'my-source',
        sourceLayer: 'my-source-layer',
        id: e.features[0].id
    });
});
// when mouse leaves’my-layer’When layering, reset the feature under the mouse`hover`key value pair function
map.on('mouseleave', 'my-layer', (e) => {
    map.removeFeatureState({
        source: 'my-source',
        sourceLayer: 'my-source-layer',
        id: e.features[0].id
    }, 'hover');
});

removeImage

Remove the image from the style (e.g. icon-image or background-patternimages used).

parameter

name	type	describe
id	String	RequiredgraphicID。

Case

// If the style exists in the sprite ID for 'cat' image, delete it.
if (map.hasImage('cat')) map.removeImage('cat');

removeLayer

Remove assignment from map styleIDof layers. Will trigger if the specified layer does not existerrorevent.

parameter

name	type	describe
id	String	RequiredLayers to be removed ID。

Case

// If there exists aIDfor’state-data’layer, delete it.
if (map.getLayer('state-data')) map.removeLayer('state-data');

removeSource

Remove the data source from the map style.

parameter

name	type	describe
id	string	RequiredData source to be removed ID。

Case

map.removeSource('bathymetry-data');

resize

According to itscontainerThe dimensions of the element resize the map. This method must be in the map’scontainerCalled after being resized by another script, or afterCSSThe map is initially hidden and then shown.

parameter

name	type	describe
eventData	Object	OptionalAdditional properties are added to the event object triggered by this method.

Case

// When the map string id was initially CSS Resize the map when shown after hiding.
const mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();

setBearing

Sets the azimuth (rotation) of the map. The azimuth is the direction of the compass. For example, the map azimuth is 90°Corresponds to pointing due east. Equivalent tojumpTo({bearing: bearing})。

parameter

name	type	describe
bearing	Number	RequiredThe azimuth angle needs to be set.
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.

Case

// Rotate the map to90Spend.
map.setBearing(90);

setCameraParameter

Set the status parameters of the camera angle to realize direct jump of the camera angle.

parameter

name	type	describe
options	Object	Requiredparameter name type describe position Array RequiredThe center point of the camera after the flight is over,[a,b,c]Array of form. bearing Number OptionalThe orientation of the camera after the jump, in degrees measured clockwise from north. If not specified, this is the current map orientation. pitch Number OptionalThe tilt angle of the camera after the jump. If not specified, this is the current map tilt angle.

Case

let options = {
    position: [120.65717659715574, 31.315522851509385, 500],
    pitch: 10,
    bearing: 90
}
map.setCameraParameter(options);

refer to Example。

setCenter

Set the geographical center point of the map. Equivalent to jumpTo({center: center})。

parameter

name	type	describe
center	LngLatLike	RequiredThe center point that needs to be set.
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.

Case

map.setCenter([-74, 38]);

setFeatureState

set upstateCharacteristic. characteristicstateIs a set of user-defined key-value pairs that are assigned to attributes at runtime. When using this method,stateThe object will be merged with any existing key-value pairs in the functional state. Characteristics are determined by theiridProperty identifier, which can be any number or string. This method can only be used withidThe source of the property. ShouldidProperties can be defined in three ways: for vector or GeoJSON sources, includingidProperties in the original data file. for vector or GeoJSON source,promoteIdUse this option when defining sources. for GeoJSON Source, use the option to index based on features in the source datagenerateIdOne is assigned automatically.idIf you change characteristic data usingmap.getSource('some id').setData(...)，You may need to reapply the state and consider the updatedidvalue. NOTE: You can usefeature-stateExpression to access the value in the feature state object for styling.

parameter

name	type	describe
feature	Object	RequiredfromMap#queryRenderedFeaturesOr a feature object returned by an event handler, which can be used as a feature identifier. name type describe id String/Number Requiredunique element ID。Can be an integer or a string, but only if promoteId String values ​​are only supported if the option applies to the source or can apply a string to an integer. source String Requireda vector tile source of features or GeoJSON sourceid。 sourceLayer String OptionalFor vector tile sources,sourceLayeris required.
state	Object	RequiredA set of key-value pairs. These values ​​should be validJSON type.

Case

// When the mouse moves to’my-layer’When layering, update the feature under the mousestatefeature
map.on('mousemove', 'my-layer', (e) => {
    if (e.features.length > 0) {
        map.setFeatureState({
            source: 'my-source',
            sourceLayer: 'my-source-layer',
            id: e.features[0].id,
        }, {
            hover: true
        });
    }
});

setFilter

Sets a filter for the specified style layer.

parameter

name	type	describe
filter	Array/null/undefined	RequiredFilter, which needs to comply with the filter definition of the style specification. if providednullorundefined，The function removes any existing filters from the layer.
layerId	String	RequiredThe layer to which the filter needs to be applied ID。
options	Object	Optionalparameter Name Type Default Description validate Bollean true OptionalWhether to check whether the filter matchesGLstyle definition. Cancel verification performance is better.

Case

map.setFilter('my-layer', ['==', 'name', 'USA']);

Case

// Only show with’name’The attributes are’USA’elements of
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);

// Only show that there are5or more’available-spots’elements of
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);

// delete’bike-docks’Filters for style layers
map.setFilter('bike-docks', null);

setLayoutProperty

Sets the value of the layout property in the specified style layer.

parameter

name	type	describe
layerId	String	RequiredYou need to set the layout in it (layout）attribute layerID。
name	String	RequiredThe name of the layout attribute that needs to be set.
value	String	RequiredThe name of the layout attribute that needs to be set.
options	Object	Optionalparameter Name Type Default Description validate Bollean true OptionalCheck or not value Does it comply withGLStyle regulations. Cancel verification performance is better.

Case

map.setLayoutProperty('my-layer', 'visibility', 'none');

setMaxBounds

Sets or clears the geographic extent of the map. Panning and zooming operations are limited to these ranges. If you perform a pan or zoom to display an area outside these boundaries, the map will instead display a location and zoom level as close as possible to the operation’s requested while still staying within the boundaries.

parameter

name	type	describe
bounds	LngLatBoundsLike/null/undefined/Array	RequiredThe maximum limit to set. in the case ofnullorundefined，This function will remove the maximum bounds of the map.

Case

// definition conforms to’LngLatBoundsLike’The object’s boundaries.
const bounds = [
    [-74.04728, 40.68392], // [West, South]
    [-73.91058, 40.87764]  // [East, north]
];
// Set the maximum bounds of the map.
map.setMaxBounds(bounds);

setMaxPitch

Sets or clears the map’s maximum pitch angle. If the map’s current pitch angle is higher than the new maximum, the map will pitch to the new maximum.

parameter

Name	Type	Default	Description
maxPitch	Number	85	OptionalThe maximum pitch angle to set (0-85)。in the case of null or undefine ，then this function deletes the current maximum pitch angle and resets it to 85。

Case

map.setMaxPitch(70);

setMaxZoom

Sets or clears the map’s maximum zoom level. If the map’s current zoom level is higher than the new maximum, the map will zoom to the new maximum.

parameter

Name	Type	Default	Description
maxZoom	Number	22	OptionalThe maximum zoom level to set. in the case of null or undefined ，This function will remove the current maximum zoom and set it to22。

Case

map.setMaxZoom(18.75);

setMinPitch

Sets or clears the map’s minimum pitch angle. If the map’s current pitch angle is lower than the new minimum value, the map will be pitched to the new minimum value.

parameter

Name	Type	Default	Description
minPitch	Number	0	OptionalMinimum pitch angle to set (0-85)。in the case of null or undefined ，then this function deletes the current minimum pitch angle and resets it to 0。

Case

map.setMinPitch(5);

setMinZoom

Sets or clears the map’s minimum zoom level. If the map’s current zoom level is below the new minimum, the map will zoom to the new minimum. It is not always possible to zoom out and reach the setminZoom。Other factors such as map height may limit zooming. For example, if the height of the map is512pixels, no matterminZoomNo matter what is set, it cannot be zoomed to zoomed.0the following.

parameter

Name	Type	Default	Description
minZoom	Number	-2	OptionalMinimum zoom level to set (-2 - 24)。in the case of null or undefined ，then the function will remove the current minimum zoom and set it to-2。

Case

map.setMinZoom(12.25);

setPaintProperty

Sets the value of the draw property in the specified style layer.

parameter

name	type	describe
layerId	String	Requiredof the layer on which you want to set the drawing properties. ID。
name	String	RequiredThe name of the drawing property to set.
value	Any	RequiredThe value of the drawing property to set. Must be of a suitable type for the property, such asStyle Specificationdefined in.
option	Object	Optionalparameter Name Type Default Description validate Bollean true OptionalCheck or not value Comply with style specifications. Cancel verification performance is better.

Case

map.setPaintProperty('my-layer', 'fill-color', '#faafee');

setPitch

Sets the tilt of the map. Equivalent tojumpTo({pitch: pitch})。

parameter

name	type	describe
pitch	Number	RequiredThe tilt angle that needs to be set (0-85）。
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.

Case

// Use a paragraph2Seconds of animation to set the tilt angle of the map.
map.setPitch(80, {duration: 2000});

setRenderWorldCopies

set statusrenderWorldCopies。

parameter

Name	Type	Default	Description
renderWorldCopies	Boolean	true	Optionaliftrue，then multiple copies of the world will be in-180and180Degrees of longitude are rendered side by side. If set tofalse，When the map is shrunk enough that a single representation of the world cannot fill the entire container of the map, in longitude180degree and-180There will be a blank area outside the degree. At each zoom level, spanning180degree and-180Features with degrees of longitude will be split in half (one part on the right edge of the map and one part on the left edge of the map).

Case

map.setRenderWorldCopies(true);

setStyle

Update the map with new values Mapbox style object. If the style has been set when using anddiffoption is set totrue，The map renderer will then attempt to compare the given style to the current state of the map and perform only the changes needed to make the map style match the desired state. Changes to sprites (images used for icons and patterns) and glyphs (fonts used for label text) are indistinguishable. If there are any differences between the current style and the sprites or fonts used in a given style, the map renderer will force a complete update, deleting the current style and building the given style from scratch.

parameter

name	type	describe
style	Object/String	Requiredconform toStyle Specificationof the pattern described inJSONobject, or suchJSONofURL。
option	Object	Optionalparameter Name Type Default Description diff Bollean true Optionalif for false，then forces a "full" update, removing the current style and building the given style instead of attempting a diff-based update. localIdeographFontFamily String sans-serif Optionaldefine a CSS Font family, used in"CJK Unified Ideographs"、"Hiragana"、"Katakana" and "Hangul Syllables"Overrides locally generated glyphs in scope. Within these ranges, map style font settings are ignored, except for the font-weight keyword (light/regular/medium/bold）。set to false , to enable the font settings in the map style for these glyph ranges. Force a full update. .

Case

map.setStyle("http://***/mms-style/****.json");

setZoom

Set the zoom level of the map. Equivalent tojumpTo({zoom: zoom})。

parameter

name	type	describe
zoom	Number	RequiredThe zoom level to set (0-20）。
eventData	Object	OptionalOther properties that need to be added to the event object triggered by this method.

Case

// No cutscenes zoom to zoom level5
map.setZoom(5);

event

click

Fired when a device (usually a mouse) is pressed and released at the same point on the map.

NOTE: This event is associated with the optionallayerIdParameters are compatible. iflayerIdincluded inMap#onas the second parameter, the event listener will only fire when the pressed and released points contain the visible part of the specified layer.

    // Initialize map
    var map = new mapmost.Map({ 
       // Map options 
       });
    // Set event listener
    map.on('click', function(e) {
    console.log('A click event has occurred at ' + e.lngLat);
    });

    // Initialize map
    var map = new mapmost.Map({ 
      // Map options
      });
    // Set event listeners for features' layers
    map.on('click', 'poi-label', function(e) {
      console.log('A click event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
    });

 

contextmenu

Fires when the right mouse button is clicked or the context menu key is pressed in the map.

// Initialize map
var map = new mapmost.Map({ 
  // Map options
  });
// Set the event listener to fire when the right mouse button is pressed in the map.
map.on('contextmenu', function() {
  console.log('A contextmenu event occurred.');
});

 

move

Fires repeatedly during an animated transition from one view to another, as a method of user interaction or method.

// Initialize map
var map = new mapmost.Map({
   // Map options
   });
// Set the event listener to fire repeatedly during the animation transition.
map.on('move', function() {
  console.log('A move event occurred.');
});

 

dblclick

Fired when a device (usually a mouse) is pressed and released twice at the same location on the map.

NOTE: This event is associated with the optionallayerIdParameters are compatible. iflayerIdincluded inMap#onas the second parameter, the event listener will only fire when the point clicked twice contains the visible part of the specified layer.

    // Initialize map
    const map = new mapmost.Map({});
    // Set event listener
    map.on('dblclick', (e) => {
        console.log('A dblclick event has occurred at ' + e.lngLat);
    });

    // Initialize map
    const map = new mapmost.Map({});
    // Set event listeners for specific layers
    map.on('dblclick', 'poi-label', (e) => {
        console.log('A dblclick event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
    });

 

drag

exist"Drag pan"Triggered repeatedly during interaction.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag pan"Turn on repeatedly during interaction.
    map.on('drag', () => {
        console.log('A drag event occurred.');
    });

 

dragend

when"Drag pan"Fires when the interaction ends.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag pan"Turned on at the end of the interaction process.
    map.on('dragend', () => {
         console.log('A dragend event occurred.');
    });

 

dragstart

when"Drag pan"Fired when the interaction starts.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag pan"Turned on at the beginning of the interaction process.
    map.on('dragstart', () => {
        console.log('A dragstart event occurred.');
    });

 

load

Starts immediately after all necessary assets have been downloaded and the first visually complete rendering of the map has been made.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire when the map has finished loading.
    map.on('load', () => {
        console.log('A load event occurred.');
    });

 

moveend

Fires after the map has completed transitioning from one view to another, either from user interaction orMap#jumpToThe results of other methods.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to start after the map completes conversion.
    map.on('moveend', () => {
        console.log('A moveend event occurred.');
    });

 

movestart

Launched before the map begins to transition from one view to another, either by user interaction orMap#jumpToThe results of other methods.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to start before the map transitions from one view to another.
    map.on('movestart', () => {
        console.log('A movestart` event occurred.');
    });

 

pitch

In the pitch (tilt) animation of the map between one state and another due to user interaction orMap#flyToTriggered repeatedly by waiting for the result of the method.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire repeatedly during the map’s pitch (tilt) transition state.
    map.on('pitch', () => {
        console.log('A pitch event occurred.');
    });

 

pitchend

Fires immediately after the map’s pitch (tilt) has changed, either from user interaction orMap#flyToThe results of other methods.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire as soon as the map’s pitch (tilt) changes.
    map.on('pitchend', () => {
        console.log('A pitchend event occurred.');
    });

 

pitchstart

When the map’s pitch starts to change, due to user interaction or something likeMap#flyToTriggered by the result of the method.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to start before the map’s pitch (tilt) begins to change.
    map.on('pitchstart', () => {
        console.log('A pitchstart event occurred.');
    });

 

remove

on the mapMap.event:removeFires immediately upon removal.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to start as soon as the map is removed.
    map.on('remove', () => {
        console.log('A remove event occurred.');
    });

 

resize

Fires immediately after the map is resized.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire as soon as the map is resized.
    map.on('resize', () => {
        console.log('A resize event occurred.');
    });

 

rotate

exist "Drag to rotate "Triggered repeatedly during interaction.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag to rotate "Turn on repeatedly during interaction.
    map.on('rotate', () => {
        console.log('A rotate event occurred.');
    });

 

rotateend

when "Drag to rotate "Fires when the interaction ends.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag to rotate "Turns on at the end of the interaction.
    map.on('rotateend', () => {
        console.log('A rotateend event occurred.');
    });

 

rotatestart

when "Drag to rotate "Fired when the interaction starts.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to the"Drag to rotate "Enabled when interaction begins.
    map.on('rotatestart', () => {
        console.log('A rotatestart event occurred.');
    });

 

zoom

Triggered repeatedly during animations transitioning from one zoom level to another, either from user interaction orMap#flyToThe results of other methods.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire repeatedly on zoom transitions.
    map.on('zoom', () => {
        console.log('A zoom event occurred.');
    });

 

zoomend

Fires after the map has completed transitioning from one zoom level to another, either by user interaction orMap#flyToThe results of other methods.

The scaling transform will usually end before rendering completes, so if you need to wait for rendering to complete, you can useMap.event:idleevents instead.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to fire at the end of the zoom transition.
    map.on('zoomend', () => {
        console.log('A zoomend event occurred.');
    });

 

zoomstart

Launched before the map begins transitioning from one zoom level to another, either by user interaction orMap#flyToThe results of other methods.

    // Initialize map
    const map = new mapmost.Map({});
    // Set the event listener to start before the zoom transition begins.
    map.on('zoomstart', () => {
        console.log('A zoomstart event occurred.');
    });