Sencha的OpenLayers4
Sencha的OpenLayers4
提问于 2017-11-20 10:11:54
如何在sencha架构师中添加和使用openlayers4映射？我想在容器中添加开层映射，但是我不知道如何在sencha架构师中这样做，所以任何建议都是很棒的！
提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-23 08:57:23
上个星期我在架构师中使用了OpenLayers4，实际上我做的和@pagep完全一样，只是：-我直接将映射显示到组件中&没有div (我给组件id=map)。-我使用的是现代的包，没有“呈现”事件，所以我使用了“绘制”事件。
Stack Overflow用户
发布于 2017-11-22 14:08:45
从OL指南https://openlayers.org/en/latest/doc/quickstart.html开始
我们需要根据指南做三件事：
- 包括OpenLayers
- 地图容器
- 创建一个简单地图的JavaScript
包括：
- 单击加号按钮，选择资源，添加JS资源
- 选择JS资源，设置URL，您自己的ID，将远程设置为真正的
- 对CSS资源执行相同的步骤
您应该看到这两个资源被远程加载，并且应该在SA中看到它们。或者你可以下载JS文件。将它们放入项目文件夹中的资源文件夹中，url将类似于resources/myOLm.js，CSS也是如此。
地图容器：
添加面板或容器，选择html配置，并在其中添加带有id的自定义div。
你应该看看这个：
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel'
});创建映射的JS：
现在，我们需要为地图执行JS。我们需要使用一些被激发的事件，->触发我们的函数，在那里我们可以编写我们自己的JS。
我选择了渲染事件。单击面板，在配置窗口中查找基本事件绑定，选择render，添加它。并将示例JS代码放入函数中。
您的代码应该如下所示：
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel',
defaultListenerScope: true,
listeners: {
render: 'onPanelRender'
},
onPanelRender: function(component, eOpts) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
});保存并预览项目：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47389554
复制相关文章
相似问题
腾讯云开发者
