当前位置： 首页 > news >正文

leafletMap封装使用

news 2025/8/8 9:33:23

一、封装leafletMap

import "leaflet.markercluster";
class LeafletMap {constructor() {const a = this;a.config = {domId: "container",center: [33.25, 113.52],zoom: 8,zoomSnap: 8.5, //地图缩放级别，支持小数，但会影响地图缩放      zoomControl: false, //禁止缩放touchZoom: false, //禁止触摸scrollWheelZoom: false, //禁止鼠标滚轮dragging: false, //禁止拖拽};}init(config) {const a = this;a.config = { ...a.config, ...config,renderer: L.canvas() // 或者 L.svg()};a.map = L.map(a.config.domId, a.config);return a.map;}// 高德离线图层addGDLayers(url) {const a = this;if (!configItem.tmsLayer) {L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}" //在线高德地图// "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8" //在线高德卫星图).addTo(a.map);} else {L.tileLayer(configItem.tmsLayer , {/*minZoom: 1,maxZoom: 14,*/}).addTo(a.map);}}// 百度离线图层addBDLayers(url) {const a = this;L.tileLayer(url || "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" //在线百度地图).addTo(a.map);}//标准tms图层addTMSLayers(url, config = {}) {const a = this;const CRS_900913 = new L.Proj.CRS("EPSG:3395","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs",{resolutions: [156543.032, 78271.516, 39135.758, 19567.879, 9783.9395, 4891.96975,2445.984875, 1222.9924375, 611.49621875, 305.748109375, 152.874054688,76.437027344, 38.218513672, 19.109256836, 9.554628418, 4.777314209,2.388657104, 1.194328552, 0.597164276, 0.298582138, 0.149291069,0.074645535,] /*(function () {var level = 19;var res = [];res[0] = Math.pow(2, 18);for (var i = 1; i < level; i++) {res[i] = Math.pow(2, 18 - i);}console.log(res);return res;})()*/,// origin: [0, 0],// bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),origin: [7340032.00000000372529, -0.00000003068298],bounds: L.bounds([7340032.00000000372529, -0.00000003068298],[141.291239704979603, 7340032.089508121833205]),});config.crs = CRS_900913;console.log(url);L.tileLayer(url, config).addTo(a.map);}//绘制行政边界（geojson）addBounds(response, myStyle) {const a = this;!myStyle && (myStyle = { color: "#ff7800" });// Add to layervar layer = L.geoJSON(response, {style: myStyle,}).addTo(a.map);return layer;}// 矢量图层（折线）addPolylineLayers(latlngs, color, className = "") {const a = this;!latlngs &&(latlngs = [[45.51, -122.68],[37.77, -122.43],[34.04, -118.2],]);var polyline = L.polyline(latlngs, {color: color || "red",className: className, //类名weight: 2, //线条宽度}).addTo(a.map);//将地图放大到折线a.map.fitBounds(polyline.getBounds());}// 矢量图层（圆）addCircleLayers(latins, className = "") {const a = this;latins = [33.25, 113.52];L.circle(latins, {radius: 200,fillColor: "red", //填充色fillOpacity: 0.5, //填充透明度 默认0.2color: "yellow", //描边色className: className, //类名}).addTo(a.map);}//矢量图层（小图标）addIconLayers(latlng, config = {}, data, className = "", callback) {const a = this;!latlng && (latlng = [33.5, 113.5]);var obj = {iconUrl: "../../assets/images/vertices.png",iconSize: [30, 30],// iconAnchor: [22, 94], //图标尖端坐标// popupAnchor: [-3, -76], //弹出窗口“打开”的点相对于图标锚点的坐标// shadowUrl: "my-icon-shadow.png", //阴影图像// shadowSize: [68, 95], //阴影图像的大小// shadowAnchor: [22, 94], //阴影“尖端”的坐标className: className,data: data,};obj = { ...obj, ...config };var myIcon = L.icon(obj);let marker = L.marker(latlng, { icon: myIcon }).on("click", function (e) {callback(e);}).addTo(a.map)return marker;// L.marker(latlng).addTo(a.map); //标记点}//矢量图层聚合addClusterLayer() {const a = this;const markerClusterLayer = L.markerClusterGroup({showCoverageOnHover: false, // 为true时,当鼠标悬停在点上时，它会显示它聚合的边界zoomToBoundsOnClick: true, //  为true时,当鼠标点击某个点时，会缩放到它的边界范围chunkedLoading: true,maxClusterRadius: 50, // 聚类从中心标记覆盖的最大半径（以像素为单位）,默认值 80// disableClusteringAtZoom: 10 // 在缩放级别10及以下不进行聚合}).addTo(a.map);return markerClusterLayer;}//矢量图层（文本）同上，可以canvas绘制addTextLayer(latlng, text, className = "my-div-icon", callback) {const a = this;!latlng && (latlng = [33.5, 113.5]);// 创建自定义图标并添加文本var customIcon = L.divIcon({className, html: '<span>'+text+'</span>'});var marker = L.marker(latlng, {className,icon: customIcon})//.addTo(a.map);return marker;}//添加大量的文本 使用canvasaddLayerUseCanvas (latlng, text) {L.canvas().addLayer(L.marker(latlng).bindPopup(text));}//图像图层ImageLayers(imageUrl, imageBounds, className = "") {const a = this;// var imageUrl = "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",//   imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];var imageLayer = L.imageOverlay(imageUrl, imageBounds, {opacity: 1, //图像透明度interactive: true, //为true时zIndex: 0, //显示层级className: className, //类名}).addTo(a.map);return imageLayer;}//移除图层根据类名removeLayersByAttr(className) {var layers = this.getAllLayers(this.map);for (var l in layers) {if (layers[l].options.className == className) layers[l].remove();}}//移除图层removeLayers(layer) {layer.remove();}//获取全部图层getAllLayers(map) {var allLayers = map._layers;return allLayers;}//标记点绑定弹窗markWithPopup(marker, popupContent) {popupContent = "<p>Hello world!<br />This is a nice popup.</p>";marker.bindPopup(popupContent).openPopup();}//弹窗popupBox(latlng) {const a = this;latlng = [33.5, 113.5];var popup = L.popup().setLatLng(latlng).setContent("<p>Hello world!<br />This is a nice popup.</p>").openOn(a.map);return popup;}//关闭弹窗closePopupBox(popup) {popup.closePopup();}//交互事件addMapEvent() {const a = this;a.map.on("click", function (e) {var latlng = e.latlng, //经纬度_taget = e.target, //targetpos = e.layerPoint || e.containerPoint; //屏幕位置console.log(latlng, _taget, pos);});}//移除交互事件removeMapEvent() {const a = this;a.map.off("click", function (e) {console.log(e);});}
}
export { LeafletMap };

二、vue引用

<template><div class="index"><div class="map" id="mapContainer"></div></div>
</template><script>
import { LeafletMap } from "@/utils/leafletMap.js";
export default {data() {return {areaCode:10,LMap: null,divMap: null, //地图mappointMarker: null,markClusterLayer: null, //聚合allMarkers: [], //要聚合的点图层};},mounted() {this.initMap();},// 方法集合methods: {initMap() {let dom = document.getElementById("mapContainer");dom.innerHTML = "";this.LMap = new LeafletMap();let Areacode = this.areaCode,{ center, zoom, minZoom, maxZoom } = configItem.mapConfig[Areacode];this.divMap = this.LMap.init({domId: "mapContainer",center: [center[1], center[0]],zoom: zoom,minZoom,maxZoom,});this.LMap.addGDLayers();this.markClusterLayer = this.LMap.addClusterLayer();this.mapClick();this.mapZoomEnd();this.areaBoundary();},//行政边界areaBoundary() {const env = process.env.NODE_ENV;var str = env === "development" ? "/" : "../";var jsonUrl = common.getStaticFile(str + "static/areaJson/" + this.areaCode + ".json");axios.get(jsonUrl).then((xcJson) => {var myStyle = {color: "#000",fillColor: "transparent",weight: 2,fillOpacity: 1,};this.LMap.addBounds(xcJson.data, myStyle);});},//行政名称addAreaName() {const env = process.env.NODE_ENV;var str = env === "development" ? "/" : "../";var jsonUrl = common.getStaticFile(str + "static/areaPoint/" + this.areaCode + ".json");axios.get(jsonUrl).then((res) => {res.data.forEach((item) => {var marker = this.LMap.addTextLayer(item.latlng,item.label,"areaName");this.divMap.addLayer(marker);this.areaNameLayers.push(marker);});}).catch((e) => console.log(e));},mapClick() {const env = process.env.NODE_ENV;var str = env === "development" ? "/" : "../";var jsonUrl = common.getStaticFile(str + "static/areaPolygon/" + this.areaCode + ".json");axios.get(jsonUrl).then((jsonData) => {this.areaPolygon = jsonData.data;this.divMap.on("click", (event) => {this.removePoint();let { lat, lng } = event.latlng;var pt = turf.point([lng, lat]);var poly = turf.polygon(this.areaPolygon);var isTrue = turf.booleanPointInPolygon(pt, poly);if (isTrue) {//添加点图层this.pointMarker = this.LMap.addIconLayers([lat, lng], {iconUrl: common.getAssetsFile("pos.png"),});this.$refs.ForecastBox.DialogVisible = true;this.$refs.ForecastBox.loadData(lng, lat);}});});},mapZoomEnd() {// 监听地图缩放后重新聚合this.divMap.on("zoomend", (e) => {// var zoom = this.divMap.getZoom();if (this.allMarkers.length > 0 && this.markClusterLayer) {this.markClusterLayer.clearLayers(); // 清除所有标记后重新添加以触发重新聚合this.markClusterLayer.addLayers(this.allMarkers);}});},//等值面图|格点值changeShowWay(ybTime) {//清除图层if (this.dztLayer) {this.LMap.removeLayers(this.dztLayer);this.dztLayer = null;}if (this.sztLayer) {this.LMap.removeLayers(this.sztLayer);this.sztLayer = null;}if (this.areaNameLayers.length > 0) {this.areaNameLayers.forEach((layer) => {this.LMap.removeLayers(layer); //移除图层});this.areaNameLayers = [];}this.legendData = [];//移除聚合点this.markClusterLayer.clearLayers();},//加载格点数值loadGridData(resData, unit) {let {Data: gridData,MaxLat,MaxLon,MinLat,MinLon,Width,Height,} = resData;var dx = (MaxLon - MinLon) / Width,dy = (MaxLat - MinLat) / Height;var numArray = [];const env = process.env.NODE_ENV;var str = env === "development" ? "/" : "../";var jsonUrl = common.getStaticFile(str + "static/mapPoint/" + this.areaCode + ".json");axios.get(jsonUrl).then((jsonData) => {var mapData = jsonData.data,layers = [];for (var i = 0; i < gridData.length; i++) {var row = gridData[i];for (var j = 0; j < row.length; j++) {var text = row[j],x = j,y = gridData.length - i - 1;if (text < 99999 && mapData[y][x] == 1) {var latlng = [MinLat + dy * i, MinLon + dx * j];var layer = this.LMap.addTextLayer(latlng,text + unit,"divText");layers.push(layer);// numArray.push({ label: text, x, y });}}}this.allMarkers = layers;this.markClusterLayer.addLayers(layers);if (numArray.length > 0) {var canvas = document.createElement("canvas"),ctx = canvas.getContext("2d"),textW = 70,textH = 50,sumW = Width * textW,sumH = Height * textH;canvas.width = sumW;canvas.height = sumH;for (var o of numArray) {ctx.fillStyle = "#000"; // 设置文本颜色为白色ctx.font = "20px Arial"; // 设置字体大小和类型ctx.textAlign = "center"; // 设置文本对齐方式为居中ctx.textBaseline = "middle"; // 设置文本基线为中间var value = o.label,text = value < 99999 ? value + unit : "";text &&ctx.fillText(text,(o.x - 0.5) * textW + textW / 2,(o.y + 1.2) * textH + textH / 2); // 在矩形中心绘制文本"Hello, Canvas!"}var imageUrl = canvas.toDataURL("image/png");var imageBounds = [[MinLat, MinLon],[MaxLat, MaxLon],];this.dztLayer = this.LMap.ImageLayers(imageUrl, imageBounds, "szt");}});},//移除图标点removePoint() {if (this.pointMarker) {this.LMap.removeLayers(this.pointMarker);this.pointMarker = null;}},},watch: {},
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
.map{width:100%;height:100%;}
</style>

http://www.lryc.cn/news/613109.html

相关文章：

  • 动手学深度学习13.11. 全卷积网络 -笔记练习（PyTorch）
  • Linux 中断系统全览解析：从硬件到软件的全路线理解
  • 外部排序总结（考研向）
  • MongoDB数据存储界的瑞士军刀：cpolar内网穿透实验室第513号挑战
  • 数据结构：双向链表（Doubly Linked List）
  • 生成对抗网络(GAN)实战 - 创建逼真人脸图像
  • 电路相量法
  • （易视宝）易视TV is-E4-G-全志A20芯片-安卓4-烧写卡刷工具及教程
  • C++的“模板”
  • day069-Jenkins基础使用与参数化构建
  • golang的面向对象编程，struct的使用
  • 急危重症专科智能体”构建新一代急诊、手术与重症中心的AI医疗方向探析
  • 【深度学习机器学习】构建情绪对话模型：从数据到部署的完整实践
  • 小鸡模拟器安卓版：经典街机游戏的移动体验
  • Elcomsoft Wireless Security Auditor 安装教程-安全检测工具使用指南
  • 数据结构----栈和队列认识
  • 深度学习-卷积神经网络CNN-1×1卷积层
  • 仓库管理系统-21-前端之入库和出库管理
  • Windows中安装rustup-init.exe以及cargo build报错443
  • 零基础-动手学深度学习-9.3. 深度循环神经网络
  • 流程图使用规范
  • Android 之 面试八股文
  • GCC与NLP实战：编译技术赋能自然语言处理
  • 解决GitHub无法打开
  • idea开发工具中git如何忽略编译文件build、gradle的文件？
  • 复杂井眼测量中，陀螺定向和磁通门定向哪个更胜一筹？
  • 幕后英雄 —— Background Scripts (Service Worker)
  • 浅析 Berachain v2 ，对原有 PoL 机制进行了哪些升级？
  • 我的世界Java版1.21.4的Fabric模组开发教程(十七)自定义维度
  • 比较一下XGBoost与LSTM、GRU、Transformer数据格式方面的核心区别