如何使用maptalks自定义工具类创建与使用地图

一、maptalks官网

maptalks官网地址：https://maptalks.org/

以下内容全部为js实用工具类，自行创建js文件并进行保存使用
↓↓
创建一个名为ZCmap.js的文件

二、 引入依赖

document.write("<link rel='stylesheet' href='https://unpkg.com/maptalks/dist/maptalks.css'>");
document.write("<script language='javascript' src='https://unpkg.com/maptalks/dist/maptalks.min.js'></script>");

上面代码引入js文件中后，在html文件中使用时就不需要引入

三、创建和使用地图功能的方法

1、显示地图

1.1显示地图的方法

var ZCmap = {};//声明一个空对象
ZCmap.map = null;//声明地图名称
/**
  * 创建地图的方法
  * @param {地图容器id} mapid 
  * @param {初始地图中心点 数组} mapcenter 
  * @param {初始地图视距 数字} mapzoom  
  * @param {初始地图模板和子域名} basedata 
  */
ZCmap.creatMap = function (mapId, mapCenter, mapZoom, baseData) {
    ZCmap.map = new maptalks.Map(mapId, {
        center: mapCenter,
        zoom: mapZoom,
        baseLayer: new maptalks.TileLayer('base', baseData),
    })
}

1.2地图模板与子域名的配置

ZCmap.baseData = {//地图模板与子域名配置
    1: {//maptalks默认地图
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd']
    },
    2: {//暗色地图
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd']
    },
    3: {//彩色地图
        urlTemplate: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c']
    },
    4: {//ESRI Imagery卫星地图
        urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        subdomains: ['0', '1', '2', '3']
    },
    5: {//高德地图
        urlTemplate: 'https://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
        subdomains: ['0', '1', '2', '3']
    },
    6: {//地形地图
        urlTemplate: 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd']
    }
};

1.3创建地图的示例

<!--使用自定义js工具前需要创建一个地图容器，并设置容器大小-->
<div id="map"></div>

记得在html中引入ZCmap.js文件才能使用

ZCmap.creatMap("map", [105.08052356963802, 36.04231948670001], 14, ZCmap.baseData[1])

2、地图功能交互

2.1交互功能的方法

var isMapEnabled = true; // 定义地图功能是否启用
/**
 * 地图所有功能的启用与关闭
 */
ZCmap.role = function () {
    isMapEnabled = !isMapEnabled;  // 切换地图状态
    // 地图交互功能
    ZCmap.map.config({
        draggable: isMapEnabled,          // 拖拽
        dragPan: isMapEnabled,            // 拖拽平移
        dragRotate: isMapEnabled,         // 拖拽旋转
        dragPitch: isMapEnabled,          // 拖拽俯仰
        scrollWheelZoom: isMapEnabled,    // 滚轮缩放
        doubleClickZoom: isMapEnabled,    // 双击缩放
        touchZoom: isMapEnabled           // 触摸缩放
    });
}
/**
 * 拖拽
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isDraggable = function (isBoolean) {
    ZCmap.map.config('draggable', isMapEnabled)
}
/**
 * 拖拽平移
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isDragPan = function (isBoolean) {
    ZCmap.map.config('dragPan', isMapEnabled)
}
/**
 * 拖拽旋转
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isDragRotate = function (isBoolean) {
    ZCmap.map.config('dragRotate', isMapEnabled)
}
/**
 * 拖拽俯仰
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isDragPitch = function (isBoolean) {
    ZCmap.map.config('dragPitch', isMapEnabled)
}
/**
 * 滚轮缩放
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isScrollWheelZoom = function (isBoolean) {
    ZCmap.map.config('scrollWheelZoom', isMapEnabled)
}
/**
 * 双击缩放
 * @param {true开启 false关闭} isBoolean 
 */
ZCmap.role.isDoubleClickZoom = function (isBoolean) {
    ZCmap.map.config('doubleClickZoom', isMapEnabled)
}

2.2交互功能的示例

<!--点击按钮可以切换已定义的地图所有功能的启用与关闭-->
<button onclick="ZCmap.role()"></button>

3、地图绘制工具

3.1绘制工具方法

ZCmap.utilMap = {}//定义地图工具类的为空对象
var drawTool = null;//声明绘制图形
var layer = null;//声明标注图层
/**
 * 创建添加绘制图形方法
 * @param {图形，图形样式} diagramStyle 
 */
ZCmap.utilMap.creatDiagram = function (diagramStyle) {
    var data = null;//数据
    if (layer == null) {
        layer = new maptalks.VectorLayer('vector').addTo(ZCmap.map);
    }
    drawTool = new maptalks.DrawTool(diagramStyle).addTo(ZCmap.map);
    /**
     * 监听图形绘制完成后获取数据
     */
    drawTool.on('drawend', function (param) {
        var geometry = param.geometry;
        console.log(geometry)
        // 获取图形类型
        var drawToolType = diagramStyle.mode;
        console.log('名称:', drawToolType);
        // 获取图形样式
        var drawToolStyle = geometry._symbol;
        console.log('样式:', drawToolStyle);
        // 获取图形坐标
        var coordinates = geometry.getCoordinates();
        console.log('坐标:', coordinates);

        if (drawToolType == 'Point') {
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        } else if (drawToolType == 'LineString') {
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        } else if (drawToolType == 'Polygon') {
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        } else if (drawToolType == 'Circle') {
            var radius = geometry.getRadius(); // 获取半径
            console.log("圆的半径: ", radius);
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates, radius: radius }
        } else if (drawToolType == 'Ellipse') {
            var semiWidth = geometry.width; // 获取横轴长度
            var semiHeight = geometry.height; // 获取纵轴长度
            console.log("椭圆的横轴长度: ", semiWidth);
            console.log("椭圆的纵轴长度: ", semiHeight);
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates, semiWidth: semiWidth, semiHeight: semiHeight }
        } else if (drawToolType == 'Rectangle') {
            var topLeft = coordinates[0][0]; // 获取左上角坐标
            var bottomRight = coordinates[0][2]; // 获取右下角坐标
            console.log("矩形的左上角坐标: ", topLeft);
            console.log("矩形的右下角坐标: ", bottomRight);
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        } else if (drawToolType == 'FreeHandLineString') {
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        } else if (drawToolType == 'FreeHandPolygon') {
            data = { drawToolType: drawToolType, drawToolStyle: drawToolStyle, coordinates: coordinates }
        }
         layer.addGeometry(geometry);//监听绘制完成后将绘制图形添加到图层
    });
}

3.2参数diagramStyle的自定义配置

ZCmap.utilMap.diagram = {//绘制工具的图形样式
    Point: {//点模式，用于绘制单个点
        1: {//实心圆点
            mode: 'Point',
            symbol: {
                'markerType': 'ellipse',
                'markerWidth': 10,
                'markerHeight': 10,
                'markerFill': '#ff0000',
                'markerFillOpacity': 1,
                'markerLineWidth': 0,
                'markerLineColor': '#ffffff',
                'markerLineOpacity': 0
            }
        },
    },
    LineString: {//线串模式，用于绘制线段
        1: {//实线样式
            mode: 'LineString',
            symbol: {
                'lineWidth': 2,                  // 线宽度为2像素
                'lineColor': '#ff0000',          // 线颜色为红色
                'lineOpacity': 1                 // 线透明度为完全不透明
            }
        },
       
    },
    Polygon: {//多边形模式，用于绘制封闭曲线
        1: {//实色多边形样式
            mode: 'Polygon',
            symbol: {
                'polygonFill': '#ff0000',        // 填充颜色为红色
                'polygonOpacity': 0.5,           // 填充透明度为0.5
            }
        },
    },
    Circle: {//圆模式，用于绘制圆形
        1: {//实色圆样式
            mode: 'Circle',
            symbol: {
                'polygonFill': '#ff0000',        // 填充颜色为红色
                'polygonOpacity': 0.5,           // 填充透明度为0.5
                'polygonRadius': 10              // 圆半径为10像素
            }
        },
    },
    Ellipse: {//椭圆模式，用于绘制椭圆形
        1: {//实色椭圆样式
            mode: 'Ellipse',
            symbol: {
                'polygonFill': '#ff0000',        // 填充颜色为红色
                'polygonOpacity': 0.5,           // 填充透明度为0.5
                'polygonRadius': [20, 10]        // 椭圆 x 轴半径为20像素，y 轴半径为10像素
            }
        },
    },
    Rectangle: {//矩形模式，用于绘制矩形区域
        1: {//实色矩形样式
            mode: 'Rectangle',
            symbol: {
                'polygonFill': '#ff0000',        // 填充颜色为红色
                'polygonOpacity': 0.5,           // 填充透明度为0.5
                'polygonWidth': 50,              // 矩形宽度为50像素
                'polygonHeight': 30,              // 矩形高度为30像素
            }
        },
    },
    FreeHandLineString: {//自由绘制线串模式，手绘线段
        1: {//实线样式
            mode: 'FreeHandLineString',
            symbol: {
                'lineColor': '#ff0000',         // 线条颜色为红色
                'lineWidth': 2,                 // 线条宽度为2像素
                'lineOpacity': 0.7              // 线条透明度为0.7
            }
        },
    },
    FreeHandPolygon: {//自由绘制多边形模式，手绘封闭曲线
        1: {//实填充样式
            mode: 'FreeHandPolygon',
            symbol: {
                'polygonFill': '#ff0000',    // 填充颜色为红色
                'polygonOpacity': 0.5    // 填充透明度为0.5        
            }
        },
    }
}

3.3绘制工具的示例

<!--当点击按钮时可以在地图单击进行线绘制，双击退出当前线绘制-->
<button onclick="ZCmap.utilMap.creatDiagram(ZCmap.utilMap.diagram.LineString[1])"></button>

4、清除图层，禁用绘制

4.1清除图层，禁用绘制的方法

/**
 * 清除图层
 */
ZCmap.utilMap.clearVectorLayer = function () {
    if (layer == null) {
        console.log("没有需要清除的图层")
    } else {
        layer.clear();
        console.log("图层清除成功！")
    }
}
/**
 * 禁用或取消绘制图形标注
 */
ZCmap.utilMap.disableDiagram = function () {
    if (layer == null) {
        console.log("没有需要禁用的绘制图形工具")
    } else {
        drawTool.disable();
        console.log("绘制图形工具禁用成功！")
    }
}

4.2清除图层，禁用绘制的示例

当绘制完一个图形时，可以点击下方按钮，取消当前使用的绘制图形工具

<button onclick="ZCmap.utilMap.disableDiagram ()"></button>

想要清空已绘制的图形，可以点击以下按钮

<button onclick="ZCmap.utilMap.clearVectorLayer ()"></button>

5、导出地图

5.1导出地图的方法

/**
 * 导出jpeg格式图片
 */
ZCmap.utilMap.exportJpg = function () {
    const data = ZCmap.map.toDataURL({
        mimeType: "image/jpeg", // or 'image/png'
        save: true, // to pop a save dialog
        fileName: "map", // file name
    });
}
/**
 * 导出png格式图片
 */
ZCmap.utilMap.exportPng = function () {
    const data = ZCmap.map.toDataURL({
        mimeType: "image/png", // or 'image/jpeg'
        save: true, // to pop a save dialog
        fileName: "map", // file name
    });
}

5.2导出图片的示例

<!--点击按钮导出png格式图片-->
<button onclick="ZCmap.utilMap.exportPng()"></button>

6、地图控件

6.1地图控件的方法

var attrControl = null;//定义属性控件
var zoomControl = null;//定义缩放控件
var scaleControl = null;//定义比例尺控件
var overviewControl = null;//定义鹰眼控件
var topRightCompass = null;//定义指北针控件
ZCmap.controlMap = function () {
    if (attrControl == null && zoomControl == null && scaleControl == null && overviewControl == null && topRightCompass == null) {
        // 添加属性控件
        attrControl = new maptalks.control.Attribution();
        ZCmap.map.addControl(attrControl);

        // 添加缩放控件
        zoomControl = new maptalks.control.Zoom();
        ZCmap.map.addControl(zoomControl);
        // 添加比例尺控件
        scaleControl = new maptalks.control.Scale();
        ZCmap.map.addControl(scaleControl);
        // 添加鹰眼控件
        overviewControl = new maptalks.control.Overview();
        ZCmap.map.addControl(overviewControl);
        //添加指北针控件
        topRightCompass = new maptalks.control.Compass({
            position: 'top-right',
        });
        ZCmap.map.addControl(topRightCompass);
    }
}
ZCmap.controlMap.remove = function () {
    // 从地图中删除属性控件
    ZCmap.map.removeControl(attrControl);
    attrControl = null;
    // 从地图中删除缩放控件
    ZCmap.map.removeControl(zoomControl);
    zoomControl = null;
    // 从地图中删除比例尺控件
    ZCmap.map.removeControl(scaleControl);
    scaleControl = null;
    // 从地图中删除鹰眼控件
    ZCmap.map.removeControl(overviewControl);
    overviewControl = null;
    //从地图中删除指北针控件
    ZCmap.map.removeControl(topRightCompass);
    topRightCompass = null;
}
ZCmap.controlMap.addAttrControl = function () {
    if (attrControl == null) {
        // 添加属性控件
        attrControl = new maptalks.control.Attribution();
        ZCmap.map.addControl(attrControl);
    }
}
ZCmap.controlMap.addZoomControl = function () {
    if (zoomControl == null) {
        // 添加缩放控件
        zoomControl = new maptalks.control.Zoom();
        ZCmap.map.addControl(zoomControl);
    }
}
ZCmap.controlMap.addScaleControl = function () {
    if (scaleControl == null) {
        // 添加比例尺控件
        scaleControl = new maptalks.control.Scale();
        ZCmap.map.addControl(scaleControl);
    }
}
ZCmap.controlMap.addOverviewControl = function () {
    if (overviewControl == null) {
        // 添加鹰眼控件
        overviewControl = new maptalks.control.Overview();
        ZCmap.map.addControl(overviewControl);
    }
}
ZCmap.controlMap.addTopRightCompass = function () {
    if (topRightCompass == null) {
        //添加指北针控件
        topRightCompass = new maptalks.control.Compass({
            position: 'top-right',
        });
        ZCmap.map.addControl(topRightCompass);
    }
}
ZCmap.controlMap.removeAttrControl = function () {
    // 从地图中删除属性控件
    ZCmap.map.removeControl(attrControl);
    attrControl = null;
}
ZCmap.controlMap.removeZoomControl = function () {
    // 从地图中删除缩放控件
    ZCmap.map.removeControl(zoomControl);
    zoomControl = null;
}
ZCmap.controlMap.removeScaleControl = function () {
    // 从地图中删除比例尺控件
    ZCmap.map.removeControl(scaleControl);
    scaleControl = null;
}
ZCmap.controlMap.removeOverviewControl = function () {
    // 从地图中删除鹰眼控件
    ZCmap.map.removeControl(overviewControl);
    overviewControl = null;
}
ZCmap.controlMap.removeTopRightCompass = function () {
    //从地图中删除指北针控件
    ZCmap.map.removeControl(topRightCompass);
    topRightCompass = null;
}
ZCmap.controlMap.setZoom = function (MinZoom, MaxZoom) {
    //限制地图缩放最小、最大
    ZCmap.map.setMinZoom(MinZoom).setMaxZoom(MaxZoom);
}

6.2地图控件的示例

写累了，不想都写了，使用示例与之前一致！！！