MOSGL室内地图开放指南

作者: 东方三篇 | 来源:发表于2020-08-24 11:37 被阅读0次

MosGL室内地图渲染SDK，基于WebGL图形渲染，同时支持2D&3D地图；在小场景渲染中，iOS及Andoid手机实现秒开；在超大型场景渲染中，iOS手机首屏加载时间在1秒内，主流Android手机在2.5s左右；渲染帧率在55~60之间，相对竞品具有明显的优势。

快速开始

从零开始接入MosGL SDK，仅需3步，即可以浏览器中渲染室内地图

引入地图SDK

js代码引入

    loadJS(url, onload) {
        var domscript = document.createElement('script');
        domscript.src = url;
        domscript.charset = 'utf-8';
        if (onload) {
            domscript.onloadDone = false;
            domscript.onload = onload;
            domscript.onreadystatechange = function () {
                if ("loaded" === domscript.readyState && domscript.onloadDone) {
                    domscript.onloadDone = true;
                    domscript.onload();
                    domscript.removeNode(true);
                }
            };
        
        }
        document.getElementsByTagName('head')[0].appendChild(domscript);
    }
        //加载css
        var headHTML = document.getElementsByTagName('head')[0].innerHTML;
    headHTML += '<link type="text/css" rel="stylesheet" href="https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.css">';
    document.getElementsByTagName('head')[0].innerHTML = headHTML;
    
        //加载js
        this.loadJS('https://indoor.alicdn.com/MosGL/build/latest/library.gz.js',()=>{
            this.loadJS('https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.js',()=>{
            this.map = new MosGL('map',options)
        })
    })

html引入

<head>
    <link rel="stylesheet" href="https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.css">
</head>
<script src="https://indoor.alicdn.com/MosGL/build/latest/library.gz.js" crossorigin="anonymous"></script>
<script src="https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.js" crossorigin="anonymous"></script>

创建地图容器

地图容器div的id固定配置为"map"

<div>
        <Helmet title="室内地图" />
    <div id='map' style={{height:'100vh',width:'100vw'}}/>
</div>;

创建地图实例

this.map = new MosGL('map',{
    poiId:this.props.mallId,
    env:this.props.env,
    floor:this.props.floor||1,
    themeUrl:'https://indoor.alicdn.com/theme/renderThemeGL_10001.json',
        appKey:'demoKey2mfXViR5b2/5yME27m1dYjLxPO1g==',
    appName:'demo',
    showTilesMap:false,//显示高德瓦片底图开关
    enable3D:true,
    bearing:0,//方位角
    pitch:45,//俯仰角
});

示例

import React from 'react';
import Helmet from 'react-helmet';
import {renderTheme} from './renderTheme'; //渲染主题

export default module.exports = class Main extends React.Component {

    // 初始化函数
    constructor(props) {
        super(props);

    }

    componentDidMount() {
        console.time('加载时间');
        loadJS(url, onload) {
            var domscript = document.createElement('script');
            domscript.src = url;
            domscript.charset = 'utf-8';
            if (onload) {
                domscript.onloadDone = false;
                domscript.onload = onload;
                domscript.onreadystatechange = function () {
                    if ("loaded" === domscript.readyState && domscript.onloadDone) {
                        domscript.onloadDone = true;
                        domscript.onload();
                        domscript.removeNode(true);
                    }
                };

            }
            document.getElementsByTagName('head')[0].appendChild(domscript);
        }
        //加载css
        var headHTML = document.getElementsByTagName('head')[0].innerHTML;
        headHTML += '<link type="text/css" rel="stylesheet" href="https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.css">';
        document.getElementsByTagName('head')[0].innerHTML = headHTML;

        //加载js
        this.loadJS('https://indoor.alicdn.com/MosGL/build/latest/library.gz.js',()=>{
            this.loadJS('https://indoor.alicdn.com/MosGL/build/latest/MosGL.gz.js',()=>{
                this.map = new MosGL('map',{
                    poiId: 'xxxx',
                    env: 'pre',//'dev'&'pre'&'prod'
                    floor: 1,
                    renderTheme: renderTheme,
                    appKey:'xxxxxxxxxxxx',
                    appName: 'xxxxx',
                    enableLazyLoad: true,
                    showTilesMap:false,
                    antialias:true,//抗锯齿，设置为true,渲染性能严重下降,不适用于大场景渲染
                    enable3D:true,
                    // bearing:60,//方位角
                    pitch:45,//俯仰角
                    padding:{top: 25, bottom: 25, left: 25, right: 25},
                    interactionConfig:{
                        enableBoxZoom:false,// shift + 鼠标放大地图
                        enableScrollZoom:true,// 鼠标滚轮缩放地图 
                        enableDoubleClickZoom:false,//双击放大地图
                        enableTouchZoomRotate:true,//触摸屏操作地图
                        enableDragPan:true,//拖动地图
                        enableKeyboard:true,// 键盘操作地图
                    },
                    searchControlConfig:{
                        enable:true,
                        highlightColor:'#ef5a84',
                        position:{
                            top:'10px',
                            left: '60px',
                        },
                        markerUrl:"https://gw.alicdn.com/tfs/TB1yAmwr.T1gK0jSZFrXXcNCXXa-144-144.png?getAvatar=1",
                        width:40,
                        height:40,
                        types:[
                            {
                                type: '0001', 
                                name:'服饰鞋包',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1874dgbY1gK0jSZTEXXXDQVXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0002', 
                                name:'餐饮美食',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB13ClYgoY1gK0jSZFCXXcwqXXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0003', 
                                name:'美妆丽人',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1yOlXglv0gK0jSZKbXXbK2FXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0004', 
                                name:'珠宝配饰',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB14s..fW67gK0jSZFHXXa9jVXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0005', 
                                name:'生活家居',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1JnU.f.z1gK0jSZLeXXb9kVXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0006', 
                                name:'休闲娱乐',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB15Z..fW67gK0jSZFHXXa9jVXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0007', 
                                name:'数码家电',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1CplXgfb2gK0jSZK9XXaEgFXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0008', 
                                name:'母婴亲子',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1b2hdgoY1gK0jSZFCXXcwqXXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0009', 
                                name:'教育文化',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1NTtXgmf2gK0jSZFPXXXsopXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0010', 
                                name:'医疗养生',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1sSwzfV67gK0jSZPfXXahhFXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0011', 
                                name:'烟酒水饮',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1yoJdga61gK0jSZFlXXXDKFXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0012', 
                                name:'超市综合',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1vkxXgoT1gK0jSZFrXXcNCXXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0013', 
                                name:'车辆服务',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1bJc.fW67gK0jSZFHXXa9jVXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0014', 
                                name:'综合服务',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1DlQ_fVT7gK0jSZFpXXaTkpXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0015', 
                                name:'社会团体',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1bMhXgkP2gK0jSZPxXXacQpXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0016', 
                                name:'展厅展柜',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1xwE_fVY7gK0jSZKzXXaikpXa-120-120.png?getAvatar=1',
                            },
                            {
                                type: '0017', 
                                name:'体育健身',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1ssw.f1L2gK0jSZPhXXahvXXa-120-120.png?getAvatar=1',
                            },
                        ], 

                    },
                    quickSearchControlConfig:{
                        enable:false,
                        highlightColor:'#ef5a84',
                        position:{
                            top:'10px',
                            left: '58px',
                        },
                        markerUrl:"https://gw.alicdn.com/tfs/TB1yAmwr.T1gK0jSZFrXXcNCXXa-144-144.png?getAvatar=1",
                        width:40,
                        height:40,
                    },
                    zoomControlConfig:{
                        enable:true,
                        position:{
                            top:'110px',
                            left:'10px',
                        },
                    },
                    floorControlConfig:{
                        enable:true,
                        position:{
                            bottom:'120px',
                            right:'10px',
                        },
                    },
                    categoryControlConfig:{
                        enable:true,
                        position:{
                            bottom:'120px',
                            left:'10px',
                        },
                        markerUrl:"https://gw.alicdn.com/tfs/TB1yAmwr.T1gK0jSZFrXXcNCXXa-144-144.png?getAvatar=1",
                        width:40,
                        height:40,
                        types:[
                            {
                                type: '0100|0101|0102|0103', 
                                name:'卫生间',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1R_nBea1s3KVjSZFAXXX_ZXXa-25-27.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1la6BelCw3KVjSZR0XXbcUpXa-25-27.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0200', 
                                name:'母婴室',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1_KnBeaSs3KVjSZPiXXcsiVXa-24-24.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1lFruef1G3KVjSZFkXXaK4XXa-24-24.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0300', 
                                name:'收银台',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1uavuelOD3KVjSZFFXXcn9pXa-28-27.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1HmPvelWD3KVjSZKPXXap7FXa-28-27.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0400', 
                                name:'服务台',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1jT_Wa3FY.1VjSZFqXXadbXXa-24-24.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1J9LBea5s3KVjSZFNXXcD3FXa-24-24.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0600', 
                                name:'缴费机',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1QfHvelGE3KVjSZFhXXckaFXa-24-24.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1MQLvelWD3KVjSZKPXXap7FXa-24-24.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0500', 
                                name:'ATM',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1guGkgkY2gK0jSZFgXXc5OFXa-24-24.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1rBOkgeH2gK0jSZFEXXcqMpXa-24-24.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '0900', 
                                name:'吸烟室',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1fcfyelGw3KVjSZFwXXbQ2FXa-24-24.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1bXTAelGw3KVjSZFDXXXWEpXa-24-24.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '2001', 
                                name:'直梯',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB1bZDzelKw3KVjSZFOXXarDVXa-20-27.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1ovDteliE3KVjSZFMXXbQhVXa-20-27.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '2002', 
                                name:'扶梯',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB165DueouF3KVjSZK9XXbVtXXa-28-28.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1NsvvelGE3KVjSZFhXXckaFXa-28-28.png?getAvatar=1',
                                enable:false
                            },
                            {
                                type: '2101', 
                                name:'出入口',
                                imageUrl: 'https://gw.alicdn.com/tfs/TB190fzelCw3KVjSZFlXXcJkFXa-26-22.png?getAvatar=1',
                                imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1e3HseoWF3KVjSZPhXXXclXXa-25-26.png?getAvatar=1',
                                enable:false
                            },
                        ],
                    },
                    fitMapControlConfig:{
                        enable:true,
                        position:{
                            top: "60px",
                            right: "10px",
                        },
                    },
                    layerControlConfig:{
                        enable: true,
                        position:{
                            top:'110px',
                            right:'10px',
                        },                
                        layers: [
                            {
                                id: "floor",
                                hidden: false,
                                group: "楼层",
                                directory: "图层"
                            },
                            {
                                id: "polygon",
                                hidden: false,
                                group: "铺位",
                                directory: "图层"
                            },
                            {
                                id: "polygonStroke",
                                hidden: false,
                                group: "轮廓",
                                directory: "图层"
                            },
                            {
                                id: "text",
                                hidden: false,
                                group: "标注",
                                directory: "图层"
                            },
                            {
                                id: "logo",
                                hidden: false,
                                group: "设施",
                                directory: "图层"
                            }
                        ]
                    },
                    scaleControlConfig:{
                        enable: true,
                    },
                    fullscreenControlConfig:{
                        enable: true,
                        // position:{
                        //     top:'110px',
                        //     right:'10px',
                        // },
                    },
                    compassControlConfig:{
                        enable: true,
                        // position:{
                        //     top:'110px',
                        //     right:'10px',
                        // },
                    },
                    routeControlConfig:{
                        enable: true,
                        arrowUrl:"https://gw.alicdn.com/tfs/TB12r5gr7P2gK0jSZPxXXacQpXa-45-12.png?getAvatar=1",
                        height:4.5,
                        lineColor:"#3F74FF",

                        startMarkerUrl:'https://gw.alicdn.com/tfs/TB1Zcegr7P2gK0jSZPxXXacQpXa-49-49.png',
                        startMarkerWidth:24,
                        startMarkerHeight:24,
                        startMarkerAnchor:'center',

                        endMarkerUrl:'https://gw.alicdn.com/tfs/TB1VJ1jr4v1gK0jSZFFXXb0sXXa-73-96.png',
                        endMarkerWidth:24,
                        endMarkerHeight:32,
                        endMarkerAnchor:'bottom'

                    },

                    // attributionConfig:{
                    //     logoUrl:'xxx',
                    //     width:64,
                    //     height:64,
                    // }
                });
                var _this = this;
                this.map.on('mapready', (e) => {
                    var timestamp2=new Date().getTime()
                    // alert('loadTime:'+(timestamp2-timestamp1))
                    console.timeEnd('加载时间');
                    console.log('mapready:'+e.floor)
                });
                this.map.on('floorWillChange', (e) => {
                    console.log('floorWillChange')
                });
                this.map.on('floorDidChange', (e) => {
                    console.log('floorDidChange')
                });
                this.map.on('select', (e) => {
                    console.log('select')
                });
                var count = 0;
                this.map.on('click',(e)=>{
                    // this.map.panTo(e.centroid,{
                    //     duration:300,
                    //     easing: "power3.out",
                    //     onComplete: () => {
                    //         this.map.routeTo(e.feature)
                    //     }
                    // });
                    // var coordinate = this.map.unproject(e.point);
                    // var pos = this.map.project(e.lngLat);
                    // var posA = this.map.project(e.lngLat,4.5);

                    this.map.highlightFeature(e.feature,{
                        clear:true,
                        // centroid:e.centroid,
                        fillColor:"#ef5a84",
                        // fillOpacity:0.8,
                        // strokeColor:"#416FFF",
                        // strokeWidth:2,
                        // markerUrl:"https://gw.alicdn.com/tfs/TB1yAmwr.T1gK0jSZFrXXcNCXXa-144-144.png",
                        // width:40,
                        // height:40,
                    })
                });
                this.map.on('zoom',(e)=>{
                     console.log('zoom = '+e.zoom);
                });
                this.map.on('contextmenu:select',(e)=>{
                    var feature = e.feature
                    if (feature){
                    }
                });
                this.map.on('mouseover',(e)=>{
                    var feature = e.feature
                    if (feature){
                    }
                });
            })
        })
        
    }


  
    render() {
      return <div>
          <Helmet title = "室内地图" />
                  <div id = 'map' style = {{height:'100vh',width:'100vw'}}/>                
        </div>;
    }
}

示例2.png

示例3.png

示例4.png

实例.png

创建地图

let map = new MosGL('map',options)

参数名称	类型	必填	默认值	说明
id	string	是	无	地图容器div id
options	Object	是	无	地图配置参数

配置参数options

属性名称	描述	数据类型	默认值	必填
poiId	建筑id	String	无	是
appName&appKey	数据权限校验名称&key	String	无	是
renderTheme	渲染主题	Object	无	是
env	数据环境；'dev':日常；'pre':预发; 'prod':线上	String	"prod"	否
floor	默认显示楼层	Number	1	否
enable3D	3D渲染开关	Bool	false	否
bearing	地图方位角度	Number	0	否
pitch	地图倾斜角度	Number	0	否
minZoom	最小缩放比例	Number	14	否
maxZoom	最大缩放比例	Number	22	否
zoom	默认缩放比例；未设置，地图自动日撑满屏幕	Number	无	否
showTilesMap	显示高德瓦片地图开关	Bool	false	否
enableCache	使能数据缓存开关	Bool	true	否
interactionConfig	地图交互配置	Object	无	否
searchControlConfig	搜索控件配置	Object	无	否
floorControlConfig	楼层控件配置	Object	无	否
categoryControlConfig	类目控件配置	Object	无	否
fitMapControlConfig	还原控件配置	Object	无	否
layerControlConfig	图层切换控件配置	Object	无	否
scaleControlConfig	比例尺控件配置	Object	无	否
fullscreenControlConfig	全屏控件配置	Object	无	否
compassControlConfig	指南针控件配置	Object	无	否
routeControlConfig	路径规划控件配置	Object	无	否

主题文件

示例

const renderTheme = {
    "point":{//点元素主题
        "2001":{//点元素类型ft_type值
            "url":"https://gw.alicdn.com/tfs/TB1JPSrgbr1gK0jSZR0XXbP8XXa-96-96.png",
        },
        "2002":{
            "url":"https://gw.alicdn.com/tfs/TB11S5qgoT1gK0jSZFrXXcNCXXa-96-96.png"
        },
        "2003":{
            "url":"https://gw.alicdn.com/tfs/TB1MVw1fNz1gK0jSZSgXXavwpXa-96-96.png"
        },
        "2004":{
            "url":"https://gw.alicdn.com/tfs/TB1aXipgXT7gK0jSZFpXXaTkpXa-96-96.png"
        },
        "2005":{
            "url":"https://gw.alicdn.com/tfs/TB1wyetgeL2gK0jSZFmXXc7iXXa-96-96.png"
        },
        "2101":{
            "url":"https://gw.alicdn.com/tfs/TB1h7Cqghz1gK0jSZSgXXavwpXa-96-96.png"
        },
        "0100":{
            "url":"https://gw.alicdn.com/tfs/TB1kFc9f4z1gK0jSZSgXXavwpXa-96-96.png"
        },
        "0101":{
            "url":"https://gw.alicdn.com/tfs/TB10rA0fLb2gK0jSZK9XXaEgFXa-96-96.png"
        },
        "0102":{
            "url":"https://gw.alicdn.com/tfs/TB1_8o0fUT1gK0jSZFrXXcNCXXa-96-96.png"
        },
        "0103":{
            "url":"https://gw.alicdn.com/tfs/TB1IjSrgbr1gK0jSZR0XXbP8XXa-96-96.png"
        },
        "0200":{
            "url":"https://gw.alicdn.com/tfs/TB1vtqpgeT2gK0jSZFvXXXnFXXa-96-96.png"
        },
        "0300":{
            "url":"https://gw.alicdn.com/tfs/TB1AlWugkT2gK0jSZFkXXcIQFXa-96-96.png"
        },
        "0400":{
            "url":"https://gw.alicdn.com/tfs/TB1Q4Z9fYr1gK0jSZR0XXbP8XXa-96-96.png"
        },
        "0500":{
            "url":"https://gw.alicdn.com/tfs/TB1dbs1fNn1gK0jSZKPXXXvUXXa-96-96.png"
        },
        "0600":{
            "url":"https://gw.alicdn.com/tfs/TB1wvWAfubviK0jSZFNXXaApXXa-96-96.png"
        },
        "0700":{
            "url":"https://gw.alicdn.com/tfs/TB1cxJXgoY1gK0jSZFCXXcwqXXa-96-96.png"
        },
        "0800":{
            "url":"https://gw.alicdn.com/tfs/TB1DYQ1fFP7gK0jSZFjXXc5aXXa-96-96.png"
        },
        "0900":{
            "url":"https://gw.alicdn.com/tfs/TB1gKI9f9f2gK0jSZFPXXXsopXa-96-96.png"
        }
    },
    "polygon":{//面元素主题
        "default":{//默认面元素主题
            "fillColor":"#F8F8F8",
            "strokeColor":"#CECECE",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "9999":{//面元素类型ft_type
            "fillColor":"#FFFFFF",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px" 
        },
        "floor":{//楼层面元素主题
            "baseHeight":0,//基面高度，暂时未使用，用于3d扩展
            "height":0.5,//元素高度，暂时未使用，用于3d扩展
            "fillColor":"#F5F9FE",//面元素填充颜色
            "strokeColor":"#FFFFFF",//轮廓颜色
            "strokeWidth":2,//轮廓颜色宽度
            "fontColor":"#333",//字体颜色
            "fontSize":"12px",//字体大小
             "patternUrl":"",//填充纹理url，若生效，则每个面都需要配置
        },
        "0095":{
            "baseHeight":0.5,//基面高度
            "height":4,//基面高度
            "fillColor":"#FFFFFF",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px",
             "patternUrl":"",

        },
        "0094":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0093":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#FFFFFF",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0092":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0091":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#CECECE",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px",
        },
        "0001":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#C2DEF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0003":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E8E8FB",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0004":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#F2F2FA",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0002":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#F5E9CB",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0005":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0007":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#FED8D2",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0006":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0008":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0009":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0010":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0011":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0012":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0013":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0014":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0015":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        },
        "0016":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#E5ECF4",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        },
        "0017":{
            "baseHeight":0.5,
            "height":4,
            "fillColor":"#DDEFE8",
            "strokeColor":"#FFFFFF",
            "strokeWidth":1,
            "fontColor":"#333",
            "fontSize":"12px"
        
        }
        
    },
    "roadlink":{
        "link":{
            "fillColor": "#F6E3AC",
            "strokeColor": "#F6E3AC",
            "width": 4,
            "fillOpacity": 1,
            "opacity": 1
        },
        "node":{
            "stroke":true,
            "radius":5,
            "strokeColor":"#F6E3AC",
            "width":1,
            "color": '#F6E3AC'
        }
    }
}

module.exports = {
    renderTheme
}

地图控件

地图控件.png

搜索控件

搜索控件.png

搜索控件2.png

搜索控件3.png

searchControlConfig:{
    enable:true,//使能开关
    position:{//位置
        top:'10px',
        left: '60px',
    },
    highlightColor:'#ef5a84',//搜索选中元素高亮色
    markerUrl:"https://gw.alicdn.com/tfs/TB1jT3Rirr1gK0jSZR0XXbP8XXa-64-64.png",搜索选中元素markerUrl
    types:[//搜索类目
        {
            type: '0001', 
            name:'服饰鞋包',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1874dgbY1gK0jSZTEXXXDQVXa-120-120.png',
        },
        {
            type: '0002', 
            name:'餐饮美食',
            imageUrl: 'https://gw.alicdn.com/tfs/TB13ClYgoY1gK0jSZFCXXcwqXXa-120-120.png',
        },
        {
            type: '0003', 
            name:'美妆丽人',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1yOlXglv0gK0jSZKbXXbK2FXa-120-120.png',
        },
        {
            type: '0004', 
            name:'珠宝配饰',
            imageUrl: 'https://gw.alicdn.com/tfs/TB14s..fW67gK0jSZFHXXa9jVXa-120-120.png',
        },
        {
            type: '0005', 
            name:'生活家居',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1JnU.f.z1gK0jSZLeXXb9kVXa-120-120.png',
        },
        {
            type: '0006', 
            name:'休闲娱乐',
            imageUrl: 'https://gw.alicdn.com/tfs/TB15Z..fW67gK0jSZFHXXa9jVXa-120-120.png',
        },
        {
            type: '0007', 
            name:'数码家电',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1CplXgfb2gK0jSZK9XXaEgFXa-120-120.png',
        },
        {
            type: '0008', 
            name:'母婴亲子',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1b2hdgoY1gK0jSZFCXXcwqXXa-120-120.png',
        },
        {
            type: '0009', 
            name:'教育文化',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1NTtXgmf2gK0jSZFPXXXsopXa-120-120.png',
        },
        {
            type: '0010', 
            name:'医疗养生',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1sSwzfV67gK0jSZPfXXahhFXa-120-120.png',
        },
        {
            type: '0011', 
            name:'烟酒水饮',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1yoJdga61gK0jSZFlXXXDKFXa-120-120.png',
        },
        {
            type: '0012', 
            name:'超市综合',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1vkxXgoT1gK0jSZFrXXcNCXXa-120-120.png',
        },
        {
            type: '0013', 
            name:'车辆服务',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1bJc.fW67gK0jSZFHXXa9jVXa-120-120.png',
        },
        {
            type: '0014', 
            name:'综合服务',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1DlQ_fVT7gK0jSZFpXXaTkpXa-120-120.png',
        },
        {
            type: '0015', 
            name:'社会团体',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1bMhXgkP2gK0jSZPxXXacQpXa-120-120.png',
        },
        {
            type: '0016', 
            name:'展厅展柜',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1xwE_fVY7gK0jSZKzXXaikpXa-120-120.png',
        },
        {
            type: '0017', 
            name:'体育健身',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1ssw.f1L2gK0jSZPhXXahvXXa-120-120.png',
        },
    ], 

},

楼层控件

楼层控件.png

floorControlConfig:{
    enable:true,
    position:{
        bottom:'120px',
        right:'10px',
    },
},

类目控件

类目控件.png

categoryControlConfig:{
    enable:true,
    position:{
        bottom:'120px',
        left:'10px',
    },
    markerUrl:"https://gw.alicdn.com/tfs/TB1jT3Rirr1gK0jSZR0XXbP8XXa-64-64.png",
    types:[
        {
            type: '0100|0101|0102|0103', 
            name:'卫生间',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1R_nBea1s3KVjSZFAXXX_ZXXa-25-27.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1la6BelCw3KVjSZR0XXbcUpXa-25-27.png',
            enable:false
        },
        {
            type: '0200', 
            name:'母婴室',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1_KnBeaSs3KVjSZPiXXcsiVXa-24-24.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1lFruef1G3KVjSZFkXXaK4XXa-24-24.png',
            enable:false
        },
        {
            type: '0300', 
            name:'收银台',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1uavuelOD3KVjSZFFXXcn9pXa-28-27.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1HmPvelWD3KVjSZKPXXap7FXa-28-27.png',
            enable:false
        },
        {
            type: '0400', 
            name:'服务台',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1jT_Wa3FY.1VjSZFqXXadbXXa-24-24.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1J9LBea5s3KVjSZFNXXcD3FXa-24-24.png',
            enable:false
        },
        {
            type: '0600', 
            name:'缴费机',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1QfHvelGE3KVjSZFhXXckaFXa-24-24.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1MQLvelWD3KVjSZKPXXap7FXa-24-24.png',
            enable:false
        },
        {
            type: '0500', 
            name:'ATM',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1guGkgkY2gK0jSZFgXXc5OFXa-24-24.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1rBOkgeH2gK0jSZFEXXcqMpXa-24-24.png',
            enable:false
        },
        {
            type: '0900', 
            name:'吸烟室',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1fcfyelGw3KVjSZFwXXbQ2FXa-24-24.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1bXTAelGw3KVjSZFDXXXWEpXa-24-24.png',
            enable:false
        },
        {
            type: '2001', 
            name:'直梯',
            imageUrl: 'https://gw.alicdn.com/tfs/TB1bZDzelKw3KVjSZFOXXarDVXa-20-27.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1ovDteliE3KVjSZFMXXbQhVXa-20-27.png',
            enable:false
        },
        {
            type: '2002', 
            name:'扶梯',
            imageUrl: 'https://gw.alicdn.com/tfs/TB165DueouF3KVjSZK9XXbVtXXa-28-28.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1NsvvelGE3KVjSZFhXXckaFXa-28-28.png',
            enable:false
        },
        {
            type: '2101', 
            name:'出入口',
            imageUrl: 'https://gw.alicdn.com/tfs/TB190fzelCw3KVjSZFlXXcJkFXa-26-22.png',
            imageUrl_enable: 'https://gw.alicdn.com/tfs/TB1e3HseoWF3KVjSZPhXXXclXXa-25-26.png',
            enable:false
        },
    ],

},

还原控件

 fitMapControlConfig:{
    enable:true,
    position:{
        top: "60px",
        right: "10px",
    },
},

图层切换控件

图层切换控件.png

layerControlConfig:{
    enable: true,
    position:{
        top:'110px',
        right:'10px',
    },                
    layers: [
        {
            id: "polygon",
            hidden: false,
            group: "铺位",
            directory: "图层"
        },
        {
            id: "polygonStroke",
            hidden: false,
            group: "轮廓",
            directory: "图层"
        },
        {
            id: "text",
            hidden: false,
            group: "标注",
            directory: "图层"
        },
        {
            id: "logo",
            hidden: false,
            group: "设施",
            directory: "图层"
        }
    ]
},

比例尺控件

scaleControlConfig:{
    enable: true,
},

全屏控件

 fullscreenControlConfig:{
      enable: true,
 },

指南针控件

compassControlConfig:{
    enable: true,
},

路径规划控件

routeControlConfig:{
    enable: true,
    arrowUrl:"https://gw.alicdn.com/tfs/TB1jcR8oV67gK0jSZPfXXahhFXa-40-16.png",//路径贴图url
    lineWidth:8,//路径宽度
    lineColor:"#00D26A",//路径颜色

    startMarkerUrl:'https://gw.alicdn.com/tfs/TB1qF6Qi1T2gK0jSZFvXXXnFXXa-64-64.png',//起点MarkerUrl
    startMarkerWidth:32,
    startMarkerHeight:32,

    endMarkerUrl:'https://gw.alicdn.com/tfs/TB1kTrUi1H2gK0jSZJnXXaT1FXa-64-64.png',//终点MarkerUrl
    endMarkerWidth:32,
    endMarkerHeight:32,
},

地图事件

mapready--地图加载完成事件

地图渲染是异步完成的，所有map接口的调用都要在地图加载完成事件后

map.event.on("mapready", (data)=>{
        console.log("mapready--"+data.floor)
}）

click--点击事件

map.event.on("click", (data)=>{
        var feature = data.feature
    var centroid = data.centroid
    var type = data.geoType
})

floorWillChange--楼层开始切换事件

map.event.on("floorWillChange", (data)=>{
        console.log(data.floor)
})

floorDidChange--楼层完成切换事件

map.event.on("floorDidChange", (data)=>{
        console.log(data.floor)
})

mousemove -- 鼠标移动至元素事件

map.event.on("mousemove", (data)=>{
        var feature = data.feature
    var centroid = data.centroid
    var type = data.geoType//type:'Point','Polygon','Floor'
})

地图接口

事件接口

on(event,fn)----监听事件

map.on('mapready', (e)=>{
   console.log('mapready:'+e.floor)
});

once(event,fn)----单次监听事件

const fn = (e)=>{
   console.log('mapready:'+e.floor)
}
map.once('floorchanged', fn);

fire(event,data)----发送事件

map.fire('toolsAction',{type:'draw',feature:feature});

off(event,fn)----解除监听事件

map.off('floorchanged',fn);

地图操作

showFloor(floor)----切换楼层

map.showFloor(-1)

setBearing(bearing)----设置方位角

map.setBearing(90)

getBearing(bearing)----获取方位角

var  bearing = map.getBearing()

rotateTo(bearing,options)----旋转地图，支持动画

 map.rotateTo(90,{duration:500,animate:true})

setPitch(pitch)----设置俯仰角

map.setPitch(90)

getPitch(pitch)----获取俯仰角

var  bearing = map.getBearing()

panTo(lnglat,options)----平移地图

map.panTo([120.12321,30.35248],{     
        duration:500,
    animate:true
})

zoomIn(options)----缩小地图

map.zoomIn({duration:500})

zoomOut(options)----放大地图

map.zoomOut({duration:500})

zoomTo(zoom,options)----放大地图

map.zoomTo(15,{duration:500})

getZoom()----获取地图缩放系数

map.getZoom()

fitBounds()----适配地图至框选范围

map.fitBounds([[120.9876, 30.7661], [120.9397, 30.8002]],{
  duration:500,
  animate:true,
  padding: [50, 50, 50, 50],
  easing:Easing.inAndOut
})

fitMap(options)----地图还原至初始状态

map.fitMap()

easeTo()----动态转换，将中心点、缩放级别、方位角和倾斜度组合的原有数值改为新数值

map.easeTo({
        center:[120.342432,30.538]
    zoom:15,
    bearing:30,
    pitch:30,
    duration:500,
    animate:true,
    easing:Easing.inAndOut
})

Marker

marker支持平移、旋转动画

创建marker

var marker = map.addMarker({
        element:domElement,//自定义dom元素
    anchor:'bottom',//支持'center','left' , 'right'
    lnglat:[120.3234,30.32948],
})

var marker = map.addMarker({
    markerUrl:'https://gw.alicdn.com/tfs/TB1jT3Rirr1gK0jSZR0XXbP8XXa-64-64.png',
    width:32,
    height:32,
    subMarkerUrl:'xxx',//可选
    subWidth:16,//可选
    subHeight:16,//可选
    anchor:'bottom',//支持'center','left' , 'right'
    lnglat:[120.3234,30.32948],
})

设置marker方位角

marker.setRotation(90)

平移marker

marker.moveTo([120.23498,30.3478],{
  duration:300,
  animate:true
})

移除marker

map.removeMarker(marker)

popup----气泡标注

var popup = map.openPopup({
    text:'hello world',
  lnglat:[120.32413,30.3429],
})

var popup = map.openPopup({
    DOMContent:DOMContent,//自定义dom元素
  lnglat:[120.32413,30.3429],
})

map.closePopup(popup)

高亮

highlightFeature----高亮元素

 map.highlightFeature(feature,{
      clear:true,//清除其它高亮元素
      fillColor:"#FF1B66",//高亮填充色
      markerUrl:'https://gw.alicdn.com/tfs/TB1jT3Rirr1gK0jSZR0XXbP8XXa-64-64.png',
  })

clearHighlightFeature----清除高亮

 map.clearHighlightFeature(feature) //清除指定高亮元素

 map.clearHighlightFeature() //清除所有高亮元素

highlightByType----高亮指定类型元素

 map.highlightByType('0001')

clearHighlightByType----清除高亮指定类型元素

 map.clearHighlightByType('0001')

数据搜索

searchDataByKey----搜索包含指定key的数据

 var features = map.searchDataByKey('KFC')

searchDataByType----搜索指定类型的数据

 var features = map.searchDataByType('0001')

getFeatureById----获取指定id的数据

 var feature = map.getFeatureById('242993432937')

getFeatureByNum----获取指定编号的数据

 var feature = map.getFeatureByNum('176-1')

路径规划

drawRoutePath---- 获取并绘制规划路径

//起点，终点传入经纬度
var start = {
  x:120.249847,
  y:30.3243280,
  floor:1,
}
var end = {
  x:120.248324,
  y:30.3243343,
  floor:1,
}

//起点，终点传入id
var start = {
  id:cpid1
}
var end = {
  id:cpid2,
}

var options = {
  lineColor:'#00D26A',//路线填充颜色
  lineWidth:8,//路线宽度,
  patternUrl:'xxx',//路线纹理url
  startMarkerUrl:'xxx',//起点marker图标url
  startMarkerWidth:32,//起点marker图标宽
  startMarkerHeight:32,//起点marker图标高
  
  endMarkerUrl:'xxx',//终点marker图标url
  endMarkerWidth:32,//终点marker图标宽
  endMarkerHeight:32,//终点marker图标高

}
map.drawRoutePath(start,end,options,(data)=>{

})

clearRoutePath()----清除路线

map.clearRoutePath()

绘制路线

drawPath(geojson,options) ----绘制路线

var geojson = {

}
var options = {
  lineColor:'#00D26A',//路线填充颜色
  lineWidth:8,//路线宽度,
  patternUrl:'xxx',//路线纹理url
}

map.drawPath(geojson,options)

clearPath() ----清除路线

map.clearPath()

热力图

HeatMapLayer

//创建热力图图层
var heatLayer = new HeatMapLayer(map,data,layerName,options)

入参：

map:地图对象

data:GeoJSON 点集

option:{

colorRange:[]//色值范围

minWeight:0//最小权值

maxWeight:9//最大权值

minRadius:10// 热力点最小半径（像素）

maxRadius:50// 热力点最大半径（像素）

}

接口

layer.updateData(data)：更新数据

layer.clearData() ：消除数据

效果

[图片上传失败...(image-cbcdff-1599190483140)]

demo

let geojson = {
                "type":"FeatureCollection",
                "features":[
           
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.108497,
                                30.299446
                            ]
                        },
                        "properties":{
                            "weight":7,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.106586,
                                30.29951
                            ]
                        },
                        "properties":{
                            "weight":4,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.108754,
                                30.299423
                            ]
                        },
                        "properties":{
                            "weight":5,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.106779,
                                30.299208
                            ]
                        },
                        "properties":{
                            "weight":6,

                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.108845,
                                30.300187
                            ]
                        },
                        "properties":{
                            "weight":7,

                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.10700216,
                                30.29884947
                            ]
                        },
                        "properties":{
                            "weight":8,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.10731818,
                                30.29994176
                            ]
                        },
                        "properties":{
                            "weight":2,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.10679066,
                                30.2999071
                            ]
                        },
                        "properties":{
                            "weight":3,
                        }
                    },
                    {
                        "type":"Feature",
                        "geometry":{
                            "type":"Point",
                            "coordinates":[
                                120.1080105,
                                30.2989085
                            ]
                        },
                        "properties":{
                            "weight":4,
                        }
                    },
                ]
            }
                
            var heatMapLayer = new HeatMapLayer(this.map,geojson,'heatMapLayer',{
                colorRange:["rgba(33,102,172,0)","rgb(103,169,207)", "rgb(209,229,240)","rgb(253,219,199)", "rgb(239,138,98)", "rgb(178,24,43)"],
                minWeight:0,
                maxWeight:9,
                minRadius:50,
                maxRadius:50,
            })