0
GIS Stack Exchangeでこの質問をしましたが、誰も触れていません。おそらく、これはGISよりも純粋なjavascriptの問題だったかもしれません。リファレンスエラー：モジュールが定義されていません（gitHubで見つかったlasso selectコード）
私はWebマッピングのnubeで、ユーザーが選択のために機能を追加する機能をWebマップに追加しようとしています。
<!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
https://github.com/ImperialCollegeLondon/leaflet-lassoselect
が私のコードされています。これを行うには、私はgithubの上で見つかったこのコードを使用していますここに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;
};
は、命令のような、次のとおりです。
Install the plug-in:
npm install github:imperialcollegelondon/leaflet-lassoselect
Import the plug-in
import 'leaflet-lassoselect';
しかし、私は、限定されたサーバにアクセスし、CMDプロンプトに取得する方法はありませんとシンクライアントの午前。
このコードを動作させるために何かできることはありますか、それともプラグインのインストールを必要としない別のバージョンがありますか？
明らかかもしれませんが、どのように初期化するのですか。 'module = {}; module.exports = {} ' ' utils.js'の最初のものは？ – user10089632
@ user10089632それはエラーを削除しましたが、正しい動作を引き起こしているとは思われません。私は、 "npm install github：imperialcollegelondon/leaflet-lassoselect"を使って参照する必要がある方法があるかどうかを調べようとしています。 – ShaunO
絶対に、私はあなたが 'モジュール'の使用法について研究し、以前の摂取を使用しないことをお勧めします。E全体のロジックには影響しません） – user10089632