web 高德地图 获取屏幕可视角坐标,实现只加载可视区的marker 屏幕移动的时候再加载其他点

3 篇文章 0 订阅
1 篇文章 0 订阅

var refresh;

var markerArr=[];

var  tmap = new AMap.Map('container', {

            center: [114.513018,37.894788],
            zoom: 13,
            resizeEnable: true

        });


//缩放级别begin=============
        AMap.event.addListener(tmap,'zoomend',function(){
            var sfjb = tmap.getZoom();
            if (sfjb < 13) {
                for (var i = 0; i < markerArr.length; i += 1) {
                    markerArr[i].hide();
                }
            }else{
            for (var i = 0; i < markerArr.length; i += 1) {
                     markerArr[i].show();
                 }
            }
            
        });

      //缩放级别end=============

refresh = function(){

//得到屏幕可视范围的坐标,画出矩形

var tmapBounds = tmap.getBounds();
    var southWest = new AMap.LngLat(tmapBounds.southwest.lng, tmapBounds.southwest.lat);
    var northEast = new AMap.LngLat(tmapBounds.northeast.lng, tmapBounds.northeast.lat);


    var bounds = new AMap.Bounds(southWest, northEast)
    var rectangle = new AMap.Rectangle({
          map: tmap,
          bounds: bounds,
          strokeColor:'#FFFFFF',
          strokeWeight:1,
          strokeOpacity:0,
          fillOpacity:0,
          zIndex:0,
          bubble:true

        });

//lineArr 坐标array [名称,[经度,纬度],偏移角度] 


for (var i = 0,marker,txtmarker; i < lineArr.length; i++) {
                    var markername = lineArr[i][0];
                    var markerAngle = lineArr[i][2];
                    var markerContent = markername;
                     var myLngLat=new AMap.LngLat(lineArr[i][1][0],lineArr[i][1][1]);
                      if(rectangle.contains(myLngLat) && tmap.getZoom() > 13){//如果点在矩形内则输出
                    marker = new AMap.Marker({
                            position: lineArr[i][1],
                            map: tmap,
                            icon: new AMap.Icon({            
                                image: xhjIcon+'2.png',
                                imageSize: new AMap.Size(12,23)
                            }),
                            title:markerContent,
                            zooms:[15,18],
                            angle:markerAngle,//旋转角度
                            offset: new AMap.Pixel(0, 0) 
                        });
                    marker.content = markerContent;
                    marker.on('click', markerClick);
                    markerArr.push(marker);
                   
                    txtmarker = new AMap.Text({
                            text:markerContent,
                            title:markerContent,
                            map: tmap,
                            textAlign:'left', 
                            verticalAlign:'middle',
                            draggable:true,
                            cursor:'pointer',
                            style:{
                                'background-color':'#f4f4f4',
                                'border':'solid 1px #DFDFDF',
                                'padding':'1px 2px',
                                'font-size':'12px'
                            },
                            position: lineArr[i][1],
                            offset: new AMap.Pixel(0, 0)  
                        });
                    txtmarker.content = markerContent;
                    txtmarker.on('click', markerClick);
                    markerArr.push(txtmarker);
                    }

                }

}

//地图平移结束begin=============
       AMap.event.addListener(tmap,'moveend',function(){

       //tmap.clearMap(); //所有加的都会删除

          tmap.remove(markerArr); //只删除marker点组

       refresh(); 
       });
     //地图平移结束end=============

function markerClick(e) {
    infoWindow.close();
        var info = [];
        info.push('<span class="dianji">marker点  点击</span>');
        infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, 0),
            content:  info.join('<br>') 
        });
        infoWindow.open(tmap, e.target.getPosition());
    }

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
实现leaflet加载自定义高德地图坐标类型为gcj02,你需要进行以下步骤: 1. 在高德开放平台上申请自定义地图服务并获取到对应的key。 2. 在Leaflet中添加高德地图服务的图层,示例代码如下: ``` L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { attribution: '高德地图', maxZoom: 18 }).addTo(map); ``` 3. 在Leaflet中添加坐标转换插件,这里推荐使用proj4leaflet插件。在使用之前,需要将proj4库引入到项目中。示例代码如下: ``` // 添加proj4库 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script> // 定义高德地图的投影坐标系 proj4.defs("EPSG:102100", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"); // 在Leaflet中添加坐标转换插件 L.Proj.geoJson(data, { 'pointToLayer': function(feature, latlng) { return L.marker(latlng); } }, { 'coordsToLatLng': function(coords) { var point = L.point(coords[0], coords[1]); point = L.Proj.transform(proj4.defs("EPSG:102100"), L.CRS.GCJ02.projection, point); return L.CRS.GCJ02.pointToLatLng(point); } }).addTo(map); ``` 4. 将Leaflet的坐标系设置为GCJ02,示例代码如下: ``` L.CRS.GCJ02 = L.extend({}, L.CRS.EPSG3857, { // 将EPSG3857的投影坐标系转换为GCJ02的投影坐标系 transformation: L.transformation(1 / 128, -1 / 128, -1 / 128, 1 / 128), // 将EPSG3857的地理坐标系转换为GCJ02的地理坐标系 code: 'GCJ02' }); // 将地图坐标系设置为GCJ02 map.options.crs = L.CRS.GCJ02; ``` 通过以上步骤,你就可以实现leaflet加载自定义高德地图坐标类型为gcj02了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值