Echarts3实例 加载地图

最新推荐文章于 2024-06-26 11:09:42 发布
最新推荐文章于 2024-06-26 11:09:42 发布
阅读量4.1k 收藏 3
点赞数 1
分类专栏： Echarts 文章标签： echarts map 加载 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idomyway/article/details/85072880
版权

前言

    Echarts加载GeoJson数据生成canvas地图，可以实现地图简单的展示，获取GeoJson数据的方法见：https://blog.csdn.net/idomyway/article/details/85072698
    Echarts生成地图的数据加载方式有两种：

  • 加载GeoJson的js文件
  • 加GeoJson的Json文件

加载GeoJson的js文件显示地图

    通过js文件加载GeoJson地图数据需要在html中进行导入，如果在比较大的地图数据中，会加重网络负担，不推荐使用

加载GeoJson的json文件显示地图

    我们在需要加载地图地方加载json数据，并进行注册使用，在进行展示的时候再异步加载数据。prefect

实现效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            height: 100%;
        }
        *{
            margin: 0px;
            height: 0px;
        }
        #map{
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <!--<script src="json/shandong.js"></script>-->
</head>
<body>
<div id="map"></div>
<script>
    // JS
    // var chart = echarts.init(document.getElementById('map'));
    //     var option = {
    //         title: {
    //             text: '山东地图',
    //
    //         },
    //         series: [{
    //             type: 'map',
    //             map: 'shandong',
    //             aspectScale:1,//保持原始比例
    //             roam: true,
    //             label: {
    //                 show:true,
    //                 normal: {
    //                     show: true,
    //                     color:"#000",
    //                 },
    //                 emphasis: {
    //                     show: true,
    //                     fontSize:16,
    //                     color:"#fff"
    //
    //                 }
    //             },
    //         }]
    //     };
    // chart.setOption(option);

    // JSON
    $.getJSON('./json/shandong.json', function (data) {
        echarts.registerMap('shandong', data);
        var chart = echarts.init(document.getElementById('map'));
        var option = {
            title: {
                text: '山东地图',

            },
            series: [{
                type: 'map',
                map: 'shandong',
                aspectScale:1,//保持原始比例
                roam: true,
                label: {
                    show:true,
                    normal: {
                        show: true,
                        color:"#000",
                    },
                    emphasis: {
                        show: true,
                        fontSize:16,
                        color:"#fff"

                    }
                },
            }]
        };
        chart.setOption(option);
    });
</script>

</body>
</html>
idomyway
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用echarts加载地图
吴举人的博客
10-17 6920
echarts这样的插件很好用，在这直奔重点，以下为注意事项： 1.echarts高版本的是没有中国地图的实例的，使用echarts做低版本的中国地图，需要引入低版本的echarts，这里用的版本是是echarts-2.2.7。 2.引入echarts的方法有三种，模块化包引入，模块化单文件引入（推荐），标签式单文件引入在实例中的代码，引入的方法一般为第二种(不同的引入方式会导致报错)，具体htt...
ECharts地图实例
10-17
ECharts中的地图功能是通过`echarts.map`来加载地图数据的。地图数据通常是以JSON格式存储的，包含了各个行政区域的边界信息。对于中国地图，ECharts内置了省级和市级的地图数据，但报警点的显示需要我们自定义处理...
echarts3地图数据文件 (含全国和省js以及全国、省、地市json文件)
11-20
echarts3目前已经不支持下载地图数据，此附件中包含了js和json两种数据格式，以及调用示例。 js格式，直接调用简单直接，但是数据只有全国概览和各省的数据，也就是只能看到地市级城市的地图。 json格式在html中不能直接调用执行，需要通过应用服务器，所以提供了jsp示例。 json格式的数据，提供了全国概览以及各省、地市级城市的数据，也就是可以看到县级的地图了。
ECharts加载单独省份地图
11-14
这个方法可以加载单个省份地图。ECharts官方不再提供矢量地图数据，详见 http://echarts.baidu.com/download-map.html。使用方法：运行nginx.exe，访问 http://localhost:9005/index.html 即可
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1237
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
Echarts加载2D地图(图文)
weixin_42533732的博客
09-16 1086
echarts实战、echarts2d地图、行政区域、街道地图渲染、地图贴图
Echarts地图加载及使用
shaoleijay的专栏
05-26 1425
echarts加载地图显示多组数据并实现点击、悬浮事件 1、引入echarts.min.js文件，引入地图map中需要加载的地图js： <script src="js/libs/echarts-4.7.0/dist/echarts.min.js" type="application/javascript"></script> <script src="js/libs/echarts-4.7.0/map/js/province/anhui.js" type="applica
echarts5.3.2版本加载中国地图
weixin_48058348的博客
06-30 1074
echarts5.3.2版本加载中国地图
ECharts-GL 3D地球实例（动态改变自转、加载去空白圆心）
05-11
为了解决这个问题，可以在初始化ECharts实例时，设置适当的`loadingOption`，并监听`chart.rendered`事件。当图表渲染完成后再展示地球，可以避免因资源未完全加载导致的空白。同时，检查数据源是否正确，确保地图...
echarts3地图
12-29
使用这些地图资源时，首先需要在 HTML 页面中引入 ECharts 3 的库文件，然后加载地图 JS 和 JSON 数据文件。接着，创建 ECharts 实例，并配置地图相关的参数，如地图类型、数据源、地图级别等。最后，调用 ECharts ...
echarts3 地图
03-21
3. **初始化ECharts实例**：在JavaScript中，你需要获取到刚才创建的容器元素，并初始化ECharts实例。 ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 4. **配置地图**：定义...
echarts3地图数据(含全国和省js以及全国、省、地市)
01-30
整理最全的 echarts3地图数据！含全国和省js以及全国、省、地市
echarts3地图数据(含全国和省js以及全国、省、地市json).zip
06-06
echarts3D地图数据(含全国和省js以及全国、省、地市json), echarts3目前已经不支持下载地图数据，此附件中包含了js和json两种数据格式，以及调用示例。 js格式，直接调用简单直接，但是数据只有全国概览和各省的数据，也就是只能看到地市级城市的地图。 json格式在html中不能直接调用执行，需要通过应用服务器，所以提供了jsp示例。 json格式的数据，提供了全国概览以及各省、地市级城市的数据，也就是可以看到县级的地图了。
echarts3地图数据(含全国和省js以及全国、省、地市json)
05-30
echarts3地图数据(含全国和省js以及全国、省、地市json) echarts3地图数据(含全国和省js以及全国、省、地市json) echarts3地图数据(含全国和省js以及全国、省、地市json)
Echarts3地图数据(含全国和省js以及全国、省、区县json)
10-12
Echarts3地图数据(含全国和省js以及全国、省、区县json)
echarts江苏地图实例
07-26
5. **加载并渲染图表**：最后，使用`setOption`方法将配置应用到ECharts实例中，完成地图的绘制： ```javascript myChart.setOption(option); ``` 在实际应用中，你可以根据需要动态加载json数据，例如通过Ajax...
echarts热力图地图加载geoserver的地图
bingjilingvsh2o的专栏
05-05 501
echarts热力图加载地图可以使用GeoJSON格式的数据，geoserver的WFS服务可以获取到GeoJSON格式的数据。获取数据接口：http:///demo/ows?其中localhost:8086/geoserver为部署geoserver服务的地址，typeName为图层名称，格式示例demo:layername，demo为工作区名称，layername为图层名称。得到的GeoJSON数据结构如下。
echarts3的地图
super_scholar的博客
07-05 1276
最近页面需要使用echarts来展示一个地图，但是地图出来了，各省的名称却没有出来，本来这个echarts就不熟练，各种找，终于发现是中国地图的js没有引用照成的，下面分享一下echarts3的使用方法。 ①地图JavaScript 引入示例// 引入echarts.js <script src="echarts.js"></script> // 引入中国地图坐标集china.js <script
echarts 百度地图加载全球
05-20
要在echarts中加载全球百度地图，您需要按照以下步骤操作： 1. 首先，在您的HTML页面中引入echarts和百度地图API的JavaScript文件。 ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script> ``` 其中，AK是您在百度地图开发者平台申请的AK密钥。 2. 然后，在echarts中定义一个百度地图的实例，并设置其属性。 ```javascript var bmap = new BMap.Map("mapContainer"); // 创建百度地图实例 var mapStyle = { styleJson: [ { "featureType": "water", "elementType": "all", "stylers": { "color": "#044161" } }, { "featureType": "land", "elementType": "all", "stylers": { "color": "#004981" } }, { "featureType": "boundary", "elementType": "geometry", "stylers": { "color": "#064f85" } }, { "featureType": "railway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "color": "#004981" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#005b96", "lightness": 1 } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "geometry", "stylers": { "color": "#004981" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#00508b" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "green", "elementType": "all", "stylers": { "color": "#056197", "visibility": "off" } }, { "featureType": "subway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "manmade", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "boundary", "elementType": "geometry.fill", "stylers": { "color": "#029fd4" } }, { "featureType": "building", "elementType": "all", "stylers": { "color": "#1a5787" } }, { "featureType": "label", "elementType": "all", "stylers": { "visibility": "off" } } ] }; bmap.setMapStyle(mapStyle); // 设置地图样式 bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 3); // 初始化地图，设置中心点和缩放级别 bmap.enableScrollWheelZoom(true); // 启用滚轮缩放 ``` 在这里，我们创建了一个名为bmap的百度地图实例，并设置了地图样式、中心点和缩放级别、滚轮缩放等属性。 3. 最后，在echarts中使用百度地图的实例作为地图组件的option。 ```javascript option = { bmap: { center: [116.404, 39.915], zoom: 3, roam: true, mapStyle: { styleJson: [ { "featureType": "water", "elementType": "all", "stylers": { "color": "#044161" } }, // ... ] } }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [ [116.41637, 39.92856], // ... ], symbolSize: function (val) { return val[2] * 5; }, itemStyle: { color: 'purple' }, emphasis: { label: { show: true, formatter: function (param) { return param.data[3]; }, position: 'top' } } }] }; ``` 在这里，我们将百度地图的实例作为地图组件的option，并设置了散点图的相关属性。 通过以上步骤，您就可以在echarts中加载全球百度地图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值