高德地图js Api 地图叠加图片

最新推荐文章于 2024-08-23 20:08:17 发布

周金鱼啊

最新推荐文章于 2024-08-23 20:08:17 发布

阅读量5.3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_40881970/article/details/86157077

版权

效果图是如下这样子的红色框起来的这个就是一张图片，然后叠加到了地图上面

翻了Api 看到有一个"ImageLayer",就是将我们现有的图片/视频/或者canvas来作为自定义图层！

实例化ImageLayer

   
var mapImg = "../../../../Content/Images/provinceMKT72/mkttabrgb.png";

var imageLayer = new AMap.ImageLayer({
        url: mapImg,  //图片地址
        bounds: new AMap.Bounds(  //图片的四角左边
             [105.638702226, 37.822171247],
             [107.047779713, 39.4597394071]
        ),
        zooms: [0, 20]  //允许缩放的比例
    });

实例化地图，将ImageLayer放入地图的实例化中

var googleLayerf = new AMap.TileLayer({
        getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile'
});//引用谷歌url

var roadNetLayerf = new AMap.TileLayer.RoadNet();

//初始化地图容器
var map = new AMap.Map('containers', {
        resizeEnable: true,
        expandZoomRange: true,
        center: [105.638702226, 37.822171247],
        layers: [googleLayerf, roadNetLayerf, imageLayer], 
        zoom: 8,
        defaultCursor: "default"
        //zooms: [0, 20],
});

然后比如说你现在要点击某个tab的时候要切换展示的图片，那么就要重新再实例化一遍ImageLayer,代码如下


    function selectImg(type) {  //type里面存的是点击的类型，
        switch(type){
            case "有效磷":
                mapImg = "../../../../Content/Images/provinceMKT72/227MKT.png";
                break;
            case "有机质":
                mapImg = "../../../../Content/Images/provinceMKT72/heilongjiangMKT72.png";
                break;
            case "速效钾":
                mapImg = "../../../../Content/Images/provinceMKT72/henanMKT72.png";
                break;
            case "ph值":
                mapImg = "../../../../Content/Images/provinceMKT72/henanXM.png";
                break;
            case "全氮":
                mapImg = "../../../../Content/Images/provinceMKT72/jilinMKT72.png";
                break;
        }

        var imgclkLayer = new AMap.ImageLayer({
            url: mapImg,  //图片路径
            bounds: new AMap.Bounds(
                  [105.638702226, 37.822171247],
                  [107.047779713, 39.4597394071]
            ),
            zooms: [0, 20]
        });
       //实例化之后重新追加到map中
        map.setLayers([googleLayerf, roadNetLayerf, imgclkLayer]);
    }

页面效果如下

点击右上的tab去切换地图中显示的图片，

在现在有自定义图层上叠加polygon(覆盖物)

  $.get("/Content/xj.json",function(data){
        $.each(data.features,function(index,res){
            var poly = new AMap.Polygon({
                path: res.geometry.rings,
                strokeColor: "#a64200", //线颜色
                strokeOpacity: 0.8,       //线透明度
                fillColor: null,
                strokeWeight: 2,        //线宽
                strokeStyle: "solid",   //线样式
                strokeDasharray: [10, 5] //补充线样式
            });
            poly.setMap(map);
            map.setFitView();

            poly.on('mouseover', function () { //鼠标滑过地块

                //地块高亮
                poly.setOptions({
                    fillColor: "#a64200",
                    fillOpacity: 0.7,
                });
            });

            poly.on("mouseout", function () { //鼠标离开地块
                //去掉地块高亮
                poly.setOptions({ fillColor: null }); 

            })

        })

    })