可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理苏州市姑苏区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts苏州市姑苏区geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
echarts苏州市姑苏区geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
echarts苏州市姑苏区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
threejs苏州市姑苏区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs视频教程 3D可视化Three.js视频教程
threejs苏州市姑苏区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs苏州市姑苏区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
苏州市姑苏区 下辖有 虎丘街道,观前街道,金阊街道,吴门桥街道,桃花坞街道,白洋湾街道,苏州工业园区直属镇,友新街道,双塔街道,娄葑街道,平江街道,沧浪街道,留园街道,唯亭街道,城北街道,娄门街道,斜塘街道,胥江街道,石路街道,胜浦街道,苏锦街道,葑门街道
苏州市姑苏区下辖区域坐标
{"虎丘街道":[120.58271597853835,31.33201197637528],"观前街道":[120.61886594346754,31.31977580187949],"金阊街道":[120.57501535293443,31.30506443065305],"吴门桥街道":[120.61476557066118,31.28322091063516],"桃花坞街道":[120.60720243328139,31.31823542263622],"白洋湾街道":[120.5505198866008,31.35243564648205],"苏州工业园区直属镇":[120.74929899911501,31.30633139229094],"友新街道":[120.59076019851864,31.27409052402595],"双塔街道":[120.62945579670105,31.30350280843727],"娄葑街道":[120.6670982405048,31.32759359070889],"平江街道":[120.62963757385764,31.32136296140216],"沧浪街道":[120.62450911915974,31.2985883892647],"留园街道":[120.57794860675901,31.3205416724194],"唯亭街道":[120.75759419925106,31.38689894015612],"城北街道":[120.59556400768459,31.34704025270456],"娄门街道":[120.63188220776289,31.33102409408641],"斜塘街道":[120.76003272135593,31.27083807794015],"胥江街道":[120.59912703260417,31.29763653644424],"石路街道":[120.596171743285,31.30861175860419],"胜浦街道":[120.83300159073295,31.31220639753689],"苏锦街道":[120.60734813533583,31.3367603861809],"葑门街道":[120.64188086808001,31.29322745584706]}
苏州市姑苏区行政划分代码
[{"name":"虎丘街道","code":"320508022000"},{"name":"观前街道","code":""},{"name":"金阊街道","code":"320508019000"},{"name":"吴门桥街道","code":"320508024000"},{"name":"桃花坞街道","code":""},{"name":"白洋湾街道","code":"320508017000"},{"name":"苏州工业园区直属镇","code":""},{"name":"友新街道","code":""},{"name":"双塔街道","code":"320508021000"},{"name":"娄葑街道","code":""},{"name":"平江街道","code":"320508018000"},{"name":"沧浪街道","code":"320508020000"},{"name":"留园街道","code":""},{"name":"唯亭街道","code":""},{"name":"城北街道","code":""},{"name":"娄门街道","code":""},{"name":"斜塘街道","code":""},{"name":"胥江街道","code":""},{"name":"石路街道","code":""},{"name":"胜浦街道","code":""},{"name":"苏锦街道","code":"320508023000"},{"name":"葑门街道","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
