// 0. 引入使用到的leaflet类 import { Map, TileLayer, LayerGroup, Control, Icon } from '../lib/leaflet/leaflet-src.esm.js'; import dataCommon from './data.js' class MyMap { constructor() { this.initBase(); this.initIcons(); } initBase() { // 1. 创建一个map对象 // 参数为html元素的id:
this.map = new Map('map'); // 2. 创建一个地图图层TileLayer // 参数为一个url模板,一般包含xyz // 有时候模板中包含subdomains,表示地图有多个子url(对应模板参数{s}) this.amapLayer = new TileLayer( 'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7', { subdomains: '1234' } ); // 2.1 再创建一个地图图层tdtVectorLayer const tdtVectorLayer = new TileLayer( 'http://t0.tianditu.gov.cn/vec_w/wmts?layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28', {} ); const tdtLabelLayer = new TileLayer( 'http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28', {} ); this.tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]); // 3. 图层加入到地图map中(显示一个图层) this.tdtLayer.addTo(this.map); // 4. 设置地图中心点坐标(北京),缩放级别10 this.map.setView([39.909186, 116.397411], 10); // 5. 添加一个控制层 this.layerControl = new Control.Layers( { 高德: this.amapLayer, 天地图: this.tdtLayer }, {}, { collapsed: false } ); // 6. 将控制层加入到地图map中 this.layerControl.addTo(this.map); } _newIcon(svg) { return new Icon({ iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), iconSize: [24, 24], iconAnchor: [12, 12] }) } initIcons() { this.iconRed = this._newIcon(dataCommon.svgRed); this.iconBlue = this._newIcon(dataCommon.svgBlue); this.iconHospital = this._newIcon(dataCommon.svgHospital); this.iconSchool = this._newIcon(dataCommon.svgSchool); } } export {MyMap};