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

已于 2023-09-13 11:39:33 修改
阅读量838 收藏 3
点赞数 1
分类专栏： map maptalks mapUtil 文章标签： javascript
于 2023-09-13 11:18:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76501724/article/details/132845806
版权
map 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
maptalks
1 篇文章 0 订阅
订阅专栏
mapUtil
1 篇文章 0 订阅
订阅专栏

文章目录

一、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地图控件的示例

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

2301_76501724
关注
专栏目录
maptalks更换底图（自定义底图）
weixin_40856652的博客
06-14 951
maptalks更换底图（自定义底图）
大模型微调部署实战及类GPT工具的高效使用
热门推荐
herosunly的博客
07-24 9万+
本文主要介绍了专栏《大模型微调部署实战及类GPT工具的高效使用》的核心内容，希望对使用大语言模型的同学们有所帮助。 文章目录 1. 前言 2. 专栏亮点 3. 你的收获 4. 详细目录
vue3项目引入maptalks+百度地图做图层（无需百度地图的key）
m0_65354547的博客
08-02 367
在vue3中使用maptalks+百度地图
【地图自学系列】maptalks本地缓存瓦片
最新发布
前端小学生的博客
09-04 471
这篇是为了提升二次加载瓦片速度的文章。受到前一篇图片本地缓存 indexedDB 技术的启发，想把地图的瓦片缓存到本地，达到少请求，优化加载速度。想不到效果还不错，提升至少50%以上。特别在高分辨率地图的情况下。先看对比效果高分辨率地图二次加载对比高分辨率地图层级切换对比。
maptalks简单使用
weixin_44244924的博客
03-31 660
maptalks简单使用
使用vue引入maptalks地图及聚合效果的实现
10-14
主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用maptalks绘制地图教程
Sparkling_Y的博客
12-16 1777
官网是html，此文介绍vue框架下的写法
vue项目中使用bpmn-自定义platter的示例代码
11-20
在`CustomPalette.js`同级目录下创建`index.js`文件，将`CustomPalette`类导出，并定义一个名为`customPalette`的初始化项，将其与`CustomPalette`类关联。这样，我们在Vue项目中引入这个模块时，就能使用自定义的...
maptalks场景地图深圳南山区白模geojson数据
05-28
使用maptalks与GeoJSON数据，开发者可以构建一个交互式的地图应用，展示深圳南山区的3D模型和路网。通过解析GeoJSON文件，将其中的几何对象渲染到地图上，用户可以查看南山区的地理位置、道路布局，甚至可以通过交互...
自定义模板批量创建Excel工具使用指南
资源摘要信息:"本资源提供了一个批量生成Excel文件的小工具，它具备以下特点和功能：首先，用户可以自定义生成的Excel模板内容，这使得工具在处理各种类型的数据时具有极高的灵活性。其次，该工具能够根据提供的名单...
maptalksjs一个轻的JavaScript库来创建集成的2D3D地图
08-10
maptalks.js 一个轻的JavaScript库来创建集成的2D / 3D地图
vue 地图可视化 maptalks 篇实例代码详解
10-16
主要介绍了vue 地图可视化 maptalks 篇，本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
maptalks-three-test:maptalks-三个示例测试https
05-14
这是maptalks.three示例测试 这是maptalks.three示例，基于 例子 。 。 。
maptalks-vue：基于maptalks，threejs 3d地图vue框架
04-02
maptalks-vue：基于maptalks，threejs 3d地图vue框架
MapTalks.js 开源项目教程
gitblog_00704的博客
08-10 309
MapTalks.js 开源项目教程 maptalks.jsA light and plugable JavaScript library for integrated 2D/3D maps.项目地址:https://gitcode.com/gh_mirrors/ma/maptalks.js 项目介绍 MapTalks.js 是一个轻量级且可插拔的 JavaScript 库，用于集成 2D/3D...
maptalks入门教程--区域块着色
gc0704012047的专栏
07-24 1298
maptalks入门demo
GIS工具maptalks开发手册(四)01——渲染地图信息框之添加绘制工具、获取点的坐标数据信息框进行展示
weixin_44867717的博客
12-02 1721
gis
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值