将传单与传单地图一起使用

我喜欢Python，从来没有关心过JavaScript。所以我非常兴奋地了解Transcrypt。我最近启动了一个基于 Web 的项目，该项目使用 Django 作为后端，并使用在前端发挥核心作用的传单地图(特别是 Esri Leaflet(。我试图弄清楚Transcrypt是否适合我的项目。但是，Transcrypt网站上的文档和示例要么太简单，要么太快地深入研究更高级的主题。因此，我很难决定Transcrypt是否会为我的项目增加任何积极的东西，或者只会带来更多的复杂性和错误。我宁愿不花几个小时试图让Transcrypt工作(这些时间可以有效地花在简单地编写JavaScript上(，只是为了发现Transcrypt不适合我的网站。所以我有几个问题。

我知道Transcrypt旨在与任何JavaScript库一起使用。它是否也适用于基于地图的 GIS 库？

例如，如果我能成功地封装整个Esri Leaflet(但也许我做不到？(，Transcrypt会允许我用Python编写以下内容吗？

var map = L.map('map').setView([40.91, -96.63], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
L.esri.Geocoding.geosearch({
providers: [
arcgisOnline,
L.esri.Geocoding.mapServiceProvider({
label: 'States and Counties',
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
layers: [2, 3],
searchFields: ['NAME', 'STATE_NAME']
})
]
}).addTo(map);

顺便说一下，该代码是从这里获取的。

我不太明白这里关于与 JavaScript 库集成的解释，特别是它说：

另一种方法是将 JavaScript 库作为一个整体封装在 Transcrypt 模块中。在分发中，这是为封装结构的构造模块完成的.js并在 Pong 示例中导入。这样，全局命名空间将保持干净。

所以我真的无法判断Transcrypt是否可以处理所有的GIS和地图内容。

传单地图将是我的网站的主要用户界面。因此，知道Transcrypt可以封装它非常重要。还会有很多事件侦听器连接到地图，数据在前端和后端之间来回传递。我可能会使用jQuery的Ajax来做很多事情。我在Transcrypt网站上看到了一些简单的jQuery示例，但不确定Transcrypt是否真的能胜任这项工作。

我注意到唯一回答Transcrypt问题的人是它的创建者Jacques de Hooge。我想我的问题真的是针对他的。雅克，非常感谢您能给我的任何建议！

您不需要封装传单库。您可以像在Transcrypt中一样使用它。

这里有一个例子。在新文件夹中创建 HTML 文件 mymap.html'：

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="leaflet.css"/>
<script src="leaflet.js"></script>        
</head>
<body>
<div id="the-map" style="width: 1000px; height: 800px;"></div>
<script type="module">import * as main from './__target__/mymap.js';</script>
</body>
</html>

并创建 Transcrypt 文件mymap.py：

def main(map_id):
watercolorTiles = {'linkTpl': 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
'attribution': '&copy; Stamen Maps'}
australiaView = {'center': [-27.30,133.62],
'zoomSnap': 0.1,
'zoom': 4.5}
# Build the map
map = L.map(map_id, australiaView)

L.tileLayer(watercolorTiles['linkTpl'], {
'attribution': watercolorTiles['attribution'],
}).addTo(map);

main('the-map')

请注意，Transcrypt代码使用全局Lefa;et 对象L原样。此工厂对象已在leaflet.js中实例化，您可以使用它来构建地图。

要查看地图，您需要执行以下操作：

下载传单库并将leaflet.css和leaflet.js复制到您的文件夹中。
在终端命令行(cd 到您的文件夹后(转译.py文件：
```
$ transcrypt mymap.py
```
启动为您的文件夹提供服务的网络服务器，例如：
```
$ python3 -m http.server
```

现在进入浏览器 http://localhost:8000/mymap.html 并查看澳大利亚的美丽(在本例中为水彩(地图。

您的地理搜索代码片段可以用与Transcrypt类似的方式编写 - 只需确保将字典键编写为Python字符串(因此attribution编写'attribution'而不是(！

相关内容

最新更新

热门标签：