精华内容
下载资源
问答
  • ArcGIS 加载中国地图插件 ArcGIS 加载中国地图插件 ArcGIS 加载中国地图插件
  • 中国地图 省界 TopoJson

    2018-04-24 14:37:10
    China.topojson 是中国省界地图的json格式 主要是适用于GIS开发,可以在页面显示出中国地图并且进行一些必要的操作。
  • 基于百度的echarts编写的中国地图数据统计显示demo,可以下载直接使用,用于技术交流分享
  • China.City.topojson 是中国城市明细地图的json格式 主要是适用于GIS开发,可以在页面显示出中国城市地图并且进行一些必要的操作。
  • 用于绘制中国主要边界的shp文件
  • ECharts3中国地图json文件及全国省的json文件;Echarts3地图数据json文件(含全国和省) ,echarts3目前已经不支持下载地图数据,此附件中包含了json数据格式,以及调用示例。
  • 包含报告,答辩ppt,以及完整Java代码。程序有可视化界面,可以图形化显示着色过程。本程序通过回溯法实现了中国地图着色问题(4色),并研究了优化算法
  • 使用 pyecharts 绘制中国地图实例详解 第一章:实例演示 ① pyecharts 1.9.1 版本安装与数据准备 ② 添加数据项,默认中国地图显示 第二章:常用配置项及参数解析 ① 设置是否默认选中 ② 设置地图颜色类型是否分段...

    第一章:实例演示

    先给大家看下效果图哈。
    在这里插入图片描述

    ① pyecharts 1.9.1 版本安装与数据准备

    首先需要安装 pyecharts 库,直接 pip install pyecharts 就好了。
    新版本的话不需要单独安装地图,如果是 0.5 版本是需要单独安装的,目前演示的是当前最新版本 1.9.1
    地图数据如下:
    因为是中国地图,所以对标的省份,我设置了 2 组,里面的数据是随机生成的。

    # -*- coding:utf-8 -*-
    # 2022-1-14
    # 作者:小蓝枣
    # pyecharts地图
    
    # 需要引用的库
    from pyecharts import options as opts
    from pyecharts.charts import Map
    import random
    
    # 设置奥特曼所存在的相关省份,并设置初始数量为0
    ultraman = [
    ['四川', 0],
    ['台湾', 0],
    ['新疆', 0],
    ['江西', 0],
    ['河南', 0],
    ['辽宁', 0],
    ['西藏', 0]
    ]
    
    # 设置怪兽存在的相关省份,并设置初始数量为0
    monster = [
    ['广东', 0],
    ['北京', 0],
    ['上海', 0],
    ['江西', 0],
    ['湖南', 0],
    ['浙江', 0],
    ['江苏', 0]
    ]
    
    def data_filling(array):
        ''' 
         作用:给数组数据填充随机数
        '''
        for i in array:
            # 随机生成1到1000的随机数
            i[1] = random.randint(1,1000)
            print(i)
    
    data_filling(ultraman)
    data_filling(monster)
    

    ② 添加数据项,默认中国地图显示

    首先演示下添加一组数据,运行后会生成一个 html 文件,打开后就可以查看生成的地图了。
    在这里插入图片描述

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 设置标题
            .set_global_opts(title_opts=opts.TitleOpts(title="中国地图"))
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    在这里插入图片描述
    然后演示下添加两组数据,只要再加个 add() 函数就好了,非常方便。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 设置标题
            .set_global_opts(title_opts=opts.TitleOpts(title="中国地图"))
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    在这里插入图片描述

    ③ 完整源码,可直接运行

    给大家加了块完整源码,直接运行即可哈。

    # -*- coding:utf-8 -*-
    # 2022-1-14
    # 作者:小蓝枣
    # pyecharts地图
    
    # 需要引用的库
    from pyecharts import options as opts
    from pyecharts.charts import Map
    import random
    
    # 设置奥特曼所存在的相关省份,并设置初始数量为0
    ultraman = [
    ['四川', 0],
    ['台湾', 0],
    ['新疆', 0],
    ['江西', 0],
    ['河南', 0],
    ['辽宁', 0],
    ['西藏', 0]
    ]
    
    # 设置怪兽存在的相关省份,并设置初始数量为0
    monster = [
    ['广东', 0],
    ['北京', 0],
    ['上海', 0],
    ['江西', 0],
    ['湖南', 0],
    ['浙江', 0],
    ['江苏', 0]
    ]
    
    def data_filling(array):
        ''' 
         作用:给数组数据填充随机数
        '''
        for i in array:
            # 随机生成1到1000的随机数
            i[1] = random.randint(1,1000)
            print(i)
    
    data_filling(ultraman)
    data_filling(monster)
    
    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 设置标题
            .set_global_opts(title_opts=opts.TitleOpts(title="中国地图"))
            # 生成本地html文件
            .render("中国地图.html")
        )
    
    create_china_map()
    

    第二章:常用配置项及参数解析

    ① 设置是否默认选中

    默认是选中的,添加 is_selected=False 参数可以设置默认不显示。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中
                is_selected=False
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 设置标题
            .set_global_opts(title_opts=opts.TitleOpts(title="中国地图"))
            # 生成本地html文件
            .render("中国地图.html")
        )
    
    create_china_map()
    

    可以看到默认只显示了怪兽的数据。
    在这里插入图片描述

    ② 设置地图颜色类型是否分段显示

    视觉映射配置项 visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=True) 可以设置为地图颜色类型分段显示,max_ 的值对应的是数据的范围,参数 is_piecewise=True 表示为分段显示。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中
                is_selected=True
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            .set_global_opts(
            # 设置标题
            title_opts=opts.TitleOpts(title="中国地图"),
            # 设置分段显示
            visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=True)
            )
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    分段显示效果图:
    在这里插入图片描述

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中
                is_selected=True
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            .set_global_opts(
            # 设置标题
            title_opts=opts.TitleOpts(title="中国地图"),
            # 设置标准显示
            visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=False)
            )
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    这是参数为 is_piecewise=False 的标准显示。
    在这里插入图片描述

    ③ 缩放平移配置

    参数 is_roam=False 会控制不可进行鼠标缩放和平移。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中,默认为True
                is_selected=True,
                # 是否启用鼠标滚轮缩放和拖动平移,默认为True
                is_roam=False
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            .set_global_opts(
            # 设置标题
            title_opts=opts.TitleOpts(title="中国地图"),
            # 设置标准显示
            visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=False)
            )
            # 生成本地html文件
            .render("中国地图.html")
        )
    
    

    参数启用时鼠标滚轮可以放大缩小图像。
    在这里插入图片描述
    鼠标可以左右拖动使地图平移。
    优先级声明: a 数据设置为 Falseb 数据设置为 True,不选中 a 数据,也可以进行缩放和平移拖动。
    在这里插入图片描述

    ④ 启用和关闭图形标记

    参数 is_map_symbol_show=False 可以关闭图形标记,关闭就不显示点了。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中,默认为True
                is_selected=True,
                # 是否启用鼠标滚轮缩放和拖动平移,默认为True
                is_roam=True,
                # 是否显示图形标记,默认为True
                is_map_symbol_show=False
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            .set_global_opts(
            # 设置标题
            title_opts=opts.TitleOpts(title="中国地图"),
            # 设置标准显示
            visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=False)
            )
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    可以看到奥特曼相关区域的点已经没有了。
    在这里插入图片描述

    ⑤ 关闭标签名称显示

    系列配置项的参数 label_opts=opts.LabelOpts(is_show=False) 可以关闭标签名称显示。

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中,默认为True
                is_selected=True,
                # 是否启用鼠标滚轮缩放和拖动平移,默认为True
                is_roam=True,
                # 是否显示图形标记,默认为True
                is_map_symbol_show=False
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 全局配置项
            .set_global_opts(
            # 设置标题
            title_opts=opts.TitleOpts(title="中国地图"),
            # 设置标准显示
            visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=False),
            )
            # 系列配置项
            # 关闭标签名称显示
            .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    可以看到省份的名称不显示了。
    在这里插入图片描述

    ⑥ 颜色设置:标签颜色、区域颜色、边框颜色

    系列配置项里的标签加上 color="bule" 参数可设置标签颜色为蓝色。
    图元样式配置的 areaColor 为区域颜色, borderColor 为边框颜色,
    其中 normal 为常规模式下的,emphasis 为强调样式下的,即鼠标移动到区域上的显示。

    # 图元样式配置
    itemstyle_opts={
        # 常规显示
        "normal": {"areaColor": "white", "borderColor": "red"},
        # 强调颜色
        "emphasis": {"areaColor": "rgba(0,0,0,1)"}
    }
    

    可以看到我鼠标移动到新疆显示的为我设置的黑色,透明度为 1
    在这里插入图片描述

    def create_china_map():
        ''' 
         作用:生成中国地图
        '''
        (
            Map()
            .add(
                series_name="奥特曼", 
                data_pair=ultraman, 
                maptype="china", 
                # 是否默认选中,默认为True
                is_selected=True,
                # 是否启用鼠标滚轮缩放和拖动平移,默认为True
                is_roam=True,
                # 是否显示图形标记,默认为True
                is_map_symbol_show=False,
                # 图元样式配置
                itemstyle_opts={
                    # 常规显示
                    "normal": {"areaColor": "white", "borderColor": "red"},
                    # 强调颜色
                    "emphasis": {"areaColor": "rgba(0,0,0,1)"}
                }
            )
            .add(
                series_name="怪兽", 
                data_pair=monster, 
                maptype="china", 
            )
            # 全局配置项
            .set_global_opts(
                # 设置标题
                title_opts=opts.TitleOpts(title="中国地图"),
                # 设置标准显示
                visualmap_opts=opts.VisualMapOpts(max_=1000, is_piecewise=False)
            )
            # 系列配置项
            .set_series_opts(
                # 标签名称显示,默认为True
                label_opts=opts.LabelOpts(is_show=True, color="blue")
            )
            # 生成本地html文件
            .render("中国地图.html")
        )
    

    ⑦ 地图画布初始化大小配置

    Map() 里通过添加 init_opts 参数可以配置初始化画布大小。
    例如:Map(init_opts=opts.InitOpts(height="1000px", width="1500px"))
    在这里插入图片描述
    喜欢的点个赞❤吧!

    展开全文
  • 利用百度Echarts实现按照七大地理区划分的中国地图以及带有时间轴的柱状图。每次选择的选择框时,地图数据会更新,实现界面交互,比如,选择肺癌时,地图上的数据是肺癌数据,地图右边会出现肺癌图片及描述。
  • ECharts中国地图--省份文字居中
  • 很逼真的中国地图描点文件,包括四个直辖市以及台湾。
  • ECharts之中国地图

    千次阅读 多人点赞 2019-08-02 14:35:01
    引入中国地图     在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' imp...

    效果图

    在这里插入图片描述

    背景图片

    下载

    npm install echarts --save
    

    引入中国地图

        在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
    
    import '../node_modules/echarts/map/js/china.js' // 引入中国地图
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

    在组件中使用

    <template>
      <div class='wrapper'>
        <div class='chart' id='chart'></div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {}
      },
      mounted () {
        this.drawChart()
      },
      methods: {
        drawChart () {
          let that = this
          // 基于准备好的dom,初始化echarts实例
          let chart = this.$echarts.init(document.getElementById('chart'))
          // 监听屏幕变化自动缩放图表
          window.addEventListener('resize', function () {
            chart.resize()
          })
          // 绑定事件处理函数
          chart.on('click', function (res) {
    		// 跳转到省市地图
            that.$router.push({ path: '/provincechart', query: { cityName: res.data.name } })
          })
          // 绘制图表
          chart.setOption({
            // 图表主标题
            title: {
              text: '全国各省人口', // 主标题文本,支持使用 \n 换行
              top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
              left: 'center', // 值: 'left', 'center', 'right' 同上
              textStyle: { // 文本样式
                fontSize: 24,
                fontWeight: 600,
                color: '#fff'
              }
            },
            // 提示框组件
            tooltip: {
              trigger: 'item', // 触发类型, 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
              // 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
              // 使用函数模板  传入的数据值 -> value: number | Array
              formatter: function (val) {
                if (val.data.value < 10000) {
                  return val.data.name + '<br>人口数量: ' + val.data.value + '万'
                } else {
                  return val.data.name + '<br>人口数量: ' + (val.data.value / 10000).toFixed(2) + '亿'
                }
              }
            },
            // 视觉映射组件
            visualMap: {
              type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
              show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false,不会显示,但是数据映射的功能还存在
              // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
              // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
              min: 0,
              max: 11300,
              // 文本样式
              textStyle: {
                fontSize: 14,
                color: '#fff'
              },
              realtime: false, // 拖拽时,是否实时更新
              calculable: true, // 是否显示拖拽用的手柄
              // 定义 在选中范围中 的视觉元素
              inRange: {
                color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
              }
            },
            series: [
              {
                type: 'map', // 类型
                // 系列名称,用于tooltip的显示,legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                name: '中国',
                mapType: 'china', // 地图类型
                // 是否开启鼠标缩放和平移漫游 默认不开启
                // 如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                roam: false,
                // 图形上的文本标签
                label: {
                  show: false // 是否显示对应地名
                },
                // 地图区域的多边形 图形样式
                itemStyle: {
                  areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap,areaColor属性将不起作用
                  borderWidth: 0.5, // 描边线宽 为 0 时无描边
                  borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color,不支持回调函数
                  borderType: 'solid' // 描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'
                },
                // 高亮状态下的多边形和标签样式
                emphasis: {
                  label: {
                    show: true, // 是否显示标签
                    color: '#fff' // 文字的颜色 如果设置为 'auto',则为视觉映射得到的颜色,如系列色
                  },
                  itemStyle: {
                    areaColor: '#FF6347' // 地图区域的颜色
                  }
                },
                // 地图系列中的数据内容数组 数组项可以为单个数值
                data: [
                  { name: '北京', value: 2154, lng: 116.405285, lat: 39.904989 },
                  { name: '天津', value: 1560, lng: 117.190182, lat: 39.125596 },
                  { name: '上海', value: 2424, lng: 121.472644, lat: 31.231706 },
                  { name: '重庆', value: 3102, lng: 106.504962, lat: 29.533155 },
                  { name: '河北', value: 7556, lng: 114.502461, lat: 38.045474 },
                  { name: '河南', value: 9605, lng: 113.665412, lat: 34.757975 },
                  { name: '云南', value: 4830, lng: 102.712251, lat: 25.040609 },
                  { name: '辽宁', value: 4359, lng: 123.429096, lat: 41.796767 },
                  { name: '黑龙江', value: 3773, lng: 126.642464, lat: 45.756967 },
                  { name: '湖南', value: 6899, lng: 112.982279, lat: 28.19409 },
                  { name: '安徽', value: 6324, lng: 117.283042, lat: 31.86119 },
                  { name: '山东', value: 10000, lng: 117.000923, lat: 36.675807 },
                  { name: '新疆', value: 2487, lng: 87.617733, lat: 43.792818 },
                  { name: '江苏', value: 8051, lng: 118.767413, lat: 32.041544 },
                  { name: '浙江', value: 5737, lng: 120.153576, lat: 30.287459 },
                  { name: '江西', value: 4648, lng: 115.892151, lat: 28.676493 },
                  { name: '湖北', value: 5917, lng: 114.298572, lat: 30.584355 },
                  { name: '广西', value: 4926, lng: 108.320004, lat: 22.82402 },
                  { name: '甘肃', value: 2637, lng: 103.823557, lat: 36.058039 },
                  { name: '山西', value: 3718, lng: 112.549248, lat: 37.857014 },
                  { name: '内蒙古', value: 2534, lng: 111.670801, lat: 40.818311 },
                  { name: '陕西', value: 3864, lng: 108.948024, lat: 34.263161 },
                  { name: '吉林', value: 2704, lng: 125.3245, lat: 43.886841 },
                  { name: '福建', value: 3941, lng: 119.306239, lat: 26.075302 },
                  { name: '贵州', value: 3600, lng: 106.713478, lat: 26.578343 },
                  { name: '广东', value: 11300, lng: 113.280637, lat: 23.125178 },
                  { name: '青海', value: 603, lng: 101.778916, lat: 36.623178 },
                  { name: '西藏', value: 344, lng: 91.132212, lat: 29.660361 },
                  { name: '四川', value: 8341, lng: 104.065735, lat: 30.659462 },
                  { name: '宁夏', value: 688, lng: 106.278179, lat: 38.46637 },
                  { name: '海南', value: 934, lng: 110.33119, lat: 20.031971 },
                  { name: '台湾', value: 2358, lng: 121.509062, lat: 25.044332 },
                  { name: '香港', value: 745, lng: 114.173355, lat: 22.320048 },
                  { name: '澳门', value: 63, lng: 113.54909, lat: 22.198951 },
                  { name: '南海诸岛', value: 271.13, lng: 114.252615, lat: 15.86029 }
                ]
              }
            ]
          })
          // 定时显示提示框和高亮效果
          let index = -1
          setInterval(function () {
            // 隐藏提示框
            chart.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0,
              dataIndex: index
            })
            // 显示提示框
            chart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: index + 1
            })
            // 取消高亮指定的数据图形
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index
            })
            // 高亮指定的数据图形
            chart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: index + 1
            })
            index++
            if (index > 34) {
              index = -1
            }
          }, 2000)
        }
      }
    }
    </script>
    
    <style scoped>
      .wrapper {
        width: 100%;
      }
      .wrapper .chart {
        width: 80%;
        height: 600px;
        margin: 100px 50px 0;
        border: 1px solid #eeeeee;
        background: url(../../public/static/bg.png) no-repeat;
        background-size: 100% 100%;
      }
    </style>
    
    展开全文
  • 中国地图着色程序

    2012-06-12 20:56:34
    用vc开发的地图着色程序,所写代码为作者原创,欢迎大家下载
  • echart实现中国地图

    万次阅读 多人点赞 2019-05-06 11:16:10
    1.渲染地图的基础配置 chinaMap () { // 地图 const obj = { title: { text: '' }, backgroundColor: '', tooltip: { trigger: 'item', formatter: '{b}...
    1.渲染地图的基础配置
     chinaMap () { // 地图
          const obj = {
            title: {
              text: ''
            },
            backgroundColor: '',
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c}'
            }, // 鼠标移到图里面的浮动提示框
            dataRange: {
              show: true,
              min: 0,
              max: 200,
              range: [0, 199],
              text: ['', ''],
              realtime: false,
              calculable: false,
              startAngle: 0,
              color: [],
              orient: 'horizontal',
              itemWidth: '15',
              itemHeight: '120',
              left: 50,
              bottom: 20,
              precision: 4  // 数据展示的小数精度
            },
            geo: { // 这个是重点配置区
              map: 'china', // 表示中国地图
              roam: true,
              z: '2',
              scaleLimit: {
                min: 1.8,
                max: 1.8
              },
              label: {
                normal: {
                  show: false, // 是否显示对应地名
                  textStyle: {
                    color: '#c3e5dc'
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                  // areaColor: '#ededed' // 地图背景色
                },
                emphasis: {
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              right: '100',
              left: 'auto',
              bottom: '0'
            },
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo' // 对应上方配置
              },
              {
                name: '', // 浮动框的标题
                type: 'map',
                geoIndex: 0,
                data: []
              }
            ]
          }
          return obj
        },
    
    2.渲染地图
    opt9R () {
          const obj = JSON.parse(JSON.stringify(this.chinaMap))
          obj.series[1].data = this.prod_province_map.provinces
          obj.dataRange.color = ['#4d779c', '#c3e5dc']
          // obj.geo.itemStyle.normal.areaColor = '#eedcb9'
          obj.dataRange.min = this.prod_province_map.min
          obj.dataRange.max = this.prod_province_map.max
          obj.dataRange.range = [this.prod_province_map.min, this.prod_province_map.max]
          obj.dataRange.text = [this.prod_province_map.max, this.prod_province_map.min]
          obj.right = 'auto'
          obj.tooltip = this.tooltipPer7
          return obj
        },
    

    在这里插入图片描述

    若使用visualMap 是视觉映射组件,即左边视觉拖动条时,需要配置visualMap属性,若需要显示0-1之间的小数时,需要配置precision: 4,表示拖动条可以映射到的精度,即可以显示带小数部分的数据,如0-1之间的小数

    在这里插入图片描述

    3.渲染地图的散点图基础配置
    ripsChinaMap () {
          const obj = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'item'
            },
            visualMap: {
              min: 0,
              max: 300,
              type: 'piecewise',
              inverse: true,
              // splitNumber: 5,
              itemWidth: '12',
              itemHeight: '12',
              itemSymbol: 'circle',
              left: '38%',
              color: ['#d8d8d8', '#d8d8d8', '#d8d8d8'],
              textStyle: {
                color: '#333'
              },
              target: {
                inRange: {
                  color: [],
                  symbolSize: [5, 15]
                }
              },
              symbol: 'circle',
              pieces: [
                {gte: 110, lt: 120, label: '110'},
                {gte: 100, lt: 110, label: '100'},
                {gte: 90, lt: 100, label: '90'},
                {gte: 80, lt: 90, label: '80'},
                {gte: 70, lt: 80, label: '70'},
                {gte: 60, lt: 70, label: '60'}
              ]
            },
            geo: { // 这个是重点配置区
              map: 'china', // 表示中国地图
              roam: true,
              silent: true,
              z: '0',
              scaleLimit: {
                min: 1.8,
                max: 1.8
              },
              label: {
                normal: {
                  show: false, // 是否显示对应地名
                  textStyle: {
                    color: '#c3e5dc'
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#c9c9c9',
                  areaColor: '#ededed'
                },
                emphasis: {
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              right: '100',
              left: 'auto',
              bottom: '0'
            },
            bmap: {
              center: [104.114129, 37.550339],
              zoom: 5,
              roam: true,
              mapStyle: {
                styleJson: []
              }
            },
            series: [
              {
                name: '',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: [],
                symbolSize: function (val) {
                  return val[1] / 10
                },
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#71a0ca'
                  }
                }
              }
            ]
          }
          return obj
        },
    
    渲染散点图数据
    opt27R () {
          const obj = JSON.parse(JSON.stringify(this.ripsChinaMap))
          obj.visualMap.min = this.sel_city_map.min1
          obj.visualMap.max = this.sel_city_map.max1
          this.geoCoordMap = this.sel_city_map.jwd
          obj.series[0].data = this.convertData(this.sel_city_map.citys_st_count)
          const distance = Math.ceil((this.sel_city_map.max1 - this.sel_city_map.min1) / 5)
          obj.visualMap.pieces.forEach((item, index) => {
            item.gte = this.sel_city_map.min1 + index * distance
            item.lt = this.sel_city_map.min1 + (index + 1) * distance
            item.label = (this.sel_city_map.min1 + index * distance) + ''
          })
          obj.series[0].itemStyle.normal.color = '#f98c15'
          obj.visualMap.target.inRange.color = ['#f98c15']
          obj.tooltip = this.tooltipPer6
          return obj
        }
    
    渲染结果:

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 功能涵盖了校庆官方信息发布、校庆应援点亮地图、校庆活动发布、寻找校友、校友回忆、校庆祝福、校庆捐款、校庆周边等 参考的资料有 微信官方小程序文档 微信小程序的一个开发社区,资料比较老 B站上的小程序开发...


    0 小程序开发背景

    前段时间在上学校的软件开发与实践B课程
    因为赶上了工大百年校庆,选择了开发百年工大校庆微信小程序
    功能涵盖了校庆官方信息发布、校庆应援点亮地图、校庆活动发布、寻找校友、校友回忆、校庆祝福、校庆捐款、校庆周边等

    参考的资料有

    在这里想复盘一下校庆应援点亮地图的步骤

    使用的百度Echarts地图,参考的模板是中国地图模板


    1 下载官方Github项目

    • 进入Echarts for weixin,里面有示例步骤以及示例程序。

    • 为了兼容小程序 CanvasEcharts官方提供了一个小程序的组件,用这种方式可以方便地使用 ECharts

      首先,需要下载本项目。其中,ec-canvas是提供的组件,其他文件是如何使用该组件的示例。ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。
      如有必要,可以自行从 ECharts 项目中下载最新发布版,或者从官网自定义构建以减小文件大小。

    • 在创建项目之后,可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目,然后将修改代码;或者仅拷贝 ec-canvas 目录到新建的项目下,然后做相应的调整。


    2 按照Echarts官网的map示例使用

    map示例

    1. 其中注意需要引进中国地图数据 mapData.js点击此处下载mapData.js

      在js文件中:
      import geoJson from './mapData.js';

      mapData.js中的内容为中国地图坐标文件:

    2. 绘制地图(在js文件中):

      geo: [
        {
          // 地理坐标系组件
          map: "china",
          roam: false, // 可以缩放和平移
          aspectScale: 0.8, // 比例
          layoutCenter: ["50%", "38%"], // position位置
          layoutSize: 370, // 地图大小,保证了不超过 370x370 的区域
          label: {
            // 图形上的文本标签
            normal: {
              show: true,
              textStyle: {
                color: "#E8E8E8",
                fontSize: '8'
              }
            },
            emphasis: { // 高亮时样式
              color: "#333",
              show: false
            }
          },
          itemStyle: {
            // 图形上的地图区域
            normal: {
              borderColor: "#FFD700",
              areaColor: "#87CEFF"
              //#000000 #87CEFF
            }
          }
        }
      ],
    
    1. 绘制地图上的各种效果(在js文件中):
     series: [
       {
         name: '散点',
         type: 'scatter',
         coordinateSystem: 'geo',
        // data: convertData(data),
         symbolSize: function(val) {
             return val[2] / 100;
         },
         label: {
             normal: {
                 formatter: '{b}',
                 position: 'left',
                 show: false,
                 textStyle: {
                   color: "rgba(0, 0, 0, 0.9)",
                   fontSize: '8'
                 }
             },
             emphasis: {
                 show: true,
                 textStyle: {
                   color: "rgba(0, 0, 0, 0.9)",
                   fontSize: '8'
                 }
             }
         },
         itemStyle: {
             normal: {
                 color: '#FFD700'
             }
         }
     },
     
       {
         type: 'map',
         mapType: 'china',
         geoIndex: 0,
         roam: false, // 鼠标是否可以缩放
         label: {
           normal: {
             show: false,
           },
           emphasis: {
             show: false
           }
         },
         itemStyle: {
           normal: {
               color: '#05C3F9',
               fontSize: '8'
           },
         },
        // data:citydata
     },
    
     
     {
       name: '气泡点',
       type: 'scatter',
       coordinateSystem: 'geo',
       symbol: 'pin', //气泡
       symbolSize: function(val) {
           var a = (maxSize4Pin - minSize4Pin) / (max - min);
           var b = minSize4Pin - a * min;
           b = maxSize4Pin - a * max;
           return (a * val[2] + b)/3;
       },
       label: {
           normal: {
               show: false,
               textStyle: {
                   color: '#fff',
                   fontSize: 8,
               }
           },
           formatter: '{@[6]}',
       },
      
       itemStyle: {
           normal: {
               color: '#F62157', //标志颜色
               fontSize: 8,
           }
       },
       //zlevel: 6,
      // data: convertData(citydata.sort(function(a, b) {return b.value - a.value;})),
    },
    
    {
       name: 'Top 5',
       type: 'effectScatter',
       coordinateSystem: 'geo',
       //data: convertData(citydata.sort(function(a, b) {return b.value - a.value; }).slice(0, 5)),
       symbolSize: function(val) {
           return val[2]/80;
       },
       showEffectOn: 'render',
       rippleEffect: {
           brushType: 'stroke'
       },
       hoverAnimation: true,
       label: {
           normal: {
               formatter: '{b}',
               position: 'right',
               show: false
           }
       },
      
       endcode:{
         label:2
       },
       itemStyle: {
           normal: {
               color: 'yellow',
               shadowBlur: 10,
               shadowColor: 'yellow'
           }
       },
      // zlevel: 1
    }],
    

    读取数据时使用的是微信小程序自带的云数据库

     const db = wx.cloud.database()
      getData:function()
      {
        wx.cloud.callFunction({
          name:"getCity"
        })
        .then(res=>{
          //console.log(res.result.data)
          const citydata=[];
          for(var i=0;i<res.result.data.length;i++){
            citydata.push(res.result.data[i])
         }
         //console.log(citydata)
         for(var i=0;i<citydata.length;i++){
            delete citydata[i]._id;
            delete citydata[i]._openid;
         }
         // console.log(citydata)
      
         // option.yAxis[0].data = note;
          option.series[0].data =  convertData(citydata);
          option.series[1].data = citydata;
          option.series[2].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}));
          option.series[3].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));
          if(!myMap){
            this.init_ChartMap();
          }else{
            myMap.clear();
            this.init_ChartMap();
          }
        })
      },
    

    3 点击事件的函数

    点击点亮之后,云数据库中该地区的数值+1

      lightHIT:function (){
       var cityAll = ['广东省','湖南省','黑龙江省','山东省','吉林省','辽宁省','内蒙古自治区','天津市','陕西省','山西省','宁夏回族自治区','新疆维吾尔自治区','西藏自治区','青海省','河北省','河南省','安徽省','浙江省','江苏省','上海市','重庆市','江西省','贵州省','海南省','台湾省','云南省','香港特别行政区','澳门特别行政区']
       var cityEasy = ['广东','湖南','黑龙江','山东','吉林','辽宁','内蒙古','天津','陕西','山西','宁夏','新疆','西藏','青海','河北','河南','安徽','浙江','江苏','上海','重庆','江西','贵州','海南','台湾','云南','香港','澳门']
    
       var num = cityAll.indexOf(this.data.region[0])
       console.log(cityEasy[num])
       db.collection("city")
       .where({
         name:_.eq(cityEasy[num])
       })
       .update({
           data:{
           value:_.inc(1)
         }
       })
       .then(res=> {
             // res.data 包含该记录的数据
             this.getData();
             console.log(res)
           })
    
         this.setData({
           dialogShow: true,
           //lightshow:false
       })
       
     },
    

    完整代码:

    1. js文件
    import * as echarts from '../../ec-canvas/echarts';
    import geoJson from './mapData.js';
    //import mychart from './china.json';
    
    const app = getApp();
    
    var geoCoordMap = {
      '台湾': [121.5135,25.0308],
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京': [116.4551, 40.2539],
      "辽宁": [123.1238, 42.1216],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      "福建": [119.4543, 25.9222],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891],
      '香港':[114.204522,22.263085],
      '澳门':[113.58206,22.14282],
    };
    var max = 607,
        min = 0; // todo 
    var maxSize4Pin = 50,
        minSize4Pin = 0;
    
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    const getPixelRatio = () => {
      let pixelRatio = 0
      wx.getSystemInfo({
        success: function (res) {
          pixelRatio = res.pixelRatio
        },
        fail: function () {
          pixelRatio = 0
        }
      })
      return pixelRatio
    }
    // console.log(pixelRatio)
    var dpr = getPixelRatio()
    
    var option = {
      backgroundColor: 'transparent',
      title: {
        subtext: '工大应援,点亮中国',
        left: 'center',
    },
      tooltip: {
        trigger: 'item',
        backgroundColor: "#FFF",
        padding: [
          10,  // 上
          15, // 右
          8,  // 下
          15, // 左
        ],
        extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
        textStyle: {
          fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
          color: '#005dff',
          fontSize: 12,
        },
      
        formatter: function (params) {
          if(typeof(params.value)[2] == "undefined"){
            return params.name + ' : ' + params.value;
          }else{
            return params.name + ' : ' + params.value[2];
          }
        }
      },
      geo: [
        {
          // 地理坐标系组件
          map: "china",
          roam: false, // 可以缩放和平移
          aspectScale: 0.8, // 比例
          layoutCenter: ["50%", "38%"], // position位置
          layoutSize: 370, // 地图大小,保证了不超过 370x370 的区域
          label: {
            // 图形上的文本标签
            normal: {
              show: true,
              textStyle: {
                color: "#E8E8E8",
                fontSize: '8'
              }
            },
            emphasis: { // 高亮时样式
              color: "#333",
              show: false
            }
          },
          itemStyle: {
            // 图形上的地图区域
            normal: {
              borderColor: "#FFD700",
              areaColor: "#87CEFF"
              //#000000 #87CEFF
            }
          }
        }
      ],
      visualMap: {
        show: true,
        min: 0,
        max: 607,
        left: 'left',
        top: 'bottom',
        text: ['high'], // 文本,默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: { 
            color: ['#63B8FF', '#FFD700','#EE0000'] //渐变颜色
    
        }
    },
      series: [
        {
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
         // data: convertData(data),
          symbolSize: function(val) {
              return val[2] / 100;
          },
          label: {
              normal: {
                  formatter: '{b}',
                  position: 'left',
                  show: false,
                  textStyle: {
                    color: "rgba(0, 0, 0, 0.9)",
                    fontSize: '8'
                  }
              },
              emphasis: {
                  show: true,
                  textStyle: {
                    color: "rgba(0, 0, 0, 0.9)",
                    fontSize: '8'
                  }
              }
          },
          itemStyle: {
              normal: {
                  color: '#FFD700'
              }
          }
      },
      
        {
          type: 'map',
          mapType: 'china',
          geoIndex: 0,
          roam: false, // 鼠标是否可以缩放
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
                color: '#05C3F9',
                fontSize: '8'
            },
          },
         // data:citydata
      },
     
      
      {
        name: '气泡点',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin', //气泡
        symbolSize: function(val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return (a * val[2] + b)/3;
        },
        label: {
            normal: {
                show: false,
                textStyle: {
                    color: '#fff',
                    fontSize: 8,
                }
            },
            formatter: '{@[6]}',
        },
       
        itemStyle: {
            normal: {
                color: '#F62157', //标志颜色
                fontSize: 8,
            }
        },
        //zlevel: 6,
       // data: convertData(citydata.sort(function(a, b) {return b.value - a.value;})),
    },
    
    {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        //data: convertData(citydata.sort(function(a, b) {return b.value - a.value; }).slice(0, 5)),
        symbolSize: function(val) {
            return val[2]/80;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            }
        },
       
        endcode:{
          label:2
        },
        itemStyle: {
            normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
            }
        },
       // zlevel: 1
    }],
    
    };
    
    const db = wx.cloud.database()
    const _ = db.command
    var myMap = null;
    Page({
      onShareAppMessage: function (res) {
        wx.showShareMenu({
          withShareTicket: true
        }) 
        return {
          title: '我为哈工大百年校庆应援!祝福工大生日快乐!',
          path: '/pages/light/light',
          imageUrl: 'https://6869-hit100-g6bma-1302265912.tcb.qcloud.la/2020.png?sign=b90eef1d7eabe42c1e5a362110b6a77c&t=1590806475',    
          success: function () { },
          fail: function () { }
        }
      },
    
      data: {
        ecMap: {
         // onInit: initChartMap
         lazyLoad: true //初始化加载
        },
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        index: null,
        region: ['广东省', '深圳市', '南山区'],
        multiIndex: [0, 0, 0],
        customItem: '全部',
        dialogShow: false,
        //lightshow:true,
        buttons: [{text: '规格严格,功夫到家!  :)'}],
      },
    
      tapDialogButton(e) {
          this.setData({
              dialogShow: false,
          })
          if(e.detail){
            console.log(e.detail)
            wx.showShareMenu({
              withShareTicket: true
            }) 
            return {
              title: '我为哈工大百年校庆应援!祝福工大生日快乐!',
              path: '/pages/light/light',
              imageUrl: '/images/100.png',    
              success: function () { },
              fail: function () { }
            }
          }
         //console.log(e.detail)
      },
    
      lightHIT:function (){
        var cityAll = ['广东省','湖南省','黑龙江省','山东省','吉林省','辽宁省','内蒙古自治区','天津市','陕西省','山西省','宁夏回族自治区','新疆维吾尔自治区','西藏自治区','青海省','河北省','河南省','安徽省','浙江省','江苏省','上海市','重庆市','江西省','贵州省','海南省','台湾省','云南省','香港特别行政区','澳门特别行政区']
        var cityEasy = ['广东','湖南','黑龙江','山东','吉林','辽宁','内蒙古','天津','陕西','山西','宁夏','新疆','西藏','青海','河北','河南','安徽','浙江','江苏','上海','重庆','江西','贵州','海南','台湾','云南','香港','澳门']
    
        var num = cityAll.indexOf(this.data.region[0])
        console.log(cityEasy[num])
        db.collection("city")
        .where({
          name:_.eq(cityEasy[num])
        })
        .update({
            data:{
            value:_.inc(1)
          }
        })
        .then(res=> {
              // res.data 包含该记录的数据
              this.getData();
              console.log(res)
            })
    
          this.setData({
            dialogShow: true,
            //lightshow:false
        })
        
      },
    
      bindPickerChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          index: e.detail.value
        })
      },
     
      MultiColumnChange(e) {
        let data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
          case 0:
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;
            break;
          case 1:
            switch (data.multiIndex[0]) {
              case 0:
                break;
              case 1:
                break;
            }
            data.multiIndex[2] = 0;
            break;
        }
        this.setData(data);
      },
     
      bindRegionChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          region: e.detail.value
        })
      },
       /**
     1. 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.echartsComponnet = this.selectComponent('#mychart-dom-map');
        this.getData(); //获取数据
      },
    
      onReady() {
      },
      
      getData:function()
      {
        wx.cloud.callFunction({
          name:"getCity"
        })
        .then(res=>{
          //console.log(res.result.data)
          const citydata=[];
          for(var i=0;i<res.result.data.length;i++){
            citydata.push(res.result.data[i])
         }
         //console.log(citydata)
         for(var i=0;i<citydata.length;i++){
            delete citydata[i]._id;
            delete citydata[i]._openid;
         }
         // console.log(citydata)
      
         // option.yAxis[0].data = note;
          option.series[0].data =  convertData(citydata);
          option.series[1].data = citydata;
          option.series[2].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}));
          option.series[3].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));
          if(!myMap){
            this.init_ChartMap();
          }else{
            myMap.clear();
            this.init_ChartMap();
          }
        })
      },
    
    
      init_ChartMap: function() {
        this.echartsComponnet.init((canvas, width, height)=>{
        myMap = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });   
          myMap.showLoading(); // 首次显示加载动画
          canvas.setChart(myMap);
          echarts.registerMap('china', geoJson);  // 绘制中国地图
    
          myMap.setOption(option);
          myMap.hideLoading(); // 隐藏加载动画
          return myMap;
        });
      }
      
    });
    
    1. json文件
    {
      "usingComponents": {
       "ec-canvas": "../../ec-canvas/ec-canvas",
       "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
     }
    }
    
    1. wxml文件
    <!--index.wxml-->
    
    <view class="container">
    <text class="word1">哈尔滨工业大学百年校庆</text>
     <ec-canvas id="mychart-dom-map" canvas-id="mychart" ec="{{ ecMap }}"></ec-canvas>
      <text class="word2"> 我为哈工大百年校庆应援!</text>
     	<view class="cu-form-group">
         <view class="title">地址选择</view>
         <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
           <view class="picker">
             {{region[0]}}{{region[1]}}{{region[2]}}
           </view>
         </picker>
     	</view> 
    
      <view style="width:500rpx;display: flex;flex-direction: row; justify-content:space-between; padding:10rpx;">
         <button type="primary" bindtap="lightHIT" >应援按钮</button>
         <button type="primary" plain="true" open-type="share">分享给朋友</button>
       </view>
    
       <mp-dialog title="为哈工大百年校庆应援成功!" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
           <image style="width: 160px; height: 125px;"  src="https://6869-hit100-g6bma-1302265912.tcb.qcloud.la/2020.png?sign=b90eef1d7eabe42c1e5a362110b6a77c&t=1590806475"></image>
       </mp-dialog>
        
    </view>
    
    
    1. wxss文件
    /**index.wxss**/
    ec-canvas {
     width: 100%;
     height: 100%;
     padding:300rpx,0rpx,10rpx,10rpx;
    }
    
    #mychart-dom-map{
     width:100%;
     height:800rpx;
     padding:100rpx,0rpx,20rpx,20rpx;
    }
    
    .button-sp-area{
     margin: 0 auto;
     width: 50%;
     padding-top:10rpx;
    }
    
    .word2{
     font-size:18px;      /*设置文字字号*/
     color:red;           /*设置文字颜色*/
     font-weight:bold;    /*设置字体加粗*/
     font-family:"微软雅黑";  
    }
    
    .word1{
     font-size:19px;      /*设置文字字号*/
     color:black;           /*设置文字颜色*/
     font-weight:bold;    /*设置字体加粗*/
     font-family:"微软雅黑";  
    }
    
    .container {
     position: absolute;
     top: 10rpx;
     bottom: 0;
     left: 0;
     right: 0;
    
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
    
     box-sizing: border-box;
    } 
    
    

    效果图

    • 总体布局
      在这里插入图片描述

    • 进入工大应援
      在这里插入图片描述

    • 选择地区后点亮

    在这里插入图片描述

    展开全文
  • 非常棒的可以自定义数据的svg中国地图插件,可以分省的显示数据信息,可以分不同颜色区分 数据的差异性,强大的自定义数据功能,绝对不错的查看全国数据的插件,也基于jQuery实现。
  • 1、效果图 2、完整配置代码 可以把代码直接贴到官网测试效果: ...// 中国地图线路特效配置 start let geoCoordMap = { // 地图地点的经度纬度 '上海': [121.4648, 31.2891], '东莞': [113.89...
  • 中国shapefile地图

    2018-10-24 21:09:13
    中国地区1:400万地图,包含省份及县市,海岸线,湖泊,水体等各种资源类型
  • 微信小程序+Echarts实现中国地图

    千次阅读 热门讨论 2020-02-16 14:07:07
    一、版本说明 二、下载文件 Echart 官方 Demo 地址,参考这里; Demo 源码参考这里 需要下载地图 json 文件,参考这里 三、
  • echarts实现中国地图(Vue)

    万次阅读 多人点赞 2020-05-29 10:01:12
    1,安装echarts npm install echarts --save ...import 'echarts/map/js/china.js' //引入中国地图数据 (*********重中之重) 3,配制option { visualMap: { //地图图例 show:true, left: 26, bottom
  • 该json文件为geojson.io网站制作的世界国家轮廓地图数据,相比于其他世界地图数据, 该中国居于世界地图中间位置,可用于echarts等绘图工具的底图
  • 中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的
  • page_title="2019_nCoV-中国疫情地图")) #全局配置项 china_map.set_global_opts(title_opts=opts.TitleOpts(title="2019_nCoV-中国疫情地图")) #series_name #maptype是地图的类型china就是中国地图,world就是世界...
  • python绘制一份完美的中国地图

    千次阅读 2020-04-25 17:34:10
    本文章小编将带你学会使用python绘制一份完美的中国地图~ 昨日,突地被一大早的微博热搜 #自然资源部核查处理问题中国地图# 刷屏,恍惚中看到了近日在追的《亲爱的,热爱的》。小编还沉浸在酣甜的剧情里,今的又有新...
  • 用Echarts实现中国地图

    千次阅读 多人点赞 2020-07-24 22:19:00
    闲来无事看了看echarts,感觉挺有趣的就做了个中国地图玩玩,代码已经加了详细注释。 先附上最后的动态效果图: ps:数据为本人纯双手乱打 需要用到echarts.js和china.js,echarts.js可以去官网下载,也可以直接引入...
  • ArcGIS精美中国地图制作(详解)

    万次阅读 多人点赞 2020-04-12 14:08:20
    今天看了smileliaohua老师的博客,学到很多,于是进行实验复现一下博客中的中国地图底图。下文中步骤为smileliaohua老师的步骤,但截图是我进行复现时重新取的图片,并且完善了老师博客中有些地方步骤不太详尽的地方...
  • 最终效果: 1.引入: npm i echarts --save main.js中: import echarts from ‘echarts’ Vue.prototype.$echarts = echarts ...使用地图的文件中(map.vue): import ‘echarts/map/js/china.js’ ...
  • Tableau中国地图

    千次阅读 2020-08-06 18:16:14
    Tableau自带标准中国地图 效果如下: 使用了 Tableau Public 2020.1版本。
  • 中国地图省份坐标

    千次阅读 2019-11-06 22:57:24
    以下数据为SQL语句,可直接运行到数据库 百度云链接:https://pan.baidu.com/s/1iU-8YTk54ftPzqAguzWHwA 提取码:gr6r 内容展示如下: 详情请点击下载
  • vue引入echarts中国地图

    万次阅读 多人点赞 2019-07-11 17:15:20
    需求:显示各省名字,滑过标记地显示接入数量,点击标记地显示系统数量已接入及能跳转对应页面信息的入口; 配置: 1.安装依赖 npm install echarts -S 2.全局引入main.js ...3.在需要地图的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,596
精华内容 27,038
关键字:

中国地图

友情链接: TurboDecode_Matlab.rar