cesium-mvtimageryprovider修改放大缩小飞到指定位置图标

自带的地图放大缩小按钮的图标很小,如果想修改,需要找底层文件不说,改了也没什么效果,想用translate放大倍数也是改不了的,因为是文字符号+和-来显示的,所以想着用class去获取节点,然后节点内容置空后插入需要的SVG或是图片,上代码

//定位到原始位置图标svg替换
getSVGReset = () => {
    //获取到原始位置图标所在节点
    let svgReset = document.getElementsByClassName("navigation-control-icon-reset")[0];
    //节点内容置空
    svgReset.innerHTML = '';
    //创建元素节点
	var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg:svg");
    //节点class样式    
	svg.setAttribute("class", "cesium-svgPath-svg-flash");
	svg.setAttribute("width", 24);
	svg.setAttribute("height", 24);
    //放大倍数,有时候SVG实际显示大小跟UI设计不相同
	svg.setAttribute("transform", "scale(1.14)")
	// svg.setAttribute("viewBox", '0 0 34 34');
	var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
	path.setAttribute('d', "M17.315918,7.79199219 L10.0737305,0.547851563 C9.34326172,-0.182617187 8.15576172,-0.182617187 7.42529297,0.547851563 L0.183105469,7.79199219 C-0.0610351562,8.03613281 -0.0610351562,8.43261719 0.183105469,8.67675781 C0.427246094,8.92089844 0.823730469,8.92089844 1.06787109,8.67675781 L8.31005859,1.43457031 C8.55224609,1.19238281 8.94873047,1.19238281 9.19091797,1.43457031 L16.4331055,8.67675781 C16.5541992,8.79785156 16.7143555,8.86035156 16.8745117,8.86035156 C17.034668,8.86035156 17.1948242,8.79980469 17.315918,8.67675781 C17.5600586,8.43066406 17.5600586,8.03613281 17.315918,7.79199219 Z M14.3745117,7.50097656 C14.0288086,7.50097656 13.7495117,7.78027344 13.7495117,8.12597656 L13.7495117,14.3759766 C13.7495117,14.7197266 13.4682617,15.0009766 13.1245117,15.0009766 L11.2495117,15.0009766 L11.2495117,9.37597656 C11.2495117,8.34277344 10.4077148,7.50097656 9.37451172,7.50097656 L8.12451172,7.50097656 C7.09130859,7.50097656 6.24951172,8.34277344 6.24951172,9.37597656 L6.24951172,15.0009766 L4.37451172,15.0009766 C4.03076172,15.0009766 3.74951172,14.7197266 3.74951172,14.3759766 L3.74951172,8.12597656 C3.74951172,7.78027344 3.47021484,7.50097656 3.12451172,7.50097656 C2.77880859,7.50097656 2.49951172,7.78027344 2.49951172,8.12597656 L2.49951172,14.3759766 C2.49951172,15.4091797 3.34130859,16.2509766 4.37451172,16.2509766 L13.1245117,16.2509766 C14.1577148,16.2509766 14.9995117,15.4091797 14.9995117,14.3759766 L14.9995117,8.12597656 C14.9995117,7.78027344 14.7202148,7.50097656 14.3745117,7.50097656 Z M7.49951172,15.0009766 L7.49951172,9.37597656 C7.49951172,9.03222656 7.78076172,8.75097656 8.12451172,8.75097656 L9.37451172,8.75097656 C9.71826172,8.75097656 9.99951172,9.03222656 9.99951172,9.37597656 L9.99951172,15.0009766 L7.49951172,15.0009766 Z")
		svg.appendChild(path);
		svgReset.appendChild(svg);
	}
    //地图发大视图按钮
	getSVGPlus = () => {
		let svgPlus = document.getElementsByClassName("navigation-control-icon-zoom-in")[0];
		svgPlus.innerHTML = '';
		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg:svg");
        //SVG填充颜色
		svg.setAttribute("fill", "#fff");
		svg.setAttribute("width", 24);
		svg.setAttribute("height", 24);
		svg.setAttribute("transform", "translate(2 8)")
		var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
		path.setAttribute('d', "M10,2 C10.3681898,2 10.6666667,2.29847683 10.6666667,2.66666667 L10.6666667,9.33333333 L17.3333333,9.33333333 C17.7015232,9.33333333 18,9.63181017 18,10 C18,10.3681898 17.7015232,10.6666667 17.3333333,10.6666667 L10.6666667,10.6666667 L10.6666667,17.3333333 C10.6666667,17.7015232 10.3681898,18 10,18 C9.63181017,18 9.33333333,17.7015232 9.33333333,17.3333333 L9.33333333,10.6666667 L2.66666667,10.6666667 C2.29847683,10.6666667 2,10.3681898 2,10 C2,9.63181017 2.29847683,9.33333333 2.66666667,9.33333333 L9.33333333,9.33333333 L9.33333333,2.66666667 C9.33333333,2.29847683 9.63181017,2 10,2 Z")
		svg.appendChild(path);
		svgPlus.appendChild(svg);
	}
    //地图缩小视图按钮
	getSVGSubtract = () => {
		let svgSubtract = document.getElementsByClassName("navigation-control-icon-zoom-out")[0];
		svgSubtract.innerHTML = '';
		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg:svg");
		svg.setAttribute("fill", "#fff");
		svg.setAttribute("width", 24);
		svg.setAttribute("height", 24);
		svg.setAttribute("transform", "translate(2.5 7)")
		var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
		path.setAttribute('d', "M2.66666667,9.3 L17.3333333,9.3 C17.7015232,9.3 18,9.59847683 18,9.96666667 C18,10.3348565 17.7015232,10.6333333 17.3333333,10.6333333 L2.66666667,10.6333333 C2.29847683,10.6333333 2,10.3348565 2,9.96666667 C2,9.59847683 2.29847683,9.3 2.66666667,9.3 Z")
		svg.appendChild(path);
		svgSubtract.appendChild(svg);
	}

因为UI的视图审查也是很严,所以写出来希望能帮到同样头痛的小伙伴,如果有更好的办法或者建议,可以沟通交流,谢谢! 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值