steamedbread321 2021-03-13 17:20 采纳率: 86.7%
浏览 26

openlayer2添加图片到地图不成功

代码如下,在vue中使用的

 initMap() {
      var map, layer, lableLayer; //complex object of type LMap.Map
      var that = this
      //Initialise the 'map' object
      function init() {

        map = new LMap.Map("map", {
          //            maxExtent : new LMap.Bounds(99.22783,31.11247,99.31504,30.93840),
          numZoomLevels: 19,
          //            maxResolution : 156543.0339,
          //            units : 'm',
          projection: "EPSG:4326",
          displayProjection: new LMap.Projection("EPSG:4326")
        });
        layer = new LMap.Layer.TMS("Name",
          config.mapUrl + "/data/9000/", {
            'type': 'png',
            'isBaseLayer': true,
            'getURL': get_my_url
          });
        lableLayer = new LMap.Layer.TMS("lableLayer",
          config.mapUrl + "/data/9001/", {
            'type': 'png',
            'isBaseLayer': false,
            'getURL': get_my_url
          });
        map.addLayer(lableLayer);
        map.addLayer(layer);
        var markerLayer = new LMap.Layer.Vector('iconMarker', { //添加marker
          styleMap: new LMap.StyleMap({
            default: new LMap.Style({
                          externalGraphic: '${src}',
                          cursor: 'pointer',
                          graphicWidth: 30,
                          graphicHeight: 30,
                          graphicYOffset: -16,
                          title: ''
            })
          })
        })
       map.addLayer(markerLayer)
 for(var i = 0; i < 10000; i++){
     var lon = 113.998 + (Math.random()/100-0.005);
     var lat = 33.011 + (Math.random()/100-0.005);
     var markerFeature = new LMap.Feature.Vector(
             new LMap.Geometry.Point( lon, lat),
             {
                 gid:i,
                 title:'标注点' + i,
                 src:that.mark_img
             }
     );
     markerLayer.addFeatures(markerFeature);
 }
        console.log(map,"iconMarkerLayer")
        //        map.addControl(new LMap.Control.Scale());
        map.addControl(new LMap.Control.MousePosition());
        //        map.addControl(new LMap.Control.LayerSwitcher());

        var lonLat = new LMap.LonLat(99.28501, 31.02467);
        lonLat.transform(map.displayProjection, map.getProjectionObject());
        map.setCenter(lonLat, 13);
      }

      function get_my_url(bounds) {
        var res = this.map.getResolution();
        console.log("res=" + res);
        var x = Math.round((bounds.left - this.maxExtent.left) /
          (res * this.tileSize.w));
        // console.log("x=" + x);
        var y = Math.round((this.maxExtent.top - bounds.top) /
          (res * this.tileSize.h));
        // console.log("y this.maxExtent.top =" + this.maxExtent.top);
        // console.log("y bounds.top =" + bounds.top);
        // console.log("y this.tileSize.h =" + this.tileSize.h);
        // console.log("y res * this.tileSize.h =" + res * this.tileSize.h);
        var z = this.map.getZoom();

        var path = "" + z + "/" + x + "/" + y + "." + this.type;
        var url = this.url;
        if (url instanceof Array) {
          url = this.selectUrl(path, url);
        }
        console.log(url + path, 456456456);
        //        console.log(url+path)
        return url + path;

      }
      init()
    },
  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 11:14
    关注

    参考GPT和自己的思路:

    根据你提供的代码和问题,我看到你在创建markerLayer时使用了一个变量that.mark_img,但没有看到你定义这个变量的代码。这可能是导致添加图片不成功的原因之一。

    另外,你可以检查图片路径是否正确,并且确保图片能够访问。如果图片路径不正确或图片无法访问,那么添加图片到地图也会不成功。

    最后,建议你检查控制台输出,查看是否有任何错误或警告信息。这些信息可以帮助你更好地理解问题所在,并找到解决方法。

    评论

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名