数据大屏可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理巴彦淖尔市临河区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
临河区,隶属 内蒙古自治区 巴彦淖尔市。是巴彦淖尔市府所在地。位于内蒙古自治区西部、河套平原腹部。总面积2333平方千米。2019年,常住人口55.6万人。截至2020年,临河区下辖11个街道,7个镇、2个乡,2个农场。
echarts巴彦淖尔市临河区geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
echarts巴彦淖尔市临河区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts巴彦淖尔市临河区geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
threejs巴彦淖尔市临河区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs视频教程 Three.js 3D可视化
threejs巴彦淖尔市临河区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
threejs巴彦淖尔市临河区geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能
巴彦淖尔市临河区 下辖有 铁南街道,新华街道,新华镇,汇丰街道,北环路街道,八一乡,临河农场,先锋街道,双河镇,团结街道,城关镇,曙光乡,狼山镇,金川街道,干召庙镇,狼山农场,东环路街道,白脑包镇,解放街道,车站街道,乌兰图克镇,西环路街道
巴彦淖尔市临河区下辖区域坐标
{"铁南街道":[107.43177974155486,40.74391171254442],"新华街道":[107.41799205564739,40.76479017379558],"新华镇":[107.54985722346058,41.13068975740138],"汇丰街道":[107.36207155290721,40.75072900691757],"北环路街道":[107.38818889212439,40.77731457882184],"八一乡":[107.56413213722311,40.82232144918673],"临河农场":[107.35172292887586,40.72499227227934],"先锋街道":[107.4068959678365,40.74421351499108],"双河镇":[107.40790821199457,40.71497526978973],"团结街道":[107.40202775462038,40.7543997125863],"城关镇":[107.29261256331455,40.73922268432664],"曙光乡":[107.38929083851183,40.75245084391514],"狼山镇":[107.44139281377363,40.96999191433272],"金川街道":[107.37918367808732,40.73373792489043],"干召庙镇":[107.22648900598037,40.75320386247391],"狼山农场":[107.55444369020404,41.16224258521368],"东环路街道":[107.43987475718893,40.76897143318898],"白脑包镇":[107.31218851739206,40.97247088693133],"解放街道":[107.38599860062311,40.76590946004715],"车站街道":[107.42719453975302,40.75293762478055],"乌兰图克镇":[107.58472959575963,40.93971559532667],"西环路街道":[107.38090704748102,40.75325680604249]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。