可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理泸州市纳溪区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts泸州市纳溪区geoJson地图飞线图
echarts飞线图实例,可以根据自己的需要配置飞线的颜色大小以及方向
echarts泸州市纳溪区geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts泸州市纳溪区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs泸州市纳溪区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话,可以观看threejs视频教程 Three.js前端3D可视化
threejs泸州市纳溪区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs泸州市纳溪区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
泸州市纳溪区 下辖有 永宁街道,天仙镇,丰乐镇,渠坝镇,合面镇,上马镇,打古镇,护国镇,新乐镇,白节镇,龙车镇,大渡口镇,安富街道,棉花坡镇,泸州化工园区
泸州市纳溪区下辖区域坐标
{"永宁街道":[105.38928329959253,28.78407016798902],"天仙镇":[105.42332251405776,28.67307367115406],"丰乐镇":[105.49950096151966,28.74501794029615],"渠坝镇":[105.36637014288705,28.69812863075838],"合面镇":[105.2397212480845,28.5937485780188],"上马镇":[105.2937468839628,28.50846529734893],"打古镇":[105.48245923524053,28.55003686541737],"护国镇":[105.35300681580699,28.60053017238555],"新乐镇":[105.34447922726449,28.75074982669964],"白节镇":[105.50276648464956,28.67311710208945],"龙车镇":[105.55169545780613,28.76217178604669],"大渡口镇":[105.25096153355463,28.68241771581523],"安富街道":[105.30904658733061,28.75447821312714],"棉花坡镇":[105.41576096448135,28.78334387314951],"泸州化工园区":[105.39911572027478,28.8402824340042]}
泸州市纳溪区行政划分代码
[{"name":"永宁街道","code":"510503002000"},{"name":"天仙镇","code":"510503108000"},{"name":"丰乐镇","code":"510503106000"},{"name":"渠坝镇","code":""},{"name":"合面镇","code":"510503104000"},{"name":"上马镇","code":"510503103000"},{"name":"打古镇","code":"510503102000"},{"name":"护国镇","code":"510503101000"},{"name":"新乐镇","code":"510503109000"},{"name":"白节镇","code":"510503107000"},{"name":"龙车镇","code":"510503111000"},{"name":"大渡口镇","code":"510503100000"},{"name":"安富街道","code":"510503001000"},{"name":"棉花坡镇","code":""},{"name":"泸州化工园区","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看