测试代码如下,leaflet.draw.css文件在main.js里引入的。
<template> <div id="map"></div> </template> <script> import L from 'leaflet'; import proj4 from 'proj4'; import '@supermap/iclient-leaflet'; import 'leaflet-draw'; import axios from 'axios' export default { name: 'MyMap1', props: {}, mounted(){ var _this = this; //#region 加载iServer图层 var urls=[{alias:"总规",url:"http://192.168.2.101:8090/iserver/services/map-ws8/rest/maps/ZG"}]; //自定义坐标系(大地2000) proj4.defs("EPSG:4549","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"); //leaflet CRS投影设置 var crs = L.Proj.CRS("EPSG:4549", { bounds: L.bounds([541921.21, 4235403.46],[583538.58, 4264501.04]), origin: [562729.9, 4249952.25] }); var map = L.map('map', { crs: crs, center: [4249778.73, 562703.98], maxZoom: 18, zoom: 1, //drawControl: true, }); //添加图层 for(var i =0;i<urls.length;i++){ var lyr = L.supermap.tiledMapLayer(urls[i].url, { transparent: true, noWrap: true }).addTo(map); } //获取地图的范围,并将地图缩放到此范围 mapService(); function mapService() { //获取图层信息(这里是获取第一个图层,然后将地图缩放到该图层的范围) L.supermap.mapService(urls[0].url).getMapInfo(function (serviceResult) { var result = serviceResult.result; //自动将地图缩放到一个指定的范围 map.fitBounds([ [result.bounds.bottom,result.bounds.left], [result.bounds.top,result.bounds.right] ]) //加载测试polygon的JSON数据 axios.get('geojson.json').then((data)=>{ L.polygon(data.data).addTo(map); }); }); } //#endregion }, } </script> <style scoped> #map { margin: 0; text-align: left; overflow: hidden; background: #fff; width: 100%; height:100%; position: absolute; } </style>