Question

我最初在GIS Stack Exchange上问这个问题，但没有人接触它。想到这可能是一个纯粹的JavaScript问题而不是GIS问题。

我是一个web mapping nube，我正在尝试向我的webmap添加一个功能，允许用户使用套索功能进行选择。为此，我使用的是我在gitHub上找到的代码：

https://github.com/ImperialCollegeLondon/leaflet-lassoselect

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Residential Garbage - Monday</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" type="text/css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet-src.js" crossorigin=""></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style2.css" type="text/css">
    <script src="/CO_054/JS/utils.js"></script>
    <script src="/CO_054/JS/index.js"></script>


    <script type="text/javascript"> 
    var map;
    function init() {
      map = new L.map('map');
      map.setView([37.396,-122.102],14.57);

         // Add the tiled layer            
        var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: "Data copyright OpenStreetMap contributors"});
        tiles.addTo(map);

        var mondayLayer = L.tileLayer.wms('http://recolrr01.norcalwaste.com:8080/geoserver/CO_054/wms', {
          layers: 'CO_054:residential_garbage_monday',
          format: 'image/png',
          transparent: true
        });

        mondayLayer.addTo(map);

        // define event handler function for click events and register it

          function Identify(e)
          {
            // set parameters needed for GetFeatureInfo WMS request
            var sw = map.options.crs.project(map.getBounds().getSouthWest());
            var ne = map.options.crs.project(map.getBounds().getNorthEast());
            var BBOX = sw.x + "," + sw.y + "," + ne.x + "," + ne.y;
            var WIDTH = map.getSize().x;
            var HEIGHT = map.getSize().y;

            var X = Math.trunc(map.layerPointToContainerPoint(e.layerPoint).x);
            var Y = Math.trunc(map.layerPointToContainerPoint(e.layerPoint).y);

            // compose the URL for the request
            var URL = 'http://recolrr01.norcalwaste.com:8080/geoserver/CO_054/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&LAYERS=CO_054:residential_garbage_monday&QUERY_LAYERS=CO_054:residential_garbage_monday&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=application%2Fjson&TILED=false&CRS=EPSG%3A3857&I='+X+'&J='+Y;

            //send GetFeatureInfo as asynchronous HTTP request using jQuery $.ajax

            $.ajax({
               url: URL,
               dataType: "json",
               type: "GET",
               success: function(data)
               {
                 if(data.features.length !== 0) {  // at least one feature returned in response
                   var returnedFeature = data.features[0]; // first feature from response

                   // Set up popup for clicked feature and open it
                   var popup = new L.Popup({
                     maxWidth: 300
                   });

                   $('#address-details').html("<b>" + returnedFeature.properties.Address + "</b><br><b>Customer Name:</b> " + returnedFeature.properties.Customer_N + "<br><b>Customer Route:</b> " + returnedFeature.properties.Exist_Rout + "<br><b>Customer Tons:</b> " + returnedFeature.properties.Demand + "<br><b>Container Size:</b>" + returnedFeature.properties.Z1SIZE + "<br><b>Account Number:</b> " + returnedFeature.properties.Z1SVC_);
                  }
                }
            });
          }

           map.addEventListener('click', Identify);

           const lasso = L.lassoSelect({ activeTooltip }).addTo(map);

            lasso.on('pathchange', () => {
              // get selected path (an array of LatLng positions)
              const path = lasso.getPath();

              // or check if a point is inside the selected path
              if (this.lasso.contains(someMarker.getLatLng())) {
                // ...
              }

            });

            lasso.enable();
}



</script>
   </head>
   <body onload="init()">
     <h1 id="title">Mountain View - Residential Garbage - Monday</h1>
     <div id="map" class="smallmap"></div>
     <div id='address-details'>          </div>
     <div id="summaryLabel">
         <p>Click a service location on the map to get more information.</p>
         <p class="legendRed">02X </p><p class="legendGreen">03X </p><p class="legendBeige">04X </p><p class="legendBlue">05X</p>
     </div>
    </body>
  </html>

<style>
.legendRed {
  color: #ff0000;
}
.legendGreen {
  color: #33a02c;
}
.legendBeige {
  color: #fdbf6f;
}
.legendBlue {
  color: #1f78b4;
}
  #map { 
    border: 1px solid #ff0000; 
    float: left;
  }
  #address-details {
    border: 1px solid #00ff00;
    float: right;
    width: 190px;
    height: 100%;

  }
  #summaryLabel {
    clear: both;
  }
</style>

这是控制台中的错误：

12:15:42.775 ReferenceError: module is not defined 1 utils.js:1:1
    <anonymous> http://recolrr01.norcalwaste.com:8080/CO_054/JS/utils.js:1:1

这是utils.js代码：

module.exports.contains = function(path, point) {
  // ray-casting algorithm based on
  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
  var x = point.lat, y = point.lng;
  var inside = false;
  for (var i = 0, j = path.length - 1; i < path.length; j = i++) {
      var xi = path[i].lat, yi = path[i].lng;
      var xj = path[j].lat, yj = path[j].lng;
      var intersect = ((yi > y) != (yj > y)) &&
                      (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) {
        inside = !inside;
      }
  }
  return inside;
};

在README文件中，说明如下：

    Install the plug-in:

npm install github:imperialcollegelondon/leaflet-lassoselect

    Import the plug-in

import 'leaflet-lassoselect';

但是，我在瘦客户端上，对服务器的访问权限有限，无法进入cmd提示符。

我还能做些什么来使这个代码工作，还是有其他我可以使用的版本，不需要安装插件？

Answer 1

不要在插件中包含utils.js文件，根本不需要它。

当您看到module和module.exports时，表示该文件应通过CommonJS 模块加载器加载，除非代码首先检查这些文件的可用性变量，在这种情况下，它可能是 UMD 包装器的一部分，使其可能适合直接浏览器使用（即通过<script>标签包含）。

如果代码可以通过npm获得并且预计为{{1}}'或import'd，则您的根目录中会有require个文件。项目。在此文件中，查找package.json键：它将告诉您导入时实际加载了哪个文件。如果没有这样的密钥，默认情况下，加载程序将期望在根目录中提供"main"文件。

通过使用node，npm和模块加载器或构建引擎，您将学到更多细节。

Answer 2

将所有<script>标记移至HTML底部，就在结束<body>标记之前。

参考错误：未定义模块（我在gitHub上找到的套索选择代码）

2 个答案: