首页 / 浏览问题 / 组件GIS / 问题详情
leaflet 加载的切片,只想让它显示制定区域的部分,需要怎么做?
5EXP 2019年10月17日

现在是这样写的,polygon是山西省的边界数据,但是没有效果,请大家帮我看看是哪里出错了?

1个回答

你好,你的map的CRS没有设置。
1,686EXP 2019年10月17日
具体怎么写?我是小白。。可以加个扣扣交流一下吗
map = L.map('map', {
        crs: L.CRS.EPSG4326,
    }); 按照这样写一下
EPSG4326   是什么意思呢?
CRS是指要使用的坐标参考系统。因为看你构造的面的坐标应该是需要一个经纬度的坐标系统,所以这里设置了4326.EPSG4326代表的坐标系是WGS1984
加了之后  地图显示不出来了。。。是这个坐标不对吗?我要显示的是山西省区域内的地图,我用的是切片离线地图。方便留个qq请教吗?
修改CRS之前地图是可以显示的是吧?CRS默认是EPSG3857,那么你的地图应该是投影坐标系的,现在你构造的面对象所传入的点数组是经纬度坐标,所以显示不出来。如果你要显示这个面,那么传入的坐标系也应该是投影坐标才可以。
我们也有在线支持热线400-8900-866。也可以咨询。
那我现在这个投影坐标应该怎么获取,应该怎么写呢?
L.Util.transform(obj, L.CRS.EPSG4326, L.CRS.EPSG3857);

参考一下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

。。我太难了。你可以告诉我我现在应该在哪里写什么代码吗?直接一点解决的
按照如下顺序去写

//下面三句代码是map的构造,设置地图视图点以及添加你的地图。

map = L.map('map', {
        maxZoom: 18,
        zoom: 1
    });

map.setView(参数自己写 );

map.addLayer( 参数自己写);

var latlng = L.latLng(100, 30);
    var point=L.CRS.EPSG3857.project(latlng); //这两句就是将绘制的4326地理坐标转换为3857投影坐标系

在你将面的所有点转换之后:polygon.addTo(map)

我试过了不行 啊。。。麻烦大师帮我搞一下了laugh

<!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>

把你的数据上传至百度云,分享私信给我,我这边帮你搞一下,就是你的底图数据。

polygon的点的坐标如图,leaflet的点坐标默认的也是接收纬度、经度。底图添加你就按照你自己的方式,面对象定义这里需要注意一下,同时,你的map的构造可以参考一下截图去写。

报错了  但是我leaflet的包也导了呀

tiledMapLayer按照你之前加载的方式填写,你这个引用的应该是leaflt原生的js包,只用看面对象的定义和添加就可以了。
还是不行啊,你那边直接把你写好的代码和展示效果贴出来吧
截图就是代码和效果
那把你这个js包可以给我发一下吗?

http://iclient.supermap.io/web/download/download.html这个地址上下载精简包,然后引入include-leaflet.js这个文件,然后把你的数据在iserver上发布,即可按照截图中代码这样写。不知道你之前调用底图的那个地址是在哪个平台发布的服务。

tomcat

我现在做了marker聚合的功能,但是需要添加点击事件,就是点击marker的时候跳转对应的链接,应该在哪里加点击事件?

给marker添加点击事件是吧? marker.on('click',function(){
            alert(1111);
        })
报错了,提示没有on方法
你是L.marker构造的吗?? marker.on这个调用的对象用对了吗??
这个解决了,我那个显示指定区域的那个问题还没解决。。。我用的是tomcat加载的离线地图
现在可以显示成你截图的那样,但是我想要的效果是只显示山西省区域内的,其他省份的地图就不显示,不是现在这种高亮显示山西省
你现在实现了吗?我现在只实现了里面的一个市,全省会有一部分被遮盖

遮罩

let maskLi = data//(这个是全省边界数据),

,pNW = {lat:90,lng:-360},pNE = {lat: -90,lng:-360 },pSE = {lat:-90,lng:360},pSW = {lat:90,lng:360}//

            let points = [],pArray = []

            pArray = [pNW,pSW,pSE,pNE,pNW]

            for (let i = 0; i < mask.length; i++) {

                mask[i].forEach(item =>{

                    item.forEach(latlngs =>{

                        points.push({

                            lat:latlngs[1],

                            lon:latlngs[0]

                        })

                       

                    })

                })

                pArray = pArray.concat(points);

                pArray.push(pArray[0]);

            }

            var plyall = L.polygon(pArray, { color:'transparent',fillColor:'#04121f',fillOpacity:0.9 }); //建立多边形覆盖物

            plyall.addTo(this.map);
...