现在是这样写的,polygon是山西省的边界数据,但是没有效果,请大家帮我看看是哪里出错了?
参考一下API
你看一下我的操作哪里有问题吗?
有点问题。第一个,报错为not a function,检查一下你是否引入了我们的leaflet包,因为L.Util.transform是我们封装的一个方法,所以需要引入我们的leaflet包才可以使用,如果是原生的leaflet的话,转换坐标可以使用unproject( )方法,这可在leaflet官方api中找到。第二个问题,在构造map的时候,不能把你的obj这样加入进去,写法有问题。下面是一个官方示例,可以参考一下:http://iclient.supermap.io/examples/leaflet/editor.html#01_mapQueryByGeometry3857
我试过了不行 啊。。。麻烦大师帮我搞一下了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../lib/leaflet/leaflet.css"/> <link rel="stylesheet" href="../css/index.css"/> <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.css"/> <link rel="stylesheet" href="../lib/bootstrap-select-1.12.4/css/bootstrap-select.css"/> <link rel="stylesheet" href="../css/index.css"/> <script src="../js/jquery.min.js"></script> <script src="../lib/bootstrap-3.3.7/js/bootstrap.js"></script> <script src="../lib/bootstrap-select-1.12.4/js/bootstrap-select.js"></script> <script src="../lib/bootstrap-select-1.12.4/js/i18n/defaults-zh_CN.js"></script> <script src="../lib/leaflet/leaflet.js"></script> <script src="../lib/jquery-koala/jquery.koala.js"></script> <script src="../js/search.js"></script> <script src="../js/map.js"></script> <script src="../js/icon.js"></script> </head> <body> <!-- <div class="slide-bar"> <ul> <li>查看地图</li> <li>导入数据</li> </ul> </div> <div class="row"> <div class="col-xs-5 select"> <div class="form-group"> <select id="queryDevice" name="name" class="selectpicker" data-live-search="true" data-max-options="10" onchange="selectOnchang(this)"> </select> </div> </div> </div> --> <!-- var osmUrl = 'http://127.0.0.1:8080/googleMap/788865972/{z}/{x}/{y}.png';--> <div id="map" style="width: 100%;height: 100%" > </div> <script type="text/javascript"> var map; var osmUrl = 'http://127.0.0.1:8080/gismap/788865972/{z}/{x}/{y}.png'; var osmAttrib = '<b style="color:#dddddd">地图</b>'; var osm; var popup; var polygon = L.polygon([ [ 110.918, 38.7158 ], [ 111.1816, 39.2432 ], [ 111.0938, 39.375 ], [ 111.3574, 39.4189 ], [ 111.4453, 39.6387 ], [ 111.9727, 39.5947 ], [ 112.3242, 40.2539 ], [ 112.7637, 40.166 ], [ 113.2031, 40.3857 ], [ 113.5547, 40.3418 ], [ 113.8184, 40.5176 ], [ 114.082, 40.5176 ], [ 114.082, 40.7373 ], [ 114.2578, 40.6055 ], [ 114.3457, 40.3857 ], [ 114.5215, 40.3418 ], [ 113.9941, 39.9902 ], [ 114.3457, 39.8584 ], [ 114.5215, 39.5068 ], [ 114.3457, 39.0674 ], [ 113.9063, 39.0234 ], [ 113.8184, 38.9355 ], [ 113.8184, 38.8037 ], [ 113.5547, 38.54 ], [ 113.5547, 38.2764 ], [ 113.8184, 38.1445 ], [ 113.9941, 37.7051 ], [ 114.1699, 37.6611 ], [ 113.7305, 37.1338 ], [ 113.7305, 36.8701 ], [ 113.4668, 36.6504 ], [ 113.7305, 36.3428 ], [ 113.6426, 35.6836 ], [ 113.1152, 35.332 ], [ 112.7637, 35.2002 ], [ 112.0605, 35.2881 ], [ 112.0605, 35.0684 ], [ 111.7969, 35.0684 ], [ 111.5332, 34.8486 ], [ 111.1816, 34.8047 ], [ 110.8301, 34.6289 ], [ 110.3906, 34.585 ], [ 110.2148, 34.6729 ], [ 110.2148, 34.8926 ], [ 110.5664, 35.6396 ], [ 110.4785, 36.123 ], [ 110.3906, 37.002 ], [ 110.8301, 37.6611 ], [ 110.4785, 37.9688 ], [ 110.4785, 38.1885 ], [ 110.8301, 38.4961 ], [ 110.918, 38.7158 ] ],{color:'red'}); $(function () { osm = L.tileLayer(osmUrl, { minZoom: 5, maxZoom: 15, attribution: osmAttrib }); var obj = L.Util.transform(polygon, L.CRS.EPSG4326, L.CRS.EPSG3857); // 初始化Map,之后直接使用map对象 map = L.map('map') //初始化设置中心点,建议以你下载地图的范围的中心点,设置为长治市,后面的值表示初始化显示zomm的级别也就是初始化的时候你想看到的地图的范围的大小,值越大,地图展示的范围越小 .setView([36.0574784567034,113.067371026889], 10) .addLayer(osm); polygon.addTo(map); //地图初始化标记(其实就是随便打几个点,具体根据你后台返回的数据来决定) initMark(); //popup = L.popup(); // 在地图上点击调用onMapClick方法 map.on('click', onMapClick); //test /* var marker = L.marker([36.0574784567034,113.067371026889]).addTo(map); marker.on('dblclick', function(e) { console.log(e); //alert('我是Marker,被点了。'); window.location.href='http://localhost:8080/'; }); */ /* map.on("zoomend",function(e){ console.log(e.target.getZoom()); var markers = document.getElementsByTagName('leaflet-pane leaflet-marker-pane'); if(e.target.getZoom()>8){ for(var i = 0;i<markers.length;i++){ markers[i].setOpacity(1); } }else{ for(var i = 0;i<markers.length;i++){ markers[i].setOpacity(0); } } }); */ }); </script> <!-- <div id="map" style="height:100vh;" ></div> <script type="text/javascript"> //var mapCenter = new L.LatLng(32.1280, 118.7742); //南京 //var mapCenter = new L.LatLng(32, 130); //var mapCenter = new L.LatLng(112.5549, 37.8597); var map = new L.Map('map', { center : mapCenter, zoom : 3 }); var wmsLayer = L.tileLayer.wms("http://localhost:8080/geowebcache/service/wms", { layers: 'ARCGIS-Demo', format: 'image/png' }); wmsLayer.addTo(map); var marker = new L.Marker(mapCenter); map.addLayer(marker); marker.bindPopup("<p>Hello! ;}</p>").openPopup(); </script> --> </body> </html>
https://pan.baidu.com/s/1nNyM9LkTkolO2D00sqsWWA&shfl=sharepset
polygon的点的坐标如图,leaflet的点坐标默认的也是接收纬度、经度。底图添加你就按照你自己的方式,面对象定义这里需要注意一下,同时,你的map的构造可以参考一下截图去写。
报错了 但是我leaflet的包也导了呀
http://iclient.supermap.io/web/download/download.html这个地址上下载精简包,然后引入include-leaflet.js这个文件,然后把你的数据在iserver上发布,即可按照截图中代码这样写。不知道你之前调用底图的那个地址是在哪个平台发布的服务。
我现在做了marker聚合的功能,但是需要添加点击事件,就是点击marker的时候跳转对应的链接,应该在哪里加点击事件?