Javascript 参考错误：未定义模块（我在gitHub上找到的套索选择代码）
我最初是在GIS堆栈交换上问这个问题的，但没有人碰它。我想这可能是一个纯粹的javascript问题，而不是GIS问题 我是一个网络地图nube，正在尝试向我的网络地图添加一个功能，允许用户套索选择的功能。为此，我使用在gitHub上找到的以下代码： 以下是我的代码：Javascript 参考错误：未定义模块（我在gitHub上找到的套索选择代码）,javascript,github,leaflet,Javascript,Github,Leaflet,我最初是在GIS堆栈交换上问这个问题的，但没有人碰它。我想这可能是一个纯粹的javascript问题，而不是GIS问题 我是一个网络地图nube，正在尝试向我的网络地图添加一个功能，允许用户套索选择的功能。为此，我使用在gitHub上找到的以下代码： 以下是我的代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars
<!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>
我还可以做些什么来让这段代码正常工作，或者我可以使用另一个不需要安装插件的版本吗？在关闭
utils.jsmodulemodule.exportsnpmimportrequirepackage.json“main”index.js通过使用节点、npm和模块加载器或构建引擎，您将学到更多的微妙之处。@Ron Royston我仍然在获取未定义的模块。这里还得到一个错误：const lasso=L.lassoSelect（{activeTooltip}）。addTo（map）；15:45:29.832 ReferenceError:activeTooltip未定义1 ResGarbMonday134.html:85:46 init onload我知道谷歌地图的做法是，一旦地图/地图脚本被加载，他们就会进行回调。无论是使用回调还是使用更新更简单的
promisemodule={}；module.exports={}utils.js模块的用法，不要使用我以前的建议，除非它只是一个单独的对象声明和使用（即它不影响整体逻辑）@ghybs我去掉了utils.js，但是现在在声明const lasso=L.lassoSelect（{activeTooltip}）.addTo（map）的行上出现了一个错误；这是给ReferenceError:activeTooltip没有定义听起来像是一个完全不同的问题。请打开一个新问题。在新问题中，解释您是如何想出代码的。
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
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;
};
Install the plug-in:
npm install github:imperialcollegelondon/leaflet-lassoselect
Import the plug-in
import 'leaflet-lassoselect';