logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

leaflet实现风场图

 精品唯居 2021-12-05

前言

leaflet 入门开发系列环境知识点了解：

内容概览

leaflet 实现风场图，实现效果来自此参考文献：https://github.com/danwild/wind-js-leaflet

实现效果图如下：


  • html 页面引用资源

<!doctype html>
<html>
<head>
<title>Leaflet风场图</title>
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://code./jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https:///leaflet@1.5.1/dist/leaflet.css"/>
<script src="https:///leaflet@1.5.1/dist/leaflet.js"></script>
<!--wind-js-leaflet-->
<link rel="stylesheet" href="wind-js-leaflet.css" />
<script src="wind-js-leaflet.js"></script>
<!--demo-->
<link rel="stylesheet" href="demo.css" />
<script src="demo.js"></script>
</body>
</html>

  • 地图加载代码

//地图初始化function initDemoMap(){var Esri_WorldImagery = L.tileLayer('http://server./ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, ' +
'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'});var Esri_DarkGreyCanvas = L.tileLayer("http://{s}.sm.mapstack.stamen.com/" +
"(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
"{z}/{x}/{y}.png",
{
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, ' +
'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'}
);//底图切换设置var baseLayers = {"Satellite": Esri_WorldImagery,"Grey Canvas": Esri_DarkGreyCanvas
};var map = L.map('map', {
layers: [ Esri_WorldImagery ]
});var layerControl = L.control.layers(baseLayers);
layerControl.addTo(map);//设置地图初始化中心点和级别map.setView([50.00, 14.44], 3); 
return {
map: map,
layerControl: layerControl
};
}

  • 风场初始化加载

,map: map,layerControl: layerControl,useNearest: 7

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 精品唯居 > 《待分类》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多