angular里leaflet基础使用

qq_40872284

已于 2023-12-15 17:06:11 修改

阅读量282

点赞数

文章标签： angular.js 前端 javascript

于 2023-12-11 09:51:03 首次发布

本文链接：https://blog.csdn.net/qq_40872284/article/details/134877178

版权

5、简单click事件响应，点击显示经纬度

一、导入leaflet并初始化地图

1、安装leaflet模块

npm install leaflet

2、在style.less全局样式文件中引入leaflet.css

@import '../node_modules/leaflet/dist/leaflet.css';

3、创建map组件，定义一个地图容器,，id设置就是后面引用的地图容器名字，记得设置高度

<div id="map" style="height: 100%;width: 100%;margin: 0;padding: 0;"></div>

4、ts文件引入leaflet和初始化地图主要代码

import { Component } from '@angular/core';
import * as L from 'leaflet' //导入模块
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class MapComponent {
  map: any
  layer: any
  ngOnInit() {
    this.initMap()  //初始化地图
  }

  initMap() {
    this.map = L.map('map', {//这里的‘map’,就是div容器的id
      zoom: 13,//默认缩放级别
      center: [31, 117]//中心点
    })
    this.layer = L.tileLayer('http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',//瓦片链接
      {
        maxZoom: 18,//最大缩放级别
        zIndex: 10//层级，越高，图层越上面
      }).addTo(this.map)//add进地图里，才能显示出来
  }
}

5、页面展示

二、地图基本操作

1、地图上添加标记Mark

    L.marker([31, 117]).addTo(this.map);//在位置[31, 117]添加一个标记

2、地图上画圆

    L.circle([31, 117], {
      color: 'green',//边框颜色
      fillColor: '#f03',//填充颜色
      fillOpacity: 0.5,//透明度
      radius: 200//圆的半径
    }).addTo(this.map)

3、地图上画多边形

    let latlngs = [
      [31, 117] as LatLngExpression, //类型断言 不然下面引用会报错
      [31.01, 117.05] as LatLngExpression,
      [31.02, 117.05] as LatLngExpression,
    ];
    let polygon=L.polygon(latlngs, {
      color: 'green',
      fillColor: 'red',//填充颜色
    }).addTo(this.map)
    // 将地图放大到多边形的位置
    this.map.fitBounds(polygon.getBounds());

    let marker = L.marker([31, 117]).addTo(this.map);//在位置[31, 117]添加一个标记
    marker.bindPopup('marke').openPopup() //.openPopup()表示默认打开，地图上只允许同时打开1个，或者使用 Map.addLayer 打开任意多个。
.....
    polygon.bindPopup('<p style="color:red">Hello world!<br />这是一个绘制的多边形</p>')

都用这个方法加弹框，就可以同时显示多个

    marker.bindPopup('marke').openPopup()

    L.popup().setLatLng([31.01, 117])
      .setContent('<p style="color:red">Hello world!<br />这是一个绘制的多边形</p>')
      .addTo(this.map)
    L.popup().setLatLng([31.015, 117])
      .setContent('<p style="color:red">Hello world!<br />这是一个绘制的多边形</p>')
      .addTo(this.map)

5、简单click事件响应，点击显示经纬度

    this.map.on('click', (e: any) => { //简单的地图点击事件响应，绘制弹出框显示经纬度
      L.popup().setLatLng([e.latlng.lat, e.latlng.lng])
        .setContent(`纬度：${e.latlng.lat}<br/>经度：${e.latlng.lng}`)
        .addTo(this.map)
    })

对地图实例做监听,在Leaflet中每种实现对象都可以添加事件。

    //对地图实例做监听,在Leaflet中每种实现对象都可以添加事件
    marker.on('click',(e:any)=>{
      L.popup().setLatLng(e.latlng).setContent('我被点击了').addTo(this.map)
    })

6、切换地图底图

添加一个basemaps地图底图图层对象，初始化地图并设置底图图层，添加图层控制器

    //定义了一个 basemaps 对象，包含了一些不同的底图图层选项
    var basemaps = {
      世界影像: L.tileLayer('http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '添加地图图层的归属声明，地图数据的来源和相关版权信息。通常会显示在地图的角落'
      }),
      arc街道: L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'),
      '行政区': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer/tile/{z}/{y}/{x}'),
      '地形': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'),
    };

    this.map = L.map('map', {//这里的‘map’,就是div容器的id
      layers: [basemaps.世界影像], // 设置默认显示的底图
      zoom: 13,//默认缩放级别
      center: [31, 117]//中心点
    })
    L.control.scale().addTo(this.map);//添加比例尺
    L.control.layers(basemaps).addTo(this.map); //使用 L.control.layers(basemaps).addTo(map) 添加了一个图层控制器，允许用户在不同的图层之间进行切换

7、实现输入经纬度跳转

<div>
    <input type="number" #jingdu>
    <input type="number" #weidu>
    <button (click)="location(jingdu.value,weidu.value)">定位</button>
</div>

  // 声明一个成员变量保存当前标记
  private marker?: L.Marker;
  location(a: any, b: any) {
    if (this.marker) {
      this.map.removeLayer(this.marker)//清除上一个标记点
    }
    this.marker = L.marker([a, b]).addTo(this.map)//添加标记点
    this.map.flyTo([a, b])//fly到坐标点的位置
    this.map.planTo([a, b])//平移到坐标点的位置，动画效果不顺滑
  }

8、angular引入leaflet插件

①下载插件

②打开插件的index.html，查看引用的样式和js文件，

③把这几个文件放到angular项目的index.html文件中。

④angular.json文件中全局引用一下leaflet-side-by-side.js文件

⑤配置插件被ts识别，终端输入。操作完成后，会在node_modules文件夹下生成@types下leaflet-side-by-side文件夹。可查看文件夹下的index.d.ts文件。导入完成可正常使用插件了。

 npm install @types/leaflet-side-by-side --save

除此外，某些插件可以直接npm安装

npm install leaflet-side-by-side

安装插件时的一些报错解决方法：

①需要修改WEBPACK 配置和自定义 LOADER 处理实例

安装webpack插件，版本号根据angular cli来

npm i -D @angular-builders/custom-webpack@16.0.0

添加webpack.config.js文件，文件内容为：

module.exports = {
    // ...其他配置...
    module: {
      rules: [
        // 处理 .css 文件
        {
          test: /\.css$/,
          use: [
            // 将 CSS 插入到 DOM 中
           'style-loader',
            // 将 CSS 转换为 JavaScript 模块
            'css-loader',
          ],
        },
      ],
    },
  };

修改angular.json文件

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    //.....省略....
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    //.....省略....
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    //.....省略....
  },

②找不到模块

npm 安装

npm install style-loader

9、实现地图卷帘效果，叠加显示

分别定义左右两个地图图层

    let leftLayers = L.tileLayer(`https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}`);
    let rightLayers = L.tileLayer(`http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`);

使用sideBySide（）方法，三个属性

    L.control.sideBySide(rightLayers, rightLayers).addTo(this.map)

// 参数分为别左、右图层(数组)、选项配置
L.control.sideBySide（leftLayer[s]， rightLayer[s],options)

let sideBySide = L.control.sideBySide(leftLayers, [rightLayersText, rightLayers], { padding: 0, thumbSize: 42 }).addTo(map);

// 修改左侧图源
sideBySide.setLeftLayers(purplishBlueLayer)
// 修改右侧图源
// sideBySide.setRightLayers(purplishBlueLayer)

效果图，可左右滑动，拖动地图

10、画各种线

安装 PolylineDecorator 插件：

npm install leaflet-polylinedecorator

配置插件被ts识别

 npm install @types/leaflet-polylinedecorator --save

在ts里面导入后就可以正常使用了

import 'leaflet-polylinedecorator';