Angular-google-maps: 添加图像映射类型

创建于 2016-05-15 · 35评论 · 资料来源: SebastianM/angular-google-maps

你好

我想像这个例子一样在谷歌地图上使用自定义图块： https ://developers.google.com/maps/documentation/javascript/examples/maptype-image

我尝试制定如下新指令：
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

我只是想检查这是否是所有选项都包含在组件中的正确方法，还是应该更详细地为每个属性设置一个属性？

或者因为这不是一个真正的可视组件，它应该只是一个传递到组件中的服务。（因此仅通过代码配置，没有 html 元素）

有什么建议可以完善哪种方法？

谢谢
卡尔

stale feature-request

资料来源

carl09

最有用的评论

此功能是否在 agm-maps 中更新？

er-shrey 于 2018-07-10

👍2

所有35条评论

嗨，卡尔，

我正在尝试做类似的事情，加载一些从外部 MapServer 集群提供的自定义 WMS 覆盖，但我被卡住了，因为我不知道如何获取对实际 googleMap 实例的引用以便将我的覆盖添加到 overlayMapTypes收藏）。

我认为需要有一种方法来访问原始 google.map 地图实例，通过 GoogleMapsAPIWrapper 公开它？

这是我的方法（到目前为止）......在 MyComponent.ts 的构造函数中

`var overlayMap = null;

    // Getting a handle on the GoogleMaps api namespace
    if ((<any>window).google || (<any>window).google.maps) {
        const gm = (<any>window).google.maps;

        if (layers.length > 0) {
            var overlayMapOptions = {
                getTileUrl(coord, zoom) {
                    var url = this.loadBalanceWms() + "/mapserver.exe?Map=../mapfile/xxx.map";
                    url += "&mode=tile";
                    url += "&tile=" + coord.x + "+" + coord.y + "+" + zoom;
                    url += "&tilemode=gmap";
                    url += "&layers=" + layers; //WMS layers
                    url += "&WIDTH=256";
                    url += "&HEIGHT=256";
                    return url;

                },
                tileSize: new gm.Size(256, 256),
                isPng: true,
                name: "WMSOverlay"
            };
            overlayMap = new gm.ImageMapType(overlayMapOptions);

            // Breaks here
            this._mapsWrapper.getMap()
                .then(a => {
                        (<any>a).overlayMapTypes.push(overlayMap);
                    },
                    f => {
                        window.console.log(f);
                    });

        }

    };`

anaratz 于 2016-05-16

@anaratz那是你所做的吗？创建平铺自定义地图

Sireini 于 2016-05-24

不，它不起作用...
...因为接口mapTypes.GoogleMap上不存在overlayMapTypes集合，我也找不到访问底层google.maps.Map实例的方法

anaratz 于 2016-05-24

@anaratz所以还没有解决方案吗？

Sireini 于 2016-05-24

还没有

anaratz 于 2016-05-24

@anaratz我有它的工作，但我只是在这个问题的开头问了一个关于如何构建我的代码的问题，然后我会做一个 PR，我应该做一个 PR 看看它是如何进行的吗？

carl09 于 2016-05-25

@carl09你能告诉我们你是如何修复它的吗？

Sireini 于 2016-05-25

@carl09是的，请卡尔。

anaratz 于 2016-05-25

嗨@smgjreinieren ， @anaratz我已经更新了我的 PR 并创建了一个演示

http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

公关： https ://github.com/SebastianM/angular2-google-maps/pull/345

任何反馈都会很棒

carl09 于 2016-05-25

@carl09你也是用打字稿做的吗？

Sireini 于 2016-05-25

@smgjreinieren是的，这一切都是在类型脚本中完成的

carl09 于 2016-05-25

@carl09 哦，现在我明白了，对不起！做得好！谢谢

Sireini 于 2016-05-25

我在执行“ clang:check ”任务时遇到了问题，我只是想尝试将节点从 v4 更新到 v6，看看它是否修复了它，这让你在推送更改时真的不确定

carl09 于 2016-05-25

@carl09但是没有自定义地图类型？

Sireini 于 2016-05-25

@smgjreinieren我在 plunker 中使用“Open Street Maps”来显示更改，它对您不起作用，还是不是您的意思？

像这个例子： https ://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

我刚刚看到你的另一个问题，所以我现在明白你的意思了

carl09 于 2016-05-25

@carl09我想将自己的图像设置为地图类型，是“开放街道地图”一个创建自定义地图类型的图像

Sireini 于 2016-05-25

@smgjreinieren你有地理编码图像吗？还是只是一个标准的图像文件？

您可以使用http://www.qgis.org/en/site/之类的工具和地理编码图像，还可以创建图块以便您可以将它们用于谷歌地图

carl09 于 2016-05-25

@carl09嗯，看来我不能使用它！你能为我转换图像吗？

为什么您的基本设置也无法识别“angular2-google-maps/core”中的 MapTypeId？可能是因为它没有我看到的核心，但是我如何导入它而不是从您的设置中导入： https ://github.com/carl09/angular2-google-maps-example

Sireini 于 2016-05-26

嗨@smgjreinieren ，如果您想更新它，我在该存储库中更新了我的示例代码。
你用什么编辑器来编辑？我正在使用 VS Code，如果有帮助，它很容易知道参考

carl09 于 2016-05-26

@carl09谢谢伙计！但仍然无法让 qgis 为 mac 工作！我可以把图片发给你吗，它只是世界地图的一小部分，这也可能吗？

像这样：http: //postimg.org/image/6okpwebsb/

Sireini 于 2016-05-26

@carl09可以使用本地文件夹中的图像吗？而不是在线

Sireini 于 2016-05-30

你好

是的，您可以，或者您可以将它们托管在您的节点实例中，就像您托管您的 css 和 js 文件一样，但我想您也可以使用 file:// 并将其指向本地，但不确定这将如何运作

carl09 于 2016-05-30

是否可以在构造函数中禁用DefaultUI？因为它没有像这样识别它：

constructor(){ this.imageMapOptions = { getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => { return http://www.sylvanreinieren.com/tiles/ ${zoom}/${coord.x}/${coord.y}.png }, tileSize: { height: 256, width: 256 }, maxZoom: 16, minZoom: 12, radius: 1738000, name: 'linZ', disableDefaultUI: true, alt: 'LINZ Topo Maps' }; }

Sireini 于 2016-05-30

这个功能有什么进展吗？几天前我刚开始查看 angular2-google-maps，它看起来可以解决我想在我的应用程序中添加的内容，但我真的需要用来自挪威语的一些更详细的地图替换谷歌地图地图“赛车场”。