随着开发 大屏数据可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理漳州市龙海区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts漳州市龙海区geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts漳州市龙海区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts漳州市龙海区geoJson地图 tooltip轮播
echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.
threejs漳州市龙海区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs视频 Three.js前端3D可视化教程
threejs漳州市龙海区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs漳州市龙海区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
漳州市龙海区 下辖有 程溪镇,东园开发区,九龙岭林场,石码镇,东园镇,东泗乡,九湖镇,榜山镇,浮宫镇,海澄镇,港尾镇,白水镇,紫泥镇,良种场,苍坂农场,隆教畲族乡,龙池开发区,角美工业开发区,招商局漳州开发区,角美镇,颜厝镇,林下林场,程溪农场,双第华侨农场
漳州市龙海区下辖区域坐标
{"程溪镇":[117.58364156264739,24.37031680703193],"东园开发区":[117.89497861736484,24.37055990654608],"九龙岭林场":[117.69776048708933,24.36697614660764],"石码镇":[117.81215366196358,24.44223139900931],"东园镇":[117.87554088337396,24.36684283646619],"东泗乡":[117.76618101267306,24.35427976434495],"九湖镇":[117.63147896559813,24.44826479216852],"榜山镇":[117.76394945825456,24.46856394125935],"浮宫镇":[117.94380438354051,24.35969492003924],"海澄镇":[117.84544545220712,24.41075233376193],"港尾镇":[118.04845866558873,24.34267663541615],"白水镇":[117.86592430199065,24.319161864001],"紫泥镇":[117.89419976734166,24.44821270811867],"良种场":[117.78980816563892,24.5006520367623],"苍坂农场":[117.86855196972736,24.53008902902259],"隆教畲族乡":[118.08369793161283,24.26818865086382],"龙池开发区":[117.93644477855696,24.48375004544417],"角美工业开发区":[117.87400507480949,24.5154953608935],"招商局漳州开发区":[118.04810656241602,24.37897585908707],"角美镇":[117.87147701585997,24.52269363514218],"颜厝镇":[117.69666886650866,24.45799197479217],"林下林场":[117.54526367955282,24.46039332736328],"程溪农场":[117.58848103489802,24.43866209359373],"双第华侨农场":[117.71102642468843,24.40261824470767]}
漳州市龙海区行政划分代码
[{"name":"程溪镇","code":"350604104000"},{"name":"东园开发区","code":""},{"name":"九龙岭林场","code":"350604401000"},{"name":"石码镇","code":""},{"name":"东园镇","code":"350604110000"},{"name":"东泗乡","code":"350604200000"},{"name":"九湖镇","code":"350604106000"},{"name":"榜山镇","code":"350604108000"},{"name":"浮宫镇","code":"350604103000"},{"name":"海澄镇","code":"350604100000"},{"name":"港尾镇","code":"350604105000"},{"name":"白水镇","code":"350604102000"},{"name":"紫泥镇","code":"350604109000"},{"name":"良种场","code":"350604403000"},{"name":"苍坂农场","code":""},{"name":"隆教畲族乡","code":"350604201000"},{"name":"龙池开发区","code":""},{"name":"角美工业开发区","code":""},{"name":"招商局漳州开发区","code":"350604501000"},{"name":"角美镇","code":"350604101000"},{"name":"颜厝镇","code":"350604107000"},{"name":"林下林场","code":"350604405000"},{"name":"程溪农场","code":"350604402000"},{"name":"双第华侨农场","code":"350604400000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
