参考错误：模块未定义（我在 gitHub 上找到的套索选择代码）
2017-09-29
1456
我最初在 GIS Stack Exchange 上问过这个问题，但没人处理。我想这也许更像是一个纯 JavaScript 问题，而不是 GIS 问题。
我是一个网络地图新手，正在尝试向我的网络地图添加一个功能，让用户可以套索特征进行选择。为此，我使用了在 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 提示符。
还有其他吗我可以做些什么来使该代码工作，或者是否有其他我可以使用而不需要安装插件的版本？
2个回答
不要从插件中包含
utils.js
文件，它看起来根本不需要。
当您看到
module
和
module.exports
时，这意味着该文件应通过 CommonJS
模块加载器
加载，除非代码首先检查这些变量的可用性，在这种情况下它可能是
UMD
包装器的一部分，使其可能适合直接浏览器使用（即通过
<script>
标记包含）。
当代码可通过
npm
获得并预期被
import
或
require
时，您将在项目的根目录中获得一个
package.json
文件。在此文件中，查找
"main"
键：它将告诉您导入时实际加载了哪个文件。如果没有这样的键，默认情况下，加载器将期望在根目录中有一个可用的
index.js
文件。
您将通过使用节点、npm 和模块加载器或构建引擎来学习更多微妙之处。
ghybs
2017-09-30
将所有
<script>
标签移至 HTML 底部，紧邻结束
<body>
标签。
Ronnie Royston
2017-09-29