如何解决Shapefile 未出现在传单地图中
我有一个非常简单的示例地图,我想向其中添加一个 shapefile。 shapefile 已压缩,我已检查它是否显示在此处 http://leaflet.calvinmetcalf.com/#3/32.69/10.55,但是它没有显示在我的示例地图上。对此的任何帮助将不胜感激。
代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script src="Plugins//shp.js"></script>
<script src="Plugins//leaflet.shpfile.js"></script>
<!--
Needed?
-->
<style>
#map {
position: relative;
margin: 0 0 0 0;
height: 650px;
width: 700px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
minZoom: 1,maxZoom: 9
});
map.setView([34.15,-112.0],7)
map.setMaxBounds(map.getBounds());
Streets = L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg',{
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1,}).addTo(map);
var shpfile = new L.Shapefile('TestShapefile.zip');
shpfile.addTo(map);
var overlayMaps = {
"TestShapefile": shpfile
};
L.control.layers(overlayMaps).addTo(map);
</script>
</body>
</html>
在我引用的 Plugins 文件夹中,我有以下 javascript:
leaflet.shpfile.js 和 shp.js
解决方法
如果您包含的网址与您的域名不同,则可能会发生这种情况,然后您会收到 CORS 错误。它纯粹是为了控制一个域可以从另一个域请求什么。 f.i
var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");
所以尝试将文件放在本地。 F.i 在那里你也有你的 .js 文件,如下所示:
var shpfile = new L.Shapefile("./congress.zip");
这是一个demo
还要注意,您必须在 Web 服务器内运行 index.html,而不是通过在浏览器上打开 html 文件通过文件系统运行。另一种方法是通过模块打包器(如 webpack 或parcel 等)运行它,类似于演示。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。