(window.webpackJsonp=window.webpackJsonp||[]).push([[616],{2866:function(t,s,a){"use strict";a.r(s);var n=a(18),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"map-地图扩展"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#map-地图扩展"}},[t._v("#")]),t._v(" map - 地图扩展")]),t._v(" "),s("p",[t._v("为产品的地图可视化组件提供一个新的可用的地图，SuccBI的地图可视化组件自带了中国地图、世界地图和中国各省直辖市的地图，如果实际项目需要新的地图（如某某经济开发区的地图、某地级市的地图），那么可以通过实现新的地图扩展来提供新的可用地图。")]),t._v(" "),s("p",[t._v("在制作仪表板可以拖入地图控件，选择地图扩展作为"),s("code",[t._v("底图")]),t._v("。")]),t._v(" "),s("p",[t._v("地图扩展是描述地图上一个区块的信息，如:")]),t._v(" "),s("ol",[s("li",[t._v("中国的行政区划。")]),t._v(" "),s("li",[t._v("北京一环、二环、三环的划分。")]),t._v(" "),s("li",[t._v("铁路路线图。")]),t._v(" "),s("li",[t._v("机场分布图。")]),t._v(" "),s("li",[t._v("武汉东湖高新区内部划分:光谷未来城、光谷生物城、光谷中心城等等。")])]),t._v(" "),s("p",[t._v("地图扩展由"),s("code",[t._v("package.json")]),t._v("和"),s("code",[t._v("地图文件")]),t._v("组成。地图文件支持下面的3种格式:")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("geojson")]),t._v(" 文件后缀为geojson。")]),t._v(" "),s("li",[s("code",[t._v("topojson")]),t._v(" 文件后缀为topojson。")]),t._v(" "),s("li",[s("code",[t._v("svg")]),t._v(" 文件后缀为svg。")])]),t._v(" "),s("p",[t._v("地图文件是有层级的，如行政区划中的省市县，这些层级在"),s("code",[t._v("package.json")]),t._v("中说明，不同层级的地图文件都放在根目录下。")]),t._v(" "),s("h2",{attrs:{id:"扩展文件结构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#扩展文件结构"}},[t._v("#")]),t._v(" 扩展文件结构")]),t._v(" "),s("ol",[s("li",[s("RouterLink",{attrs:{to:"/dev/extension-points/map/#package-json"}},[t._v("package.json")]),t._v("定义扩展的配置信息")],1),t._v(" "),s("li",[s("code",[t._v("xxx.geojson")]),t._v(" geojson格式的地图文件。")]),t._v(" "),s("li",[s("code",[t._v("xxx.topojson")]),t._v(" topojson格式的地图文件。")]),t._v(" "),s("li",[s("code",[t._v("xxx.svg")]),t._v(" svg格式的地图文件。")])]),t._v(" "),s("h3",{attrs:{id:"package-json"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#package-json"}},[t._v("#")]),t._v(" package.json")]),t._v(" "),s("p",[t._v("示例如下：")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"template-map-blank"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"displayName"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"空白地图模板"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"description"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"一个空白的地图模板"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"thumbnail"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"thumbnail.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"compatibilities"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"platform"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^4.0.0"')]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"author"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"YourName"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"email"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name@xxx.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"homePage"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://www.succez.com/"')]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"categories"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"datav"')]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"contributes"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"map"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"type"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"geojson"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"bbox"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"hierarchies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"id"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"map"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"caption"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"地图"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"items"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n\t\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"id"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"area"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"caption"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"区域"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"items"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\t\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])])])]),s("h4",{attrs:{id:"详细说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#详细说明"}},[t._v("#")]),t._v(" 详细说明")]),t._v(" "),s("p",[t._v("在"),s("code",[t._v("map")]),t._v("属性中描述扩展组件的配置信息，包括下列属性：")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("type")]),t._v(" 描述地图的类型，是一个json字符串，可以设置这些类型：\n"),s("ol",[s("li",[s("code",[t._v("geojson")]),t._v(" geojson格式")]),t._v(" "),s("li",[s("code",[t._v("topojson")]),t._v(" topojson格式")]),t._v(" "),s("li",[s("code",[t._v("svg")]),t._v(" svg格式")])])]),t._v(" "),s("li",[s("code",[t._v("bbox")]),t._v(" 只有"),s("code",[t._v("type")]),t._v("为"),s("code",[t._v("svg")]),t._v("格式有此属性，是一个有4个值的一维数组，如[73.33,3.51,135.05,53.33]，其中前两位表示svg左下角对应的地图经度和维度，后两位表示右上角对应的地图经度和纬度。")]),t._v(" "),s("li",[s("code",[t._v("hierarchies")]),t._v(" 描述地图的层级，有以下属性:\n"),s("ol",[s("li",[s("code",[t._v("id")]),t._v(" 层级的标识，所有层级中唯一。")]),t._v(" "),s("li",[s("code",[t._v("caption")]),t._v(" 描述信息。")]),t._v(" "),s("li",[s("code",[t._v("bounding")]),t._v(" 描述区域的边界。可选属性。比如中国的省，但是不显示省内的市，此时会用到省的边界文件，比如"),s("code",[t._v("山东省")]),t._v("的"),s("code",[t._v('"bounding": "370000bound"')]),t._v("，表示"),s("code",[t._v("山东省")]),t._v("的边界文件为"),s("code",[t._v("370000bound.geojson")]),t._v("。")]),t._v(" "),s("li",[s("code",[t._v("center")]),t._v(" 只有"),s("code",[t._v("type")]),t._v("为"),s("code",[t._v("svg")]),t._v("格式有此属性，描述中心点的经纬度。如湖北省会以武汉市的经纬度[114.30,30.58]作为中心点。"),s("code",[t._v("geojson")]),t._v("和"),s("code",[t._v("topjson")]),t._v("都是在地图文件中定义此属性的，所以不需要单独定义。")]),t._v(" "),s("li",[s("code",[t._v("items")]),t._v(" 所有下级节点。如中国的行政区划有3级，分别为省、市、县区，省的下级就是市，市的下级就是县区。所有层级的格式相同，都通过"),s("code",[t._v("id")]),t._v("、"),s("code",[t._v("caption")]),t._v("、"),s("code",[t._v("items")]),t._v("等定义。")])])])])])}),[],!1,null,null,null);s.default=e.exports}}]);