A0748e48f880a30f47e78468ef4a75c2
leaflet实现风场图(附源码下载)

前言

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

内容概览

leaflet 实现风场图
源代码 demo 下载

实现效果图如下:


  • html 页面引用资源
<!doctype html>
<html>
<head>
    <title>Leaflet风场图</title>
    <meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/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.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri — 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 © Esri — 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'
top Created with Sketch.