您现在的位置:

概述

四维地图JS SDK 是一套由JavaScript语言编写的应用程序接口,支持PC端和移动端基于浏览器的地图应用开发。

JS SDK很好的支持2D、3D地图模式切换,提供地图自定义、图层加载、点标记添加、矢量图形绘制、地图控件、几何计算、坐标转换等众多接口,帮助用户快速搭建功能丰富、交互性强的地图应用。


功能介绍与体验

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8" />
                        <title >示例 </title>
                        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
                        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
                        <style type="text/css">
                            * {
                                margin: 0;
                                padding: 0
                            }
                        </style >
                        <link rel="stylesheet" href="${mapCss}" >
                    </head>
                    <body>
                    <div id="map" > </div >
                    <script src="${mapJs}" ></script>
                    <script type="text/javascript">
                        var map = new nglp.Map({
                            container: 'map',
                            style: '${mapStyle}',
                            zoom:11, //初始化地图层级
                            center: [116.397428, 39.90923], //初始化地图中心点
                            localIdeographFontFamily: "PingFang SC,Microsoft YaHei,微软雅黑,Arial,sans-serif,黑体" //字体本地读取
                        });
                    </script>
                    </body >
                    </html >
                
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>示例
                        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
                        <meta http-equiv="X-UA-Compatible" content="chrome=1">
                        <style>
                            * {
                                margin: 0;
                                padding: 0
                            }
                        
                        <link rel="stylesheet" href="${mapCss}" >
                    </head>
                    <body>
                    
<script src="${mapJs}"></script> <script type="text/javascript"> var map = new nglp.Map({ container: 'map', style: '${mapStyle}', zoom:11, //初始化地图层级 center: [116.397428, 39.90923], //初始化地图中心点 localIdeographFontFamily: "PingFang SC,Microsoft YaHei,微软雅黑,Arial,sans-serif,黑体" //字体本地读取 }); var path = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ]; var polyline = new nglp.Polyline({ path: path, "line-join": 'round', "line-cap": 'round', "line-width":8, 'line-blur':0, }); map.on('load',function () { polyline.addTo(map); // 缩放地图到合适的视野级别 map.setFitView(polyline.path) }) </script> </body> </html>
                    <script type="text/javascript">
                        var map = new nglp.Map({
                            container: 'map',
                            style: '${mapStyle}',
                            zoom:11, //初始化地图层级
                            center: [116.397428, 39.90923], //初始化地图中心点
                            localIdeographFontFamily: "PingFang SC,Microsoft YaHei,微软雅黑,Arial,sans-serif,黑体" //字体本地读取
                        });

                        map.on('load',function () {
                            var heatmap = new nglp.Heatmap(map, {
                                radius: 25,
                                opacity: 0.8,
                                gradient: {
                                    0.5: 'blue',
                                    0.65: 'rgb(117,211,248)',
                                    0.7: 'rgb(0, 255, 0)',
                                    0.9: '#ffea00',
                                    1.0: 'red'
                                }
                            });
                            heatmap.setDataSet({
                                data: window.testJson,
                                max: 100
                            });
                        })
                    </script>
                
返回顶部