如何在随地图缩放的HighMaps(或HighCharts)中插入叠加图像 [英] How to insert overlay images in HighMaps (or HighCharts) which scale with the map

问题描述

我想将图像叠加在地图上(地图要素)，发现HighMaps/HighCharts有两个选项-但都不适合.我想知道是否还有其他选择?

I would like to overlay images on top of a map (map features) and found that HighMaps/HighCharts has two options - but neither of these are suitable. I was wondering if there are any other options?

选项1:使用renderer.image嵌入图像-问题是该图像与地图断开连接，因此无法随其缩放.

Option 1: Embed an image using renderer.image - the problem is that the image is disconnected from the map so doesn't scale with it.

选项2:将图片嵌入为地图符号-问题在于这些图片会自动缩放，即，当您放大地图时(地图变大)，图标也会变小.它们应该保持相同的比例尺并位于相同的位置，就好像它们是地图本身的一部分一样-可能吗?

Option 2: Embed image as map symbols - the problem is that these auto-scale, i.e. as you zoom into the map (map becomes larger), the icons become smaller. They should stay the same scale and stay in the same place, as if they are part of the map itself - is that possible?

另一个问题是我想插入许多小图像.最简单的方法是将它们作为一个大图像嵌入到地图顶部，使小图像周围的区域透明，以便您可以在下面看到地图.但是，问题在于它阻止了鼠标光标悬停在下面的地图区域上.也许可以通过CSS进行更正?

Another issue is that I want to insert many small images. The easiest would be to embed them as one large image on top of the map, with the area around the small images transparent so you can see the map underneath. However, the issue is that it blocks the mouse cursor from hovering over the map areas underneath. Maybe this can be corrected via CSS?

谢谢您的任何建议.

推荐答案

您可以使用mappoint系列按纬度和经度添加点，然后将其marker.symbol值更改为任何url()，并在每个图表事件，通过计算适当的当前比例来更改图像的大小和位置. 我准备了一个示例，如果您对代码及其工作方式有疑问，请告诉我.

You can use mappoint series to add point by latitude and longitude, then change its marker.symbol value to any url(), and on every selection chart event, change the size and position of the image by calculating appropriate current scale. I prepared an example and if you would have some questions about the code and how it works, please let me know.

以下是示例: https://jsfiddle.net/vbou6sga/

这篇关于如何在随地图缩放的HighMaps(或HighCharts)中插入叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！