酷屏的自定义组件支持引用第三方组件,本文介绍使用百度地图,制作一个gis标点地图。
Step1:
需要访问百度地图API接口网站,申请成为百度地图开发者,获取一个秘钥ak,然后在组件中以下图的方式将ak引入。
Step2:
初始化gis地图并添加标点和绑定事件
Step3:
标点以及地图参数
具体代码如下:
复制代码
- var myChart = null;
- var myData = null;
- var myProperty = null;
- var myEvents = null;
- /*
- * 初始化方法
- *
- * @params cwidget 组件对象
- * @params vardata 取数定义中定义的变量,json格式:{'var1':'xxx'}
- * @params storagedata 组件自己需要存储的值,字符串格式
- * @params events 事件,用户在右边属性上设置的事件, json格式:{'evt1': function(){...}, 'evt2':function(){....}}
- * @params resources 资源及权限校验,json格式:{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
- */
- function init(cwidget, vardata, events, storagedata, resources) {
- var basedom = cwidget.basedom, doc = cwidget.wnd.document;
- myEvents = events;
- initMyData(vardata);
- getValue(cwidget);
- if (!window["GISMap"]) {
- EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/gismap.js");
- }
- var src = "http://api.map.baidu.com/getscript?v=2.0&ak=XS9zbYnYu6dylRK6hGutsZh6";
- if (EUI.findScript(doc, src) == -1) {
- EUI.addScript(doc, src, function () {
- initMap(cwidget);
- });
- } else {
- initMap(cwidget);
- }
- }
- function addEvent() {
- myChart.addEvent4AllMarker("click", myEvents["markerClick"]);
- myChart.addEvent4map("click", myEvents["mapClick"]);
- }
- /**
- * 初始化搜索框
- */
- function initSearchDom(basedom) {
- var searchDiv = document.createElement("div");
- searchDiv.className = "gis_search";
- searchDiv.style.zIndex = 100;
- basedom.appendChild(searchDiv);
- var inputDom = document.createElement("input");
- inputDom.type = "search";
- searchDiv.appendChild(inputDom);
- var rightDiv = document.createElement("div");
- rightDiv.className = "gis_rightIcon";
- searchDiv.appendChild(rightDiv);
- }
- function initMap(cwidget) {
- var basedom = cwidget.basedom;
- myChart = new GISMap(basedom);
- var opt = getMyOption();
- myChart.setOption(opt);
- myChart.setZoom(myProperty["zoomN"]);
- initSearchDom(basedom);
- initMyEvent(basedom);
- if (cwidget.isresultview) {
- //只在结果界面的时候执行,例如只想在结果界面绑定click事件
- addEvent();
- }
- }
- function initMyEvent(basedom) {
- var inputDom$ = $(basedom).find(".gis_search input"),
- iconDom$ = $(basedom).find(".gis_search .gis_rightIcon");
- myChart.addAutoComplete(inputDom$[0]);
- iconDom$.click(function () {
- var value = inputDom$[0].value;
- myChart.searchPlace(value);
- });
- }
- /**
- * 初始化数据
- */
- function initMyData(vardata) {
- if (!vardata) return;
- myData = {};
- Object.keys(vardata).forEach(function (ele) {
- try {
- myData[ele] = JSON.parse(vardata[ele]);
- } catch (error) {
- myData[ele] = vardata[ele];
- }
- });
- }
- /**
- * 返回参数
- */
- function getMyOption() {
- var opt = {};
- opt.city = myData["city"];
- var color = myProperty["color"];
- opt.overlays = [{ name: myData["city"], color: color[0] }];
- var names = myData["name"], points = myData["point"];
- var iconUrl = myProperty["iconUrl"], size = myProperty["size"],
- hightIconUrl = myProperty["hightIconUrl"], hightSize = myProperty["hightSize"];
- opt.pointObjs = points.map(function (ele, index) {
- return {
- name: names[index],
- point: ele,
- icon: getIcon(iconUrl, size),
- hightIcon: getIcon(hightIconUrl, hightSize)
- };
- });
- return opt;
- }
- function getIcon(iconUrl, size) {
- if (!iconUrl || !size) return;
- return {
- url: iconUrl,
- size: { width: size[0], height: size[1] }
- }
- }
- /**
- * 定义了自定义属性时,必须实现该方法,方法名为setProperty
- * 当在属性面板上修改属性后,会调用该方法
- * @param key 属性名
- * @param value 属性值
- * @param cwidget 组件对象
- * @returns
- */
- function setProperty(key, value, cwidget) {
- if (key === 'zoomN') {
- value = JSON.parse(value);
- myChart.setZoom(value);
- } else if (key === 'yyy') {
- }
- }
- /**
- * 刷新操作,数据改变时,调用该方法,重新渲染数据
- * @param cwidget 组件对象
- * @param vardata 取数定义中定义的变量,json格式:{'var1':'xxx'}
- * @param storagedata 组件自己需要存储的值,字符串格式
- * @returns
- */
- function refreshDatas(cwidget, vardata, storagedata) {
- var basedom = cwidget.basedom;
- }
- /**
- * 组件大小改变时执行
- * @param cwidget 组件对象
- * @returns
- */
- function resize(cwidget) {
- }
- /**
- * 获取组件的参数值
- * @param cwidget 组件对象
- * @returns
- */
- function getValue(cwidget) {
- myProperty = {
- "color": JSON.parse(cwidget.getProperty("color")),
- "iconUrl": cwidget.getProperty("iconUrl"),
- "hightIconUrl": cwidget.getProperty("hightIconUrl"),
- "size": JSON.parse(cwidget.getProperty("size")),
- "hightSize": JSON.parse(cwidget.getProperty("hightSize")),
- "zoomN": JSON.parse(cwidget.getProperty("zoomN"))
- };
- }
- /**
- * 获取组件的参数名称
- * @param cwidget 组件对象
- * @returns
- */
- function getParamName(cwidget) {
- }
- /*
- * 销毁操作,销毁自己相关的东西
- */
- function dispose(cwidget) {
- if (myChart)
- myChart.dispose();
- myChart = null;
- myData = null;
- myProperty = null;
- myEvents = null;
- }
请先登录