Question

我正在学习使用传单包在R中编程。我想给图标一个角度，我正在尝试使用这段代码：

m <- leaflet()
m <- addTiles(m,urlTemplate = "http://xdworld.vworld.kr:8080/2d/Base/201310/{z}/{x}/{y}.png")
m = m %>% setView(127.074167,34.456806, zoom = 9)
arrowIcon <- makeIcon(
  iconUrl = "arrow.png" 
  ,iconWidth = 100, iconHeight = 100 
  ,iconAnchorX = 25, iconAnchorY =25
)
arrowIcon <- makeIcon(
  iconUrl = "ARROW_B2.png" 
  ,iconWidth = 100, iconHeight = 100 
  ,iconAnchorX = 25, iconAnchorY = 25
)
offset = 0.00 # zoom 10-> 0.03, 9->0.06, 8 -> 0.12, 7 -> 0.24
m_lat = 34.45 + offset
m_lon = 127.07 - offset
m <- addMarkers(m,  lng=m_lon, lat= m_lat
            , options = c( markerOptions(), iconAngle= 0)
            ,icon= arrowIcon)
m <- addCircles(m, lng=127.07, lat=34.45 , weight = 10,radius = 100)
m

然而，它不起作用。

Answer 1

这是我能让它发挥作用的唯一方法。您想使用RotatedMarker插件，可用here。要将此插件与R一起使用，我按照说明here。

我无法理解的两点需要注意：

我无法在本地存储图标时找到它 - 它需要通过URL访问。如果你能解决这个问题，请告诉我。
您需要下载javascript文件并将其保存在本地。在下面的例子中，我把它放在与我的R脚本相同的目录中。从理论上讲，你应该可以通过URL加载它，但这不起作用。如果你能解决这个问题，请告诉我。

所以这是工作代码：

library(htmltools)
library(htmlwidgets)
library(leaflet)

# this is taken from: https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
rotatedMarker <- htmlDependency(
  "Leaflet.rotatedMarker",
  "0.1.2",
  src = normalizePath("."),
  script = "leaflet.rotatedMarker.js"
)

# this is taken from: https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>%
  addTiles(urlTemplate = "http://xdworld.vworld.kr:8080/2d/Base/201310/{z}/{x}/{y}.png") %>%
  setView(127.074167,34.456806, zoom = 9) %>%
  registerPlugin(rotatedMarker) %>%
  onRender("function(el, x) {
    var planeIcon = L.icon({iconUrl: 'https://raw.githubusercontent.com/bbecquet/Leaflet.PolylineDecorator/master/example/icon_plane.png', iconAnchor: [16, 16]});
    var pathPattern = L.marker([34.45, 127.07], {icon: planeIcon, rotationAngle: 90}).addTo(this);
  }") %>%
  addCircles(lng = 127.07, lat = 34.45, weight = 10, radius = 100)

哪个产生：

请注意，我已将平面图标旋转90度。

Answer 2

首先，我发现您可以加载图片，如果它存储在名为www的目录中。

getTokenFromServer(value: Authentication): Observable <Authentication>{
        const httpOptions = {
                    headers: new HttpHeaders({ 'Content-Type': 'application/json'})
                };

                return this.http.post(serverUrl, value, httpOptions).pipe(
                    tap((response: any) => {
                        if(response.status == "200"){
                            console.log("Success logging in: "+response.status+":"+response.token);
                            this.tokenService.setToken(response.token);                 
                        }else{
                            console.log("Error logging in: " +response.status);
                        }
                    }),
                    catchError(this.handleError('Authenticate password:'))
                    );

            }

然后您就可以使用这段代码加载它

|
|- app.R
|- www
    |- icon_plane.pg

正确加载你的js文件。我花了很多时间来查看为什么我的图像没有显示，最后只是因为我的脚本没有在正确的位置。

传单包中的图标旋转

2 个答案: