3D渲染和加上纹理图片的操作

我正参与「程序编写·启航计划」

下面我们就以广西南宁市的做案例，去进行这一3D渲染和加上纹理图片的操作。

首先我们要先看一下文本文档，echarts 的geo的areaColor是能够适用利用图片来对地形图的地区具体内容去进行纹路添充的，还可以进行色调修改。

文档具体地址：echarts.apache.org/zh/option.h…

但这个纹理图片的添充是推动为 HTMLImageElement, HTMLCanvasElement，不兼容途径字符串数组，所以我们要新构建一个图片信息。

展示图片我们可以用下边二者方式来开展，自然方法有很多，也可以用别的的办法，这里不一一列举了

//方法一
 let img = document.createElement('img')
 img.src = require('../../../assets/image/2.jpg')
//方法二
<img ref="mapSvg" id="mapSvg" v-show="false" hidden style="width:500px;height:500px;" src="../../../assets/image/2.jpg">
this.$refs.mapSvgAreaMap

获得针对区域内的json文档，这一能去下边网址获得，也可以去gitHub上边立即获得，诸位你情我愿

//阿里巴巴的获得地形图json文件信息
http://datav.aliyun.com/portal/school/atlas/area_selector
//gitHub上边能直接获得详细每一个省区和市区的
https://github.com/ljy-110/china-geojson-map

下面来看看具体代码展示具体内容

（1）数据类型展现

dataMapList : [
  //座标就是为了呈现label定位
  {name:"兴业银行区",value:[108.320189,22.819511],datas:12},
  ...
]

（2）累加层及发光效果能够参考代码

initAreaMap(){
   var myChart = echarts.init(this.$refs.areaMap);
  //GuangXi  引进的地形图json文档
        echarts.registerMap("mapStype", GuangXi);
   let option = {}
   //label的照片引进
   let mapLabel = require('../../../assets/image/home/mapLabel.png');
   let data = this.dataMapList
   option={
    tooltip: {
     trigger: "item",
     formatter: function(params) {
      return params.name;
      }
     },
    geo: [
      {
      map: "mapStype",
      geoIndex: 1,
      zoom: 1,
      layoutCenter: ["50%", "44%"],
      layoutSize: "80%",
      zlevel: 4,
      show: true,
      label: {
       normal: {
        show: false,       textStyle: {
         color: "#fff",
         fontSize: "16"
         }
        },
       emphasis: {
        show: true,
        label: {
         formatter: function(params) { // 鼠标经过的调用函数 
          return params.name
          },
         },
        textStyle: {
         color: "#fff"
         }
        }
       },
      roam: false, // 是否允许放大
      itemStyle: {
       normal: {
        areaColor:'rgb(0,0,0,0)',
        borderWidth: 1,
        borderColor: 'rgb(222, 238, 255,0.5)',
        shadowColor: '#1773c3',
        shadowBlur: 20,
        },
       emphasis: {
        borderColor: 'rgb(222, 238, 255,0.5)',
        areaColor:'rgb(26, 92, 158,0.6)',
        }
       }
      },
      {
      map: "mapStype",
      geoIndex: 3,
      zoom: 1,
      layoutCenter: ["50%", "44%"],
      layoutSize: "80%",
      zlevel: 2,
      // aspectScale: 1,
      silent: true,
      label: {
       emphasis: {
        show: false
        }
       },
      roam: false, // 是否允许放大
      itemStyle: {
       areaColor: {
        image: this.$refs.mapSvgAreaMap, // 适用为 HTMLImageElement, HTMLCanvasElement，不兼容途径字符串数组
        repeat: 'repeat' // 是不是铺满, 能是 'repeat-x', 'repeat-y', 'no-repeat'
        },
       }
      },
      {
      map: "mapStype",
      animation:true,
      animationDurationUpdate:0,
      geoIndex: 4,
      zoom: 1,
      layoutCenter: ["50%", "45.5%"],
      layoutSize: "80%",
      zlevel: 1,
      // aspectScale: 1,
      silent: true,
      label: {
       emphasis: {
        show: false
        }
       },
      roam: false, // 是否允许放大
      itemStyle: {
       borderWidth: 1,
       areaColor:'#030a17',
       shadowColor: '#1773c3',
       shadowBlur: 60,
       }
      }
     ],
    series: [
      {
      type: 'map',
      geoIndex: 1,
      zoom: 1.2,
      showLegendSymbol: false, // 存有legend时表明
      label: {
       normal: {
        show: false,
        color: 'rgba(255,255,255,0.9)'
        },
       emphasis: {
        show: false,
        textStyle: {
         color: '#fff'
         }
        }
       },
      roam: false,
      data: data
      },
      {
      type: "scatter",
      coordinateSystem: "geo",
      label: {
       normal: {
        show: true,
        color: "#fff",
        fontWeight:500,
        fontSize:18,
        verticalAlign:'top',
        lineHeight:-26,
        formatter: function(params) {
         return params.data.name   '     '  params.data.datas;
         },
        },
       emphasis: {
        show: false
        },
       },
      itemStyle: {
       opacity: 1
       },
      symbol:'image://'   mapLabel,
      symbolSize: [160, 70],
      symbolOffset: [0, 0],
      zlevel: 6,
      data: data
      },
     ]
    }
   if (option && typeof option === 'object') {
    myChart.setOption(option,true);
    }
   window.addEventListener('resize', myChart.resize);
   },

tip

1.那一个照片展示很有可能也会变得模糊不清

2.照片没法展现可以用setTimeout，延迟渲染

很有可能以及各种难题，欢迎大家大家一起来讨论处理。

最终贴一张纹理图片，大家可以一个人去提取。实景地图方式去提取。