Maptalks: basic operation and wms/wmts map service loading

    maptalks Is a plug-in lightweight two-dimensional map rendering library , The core library contains the most commonly used core functions , Including base map rendering , Vector rendering , Built in interactive drawing tools , Ranging side tools, etc . For compatibility , The core library is mainly based on canvas Technical development （ The base map is in 3D mode webgl Rendering ）.
     For work , It took me half a day to have a rough look maptalks Official website Some examples of , Mainly map Map initialization and Layer Example of layer loading and management . Here is some sample code .

maptalks-Map initialization

Map： Map initialization

    Map The example code for initialization is as follows , Reference resources API can Click here to view ,

   // Create a base layer 
    let baseLayer = new maptalks.TileLayer('base', {
    
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c', 'd'],
            // attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
            // css filter
            cssFilter: 'sepia(100%) invert(90%)',
            opacity: 0.95, // TileLayer's opacity, 0-1
        })
   // initialization maptalks
    var map = new maptalks.Map('map', {
    
        center: [121.467, 31.0334],
        zoom: 10,
        minZoom: 1, // set map's min zoom to 14
        maxZoom: 14, // set map's max zoom to 14
        //  Drag the tilt rotation parameter 
        //allow map to drag pitching, true by default
        dragPitch: true, // Disable lifting / The camera pitch Angle switch 
        //allow map to drag rotating, true by default
        dragRotate: true, //false- Disable rotation 
        //enable map to drag pitching and rotating at the same time, false by default
        dragRotatePitch: true, //
        doubleClickZoom: false, // Cancel the mouse double click zoom effect 
        baseLayer: baseLayer,
    });

Map： Layer mount

     To facilitate the management of various layer objects , It can be used as an attribute , Mount to the above created Map For instance .

// Mount layer 
    map.configLayers = {
    
        base_layer: baseLayer, // Base map layer 
        sh_layer: undefined, // Base vector layer 
        shpt_layer: undefined, // Mark point layer 
        heatmap_layer: undefined, // Heat map layers 
        threejs_layer: undefined, //threejs Layers 
        //......
    };

maptalks- load Geometry and Marker Marker points

    Geometry Represent various geometric figures ,maptalks Includes Path、Marker、Label、Curve、Circle、Rectangle、Polygon And other geometric interfaces , Here is what will be JSON Data to Geometry, And then as a VectorLayer Vector layer objects , Load into Map In the map .

     The sample code is as follows ,

    /** *  Acquisition data source - As geometry * */
    function getDataAsGeometry(_dataSource) {
    
        let geometries = undefined;
        $.ajax({
    
            url: "./data/" + _dataSource + ".json",
            method: "GET",
            async: false,
            success: function(result, text, xhr) {
    
                //GeoJSON utilities-Convert one or more GeoJSON objects to geometry 
                geometries = maptalks.GeoJSON.toGeometry(result);
            }
        });
        return geometries;
    }
   /** *  initialization JSON Boundary data  * */
    function intSHMap(_map, _layerName, _dataSource) {
    
    		// What you get is MultiPloygon Array 
        let geometries = getDataAsGeometry(_dataSource);
        // Create a vector layer -VectorLayer
        _map.configLayers[_layerName] =
            /*let vecLayer =*/
            new maptalks.VectorLayer('vector', geometries).addTo(_map);
        // Set layer styles 
        _map.configLayers[_layerName].setStyle([{
    
            visible: true,
            //  Style attribute 
            symbol: {
    
                // Line style fill 
                lineColor: "skyblue",
                lineWidth: 1,
                // Face fill color settings 
                polygonFill: '#18f1f1',
                polygonOpacity: 0,
            }
        }]);

    }
    /** *  Initialize center mark point Marker * */
    function initMarker(_map, _layerName, _dataSource) {
    
        //json To geometry
        let geometries = getDataAsGeometry(_dataSource);
        let shptArray = new Array();
        // Traverse geometries- Add center mark point 
        geometries.some(function(value, index, array) {
    
                let properties = value.properties; // Get attribute data 
                shptArray.push(
                    new maptalks.Marker(properties.center, {
    
                        id: properties.name,
                        visible: true,
                        editable: true,
                        cursor: 'pointer',
                        shadowBlur: 0,
                        shadowColor: 'black',
                        draggable: false,
                        dragShadow: false, // display a shadow during dragging
                        drawOnAxis: null, // force dragging stick on a axis, can be: x, y
                        symbol: {
    
                            'textFaceName': 'sans-serif',
                            'textName': properties.name,
                            'textFill': '#fffff',
                            'textHorizontalAlignment': 'right',
                            'textSize': 22
                        },
                        properties: {
    
                            altitude: 2500,
                            properties: properties
                        }
                    })
            // establish geometryCollection aggregate 
        let geometriesCollection = new maptalks.GeometryCollection(shptArray, {
    })
            // add to marker Assemble to VectorLayer in 
        _map.configLayers[_layerName] = new maptalks.VectorLayer('vector_Marker', geometriesCollection).addTo(_map);

    }
	

maptalks Load map service

maptalks： load WMS Map service

     adopt maptalks Load locally published geoserver-WMS The service example code is as follows ,（ The above picture shows the preview layer ）

 /** *  load WMS service  * */
    function loadWMSLayer(_map) {
    
        var layer = new maptalks.WMSTileLayer('wms', {
    
            'urlTemplate': 'http://localhost:8089/geoserver/shanyang/wms',
            'crs': 'EPSG:3857',
            'layers': 'shanyang:shanayng',
            'styles': '',
            'version': '1.1.1',
            'format': 'image/png',
            'transparent': true,
            'uppercase': true
        });
        _map.addLayer(layer)
    }

     About loading parameters , You can get it from the address bar of the preview layer ,
     The loading result is shown in the following figure ,

maptalks： load WMTS Map service

    maptalks Loadable XYZ The standard WMTS Map tile slice data （ Slicing services are published in the form of static resources Tomcat Server , The directory structure is shown in the figure above ）, The sample code is as follows ,

/** *  load WMTS service  */
    function loadWMTSLayer(_map) {
    
        let layer = new maptalks.TileLayer('boudaries', {
    
            urlTemplate: 'http://localhost:8010/zaozhuang/zzt_tiles/' + '{z}/{x}/{y}.png',
            minZoom: 0,
            maxZoom: 16,

        });
        _map.addLayer(layer)
    }

     The loading results are as follows ,