数据可视化大屏 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理丽江市永胜县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts丽江市永胜县geoJson地图阴影
echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.
echarts丽江市永胜县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts丽江市永胜县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
threejs丽江市永胜县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话，可以观看threejs视频 3D可视化Three.js视频教程
threejs丽江市永胜县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
丽江市永胜县 下辖有 三川镇,仁和镇,期纳镇,永北镇,涛源镇,片角乡,羊坪彝族乡,东风傈僳族乡,松坪傈僳族乡,东山傈僳族彝族乡,光华傈僳族彝族乡,六德傈僳族彝族乡,大安彝族纳西族乡,程海镇,顺州乡
丽江市永胜县下辖区域坐标
{"三川镇":[100.65818545268266,26.73191372431495],"仁和镇":[101.05857740607922,26.43107983222132],"期纳镇":[100.64795489646032,26.32436962040607],"永北镇":[100.77992985118983,26.65522311409622],"涛源镇":[100.53530945298908,26.30987617670526],"片角乡":[100.61253303187571,26.09804784995905],"羊坪彝族乡":[100.84949032362647,26.74821115025208],"东风傈僳族乡":[100.8109890746444,26.26560413793088],"松坪傈僳族乡":[100.5092536204458,26.92915161952352],"东山傈僳族彝族乡":[100.87342625308747,26.3614856846089],"光华傈僳族彝族乡":[100.63456154576585,26.8971866907176],"六德傈僳族彝族乡":[100.90129917955286,26.55418196766549],"大安彝族纳西族乡":[100.50620010342814,26.73640934057452],"程海镇":[100.68347505864696,26.54128591587166],"顺州乡":[100.51230697050622,26.57004325632484]}
丽江市永胜县行政划分代码
[{"name":"三川镇","code":"530722104000"},{"name":"仁和镇","code":"530722102000"},{"name":"期纳镇","code":"530722103000"},{"name":"永北镇","code":"530722101000"},{"name":"涛源镇","code":"530722106000"},{"name":"片角乡","code":""},{"name":"羊坪彝族乡","code":"530722201000"},{"name":"东风傈僳族乡","code":""},{"name":"松坪傈僳族乡","code":""},{"name":"东山傈僳族彝族乡","code":"530722203000"},{"name":"光华傈僳族彝族乡","code":"530722207000"},{"name":"六德傈僳族彝族乡","code":"530722202000"},{"name":"大安彝族纳西族乡","code":"530722209000"},{"name":"程海镇","code":"530722105000"},{"name":"顺州乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
