目录
在methods中设置初始化地图方法并在mounted中调用
但是也出现了一个问题，和我们预想的不太一样，下钻到省地图后，china地图的边框数据保留了，即：地图边框并没有更新，如图：编辑
npm install echarts --save //echarts安装命令
npm install echarts-gl //echarts-gl安装命令import * as echarts from 'echarts';
import 'echarts-gl'<div id="mapBox" class="mapBox">
</div>注意：地图容器必须设置宽高
setMap3D(chinaJson) {
// 引入地图边界json数据
this.chinaJson =chinaJson?chinaJson:require('@/assets/json/china.json')
// 获取地图容器
var chartDom = document.getElementById('mapBox');
var myChart = echarts.init(chartDom);
// 注册地图
echarts.registerMap("china", this.chinaJson)
let dataObj = ''
var option;
option = {
// title: {
// text: '全国行政区划3D地图',
// x: 'center',
// top: "20",
// textStyle: {
// color: '#000',
// fontSize: 24
// }
// },
tooltip: {
show: true,
},
geo3D: {
map: 'china',
roam: true,
regionHeight: 4, //地图厚度
itemStyle: {
color: '#326a9a',
opacity: 0.8,
borderWidth: 0.8,
borderColor: '#c3d7de'
},
label: {
show: false,
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
disabled: true, //是否可以被选中
label: {
formatter: function(params) { // 鼠标经过的回调函数
// console.log('hover', params)
dataObj = params;
return params.name
},
},
},
//shading: 'lambert',
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
// shadowQuality: 'high', //阴影亮度
shadow: false, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
viewControl: {
distance: 85, // 地图视角 控制初始大小
// rotateSensitivity: 0, // 旋转
// zoomSensitivity: 0, // 缩放
// autoRotate: false,
// maxBeta: Infinity,
// minBeta: -Infinity,
// beta: -15, //旋转视角
alpha: 65, //视角
panMouseButton: 'left',
rotateMouseButton: 'right',
center: [-1, 0, 5],
},
regions: [{
name: '南海诸岛',
itemStyle: {
Color: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
},
series: []
};
option && myChart.setOption(option);
}mounted() {
this.setMap3D()
},
经过以上两个步骤初步实现了地图的渲染，现在开始添加下钻功能
myChart.on('dblclick', (clickparams)=> {
console.log(clickparams);
});此时双击地图板块发现并没有触发方法
这里我的解决方案是添加.getZr()，如下：
myChart.getZr().on('dblclick', (clickparams)=> {
console.log(clickparams);
});再次双击地图，发现事件确实是触发了，但是并没有返回我们想要的数据（双击的地图板块名称）
这里我的解决方案是，在鼠标悬浮在地图板块的时候在label中拿到对应的数据赋值给一个变量，然后再双击地图的时候使用这个变量，如下：
双击地图：
这里已经拿到了双击地图板块的名称，现在只需要去匹配对应的地图json数据，重新渲染地图即可实现下钻功能，具体代码如下：
myChart.getZr().on('dblclick', (clickparams)=> {
console.log(dataObj);
if (dataObj.name == '河南') {
this.chinaJson = require('@/assets/json/henan.json')
echarts.registerMap("china", this.chinaJson)
}else{
this.chinaJson = require('@/assets/json/china.json')
echarts.registerMap("china", this.chinaJson)
}
option && myChart.setOption(option);
});小编这里以河南地图为例，添加以上代码后，双击河南地图板块后，发现已经实现了我们想要的下钻功能。
在这里小编的解决方案是在下钻的时候，添加重置 option 事件。如下：
myChart.dispatchAction({ //来用程序主动渲染选框
type: "restore",//restore 重置 option 事件。
});
option && myChart.setOption(option);双击执行函数完整代码
myChart.getZr().on('dblclick', (clickparams)=> {
console.log(dataObj);
if (dataObj.name == '河南') {
this.chinaJson = require('@/assets/json/henan.json')
echarts.registerMap("china", this.chinaJson)
}else{
this.chinaJson = require('@/assets/json/china.json')
echarts.registerMap("china", this.chinaJson)
}
// 解决方法一
myChart.dispatchAction({ //来用程序主动渲染选框
type: "restore",//restore 重置 option 事件。
});
option && myChart.setOption(option);
});此时我们双击地图板块，发现边框已经更新，达到了我们想要的效果（边框问题完美解决），如图：
虽然达到了我们预期的效果，但是经过多次测试，发现在个别版本的echarts-gl中还是会有边框不更新问题，如方案一不能解决，
在这里小编这里整理了第二套解决方案原理上适配所有的echarts版本：如下：
原理：下钻的时候销毁当前地图，重新执行初始化渲染地图
// 解决方法二
myChart.dispose(); //地图销毁函数
this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据完整的双击事件代码
myChart.getZr().on('dblclick', (clickparams)=> {
console.log(dataObj);
if (dataObj.name == '河南') {
this.chinaJson = require('@/assets/json/henan.json')
echarts.registerMap("china", this.chinaJson)
}else{
this.chinaJson = require('@/assets/json/china.json')
echarts.registerMap("china", this.chinaJson)
}
// 解决方法一
// myChart.dispatchAction({ //来用程序主动渲染选框
// type: "restore",//restore 重置 option 事件。
// });
// option && myChart.setOption(option);
// 解决方法二
myChart.dispose(); //地图销毁函数
this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据
});以上两种解决方法，任选其一即可，如不能解决换另一种方法
添加地图标记点功能，代码如下：
series: [{
type: 'scatter3D',
coordinateSystem: 'geo3D',
itemStyle: {
color: '#fff',
opacity: 1,
},
zlevel: 1,
// symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
symbol: 'circle',
symbolSize: [40, 50],
data: [{
name: '标记点',
value: [120.256616, 30.239604, 100],
info: require('../assets/icon/dianwei.png'),
}],
}]效果如下：
自定义标记点样式为icon图标：
series: [{
type: 'scatter3D',
coordinateSystem: 'geo3D',
itemStyle: {
color: '#fff',
opacity: 1,
},
zlevel: 1,
symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
// symbol: 'circle',
symbolSize: [40, 50],
data: [{
name: '标记点',
value: [120.256616, 30.239604, 100],
info: require('../assets/icon/dianwei.png'),
}],
}]使用图片为标记点样式，但是图片只能是svg PathData 格式的，并且好像不能设置彩色的图片，官方文档如下：
ECharts 提供的标记类型包括
'circle','rect','roundRect','triangle','diamond','pin','arrow','none'可以通过
'path://'将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是symbol的话就是symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
效果如下：
标记点小编技术有限，也没有太好的办法解决，去完善，到此为止，就是小编做的最终效果
html:
setMap3D(chinaJson) {
this.chinaJson =chinaJson?chinaJson:require('@/assets/json/china.json')
var chartDom = document.getElementById('mapBox');
var myChart = echarts.init(chartDom);
echarts.registerMap("china", this.chinaJson)
let dataObj = ''
var option;
option = {
// title: {
// text: '全国行政区划3D地图',
// x: 'center',
// top: "20",
// textStyle: {
// color: '#000',
// fontSize: 24
// }
// },
tooltip: {
show: true,
// formatter:(params)=>{
// let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
// return data;
// },
},
geo3D: {
map: 'china',
roam: true,
regionHeight: 4, //地图厚度
itemStyle: {
color: '#326a9a',
opacity: 0.8,
borderWidth: 0.8,
borderColor: '#c3d7de'
},
label: {
show: false,
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
disabled: true, //是否可以被选中
label: {
formatter: function(params) { // 鼠标经过的回调函数
// console.log('hover', params)
dataObj = params;
return params.name
},
},
},
//shading: 'lambert',
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
// shadowQuality: 'high', //阴影亮度
shadow: false, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
viewControl: {
distance: 85, // 地图视角 控制初始大小
// rotateSensitivity: 0, // 旋转
// zoomSensitivity: 0, // 缩放
// autoRotate: false,
// maxBeta: Infinity,
// minBeta: -Infinity,
// beta: -15, //旋转视角
alpha: 65, //视角
panMouseButton: 'left',
rotateMouseButton: 'right',
center: [-1, 0, 5],
},
regions: [{
name: '南海诸岛',
itemStyle: {
Color: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
},
series: [{
type: 'scatter3D',
coordinateSystem: 'geo3D',
itemStyle: {
color: '#fff',
opacity: 1,
},
zlevel: 1,
symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
// symbol: 'circle',
symbolSize: [40, 50],
data: [{
name: '标记点',
value: [120.256616, 30.239604, 100],
info: require('../assets/icon/dianwei.png'),
}],
}]
};
// console.log(myChart)
myChart.getZr().on('dblclick', (clickparams)=> {
console.log(dataObj);
if (dataObj.name == '河南') {
this.chinaJson = require('@/assets/json/henan.json')
echarts.registerMap("china", this.chinaJson)
}else{
this.chinaJson = require('@/assets/json/china.json')
echarts.registerMap("china", this.chinaJson)
}
// 解决方法一
// myChart.dispatchAction({ //来用程序主动渲染选框
// type: "restore",//restore 重置 option 事件。
// });
// option && myChart.setOption(option);
// 解决方法二
myChart.dispose(); //地图销毁函数
this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据
});
option && myChart.setOption(option);
}码字不易，如有帮到您，麻烦三连支持下！！！！！
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search
由于fast-stemmer的问题，我很难安装我想要的任何rubygem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=
当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www
我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声